Dynamic image placement help - CSS / javascript / jquery?

Question

Hi I'm fairly new to web development and am stuck at the very first project I have set myself.

I'm trying to create a team selection page where different team formations can be selected and the images will be dynamically ordered according to the selected formation.

I don't know if this can be achieved using CSS only, or whether I have to combine it with javascript or jquery (I'm trying to learn all 3 so it's a steep learning curve).

I think I can create a list in the html ul li, and then dynamically change the class of each li depending on the selected formation.

eg for soccer, formation 442 would have:

GK
DEF DEF DEF DEF
MID MID MID MID
STR STR

but if the formation was changed to 541 then the images would change to show

GK
DEF DEF DEF DEF DEF
MID MID MID MID
STR

Could anybody provide me with hints as to what possible solutions there are to this issue and I will read up further to try and understand.
eg do I need to create a javascript function for each formation type, give an id to each li element and set the CSS for each element depending on the selected formation
eg do I use jquery to add CSS class to each li element depending on selected formation

Answer 1

Here's a piece of code which may help you with what you need.

<div>
    <ul id="ulGoalkeepers"><li>GK</li></ul>
    <hr />
    <ul id="ulDefenders"></ul>
    <hr />
    <ul id="ulMidfielders"></ul>
    <hr />
    <ul id="ulStrikers"></ul>
</div>
<select id="ddlFormation">
    <option></option>
    <option value="4-4-2">4-4-2</option>
    <option value="4-5-1">4-5-1</option>
</select>
<script type="text/javascript" language="javascript">
    function formationChanged(){
        var formation = $("#ddlFormation").val();
        if (formation != undefined && formation != '') {
            $("#ulDefenders").empty();
            $("#ulMidfielders").empty();
            $("#ulStrikers").empty();

            var parts = formation.split('-');
            var defenders = parts[0];
            var midfielders = parts[1];
            var strikers = parts[2];

            for (var i = 0; i < defenders; i++) {
                $("#ulDefenders").append('<li>DEF</li>');
            }
            for (var i = 0; i < midfielders; i++) {
                $("#ulMidfielders").append('<li>MID</li>');
            }
            for (var i = 0; i < strikers; i++) {
                $("#ulStrikers").append('<li>STR</li>');
            }
        }
    }

    $(document).ready(function () {
        $("#ddlFormation").bind("change", formationChanged);
    });
</script>

EDIT: I don't like the idea with CSS because you lose the structure of html elements. Defenders, midfielders are all will be in the same list and that is not very good. On the other hand there might be some ideas how to implement that and a lot depends on what you really need. For example:

CSS:

    .team div
    {
        float: left;
        width: 50px;
    }
    .team div.first
    {
        clear: both;    
    }

HTML:

    <div class="team">
        <div class="goalkeeper">GK</div>
        <div class="defender first">DEF</div>
        <div class="defender">DEF</div>
        <div class="defender">DEF</div>
        <div class="defender">DEF</div>
        <div class="midfielder first">MID</div>
        <div class="midfielder">MID</div>
        <div class="midfielder">MID</div>
        <div class="midfielder">MID</div>
        <div class="striker first">STR</div>
        <div class="striker">STR</div>
    </div>

But that does not work in IE7. You may try to investigate this a bit more. Another idea is to use css absolute positioning. For example you add appropriate classes via jquery, so one item would have for example class="midfielder second" and you interprete this in css like "top" css style from "midfielder" class and "left" css style from "second" class.