up vote 0 down vote favorite

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.

e.g. 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.
e.g. 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
e.g do I use jquery to add CSS class to each li element depending on selected formation

share|improve this question

1 Answer

up vote 0 down vote accepted

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.

share|improve this answer
Thanks for providing the example code. I will continue to investigate jquery but your example is very clear implementation of one way to achieve what I want. I was wondering whether there were other solutions involving CSS - could I for instance define DEF, MID and STR as classes and add remove classes to different list items to order them accordingly – fujitofoo Jun 25 '12 at 11:53
$("#ulDefenders").empty(); $("#ulMidfielders").empty(); $("#ulStrikers").empty(); could be $("#ulDefenders,#ulMidfielders,#ulStrikers").empty(); – Mark Schultheiss Jun 25 '12 at 11:56
I have updated this post with some ideas, that may help you. – Ihor Deyneka Jun 25 '12 at 12:43
Thanks, that was very useful. I suppose I need the CSS to style the results but I don't necessarily need it to implement the formation change. This was where I was getting confused before as I was considering the styling of each position type as part of the formation selection. As a matter of interest how would you then achieve something like this fantasyfootball.telegraph.co.uk/euros/select-team? i.e. controlling the placement of the images dependent on the selected formation – fujitofoo Jun 25 '12 at 13:02
Just look for the source html of the site you noted, it was implemented via absolute positioning (similar to my last idea) Look at their styles with developer toolbar div.f1532 #icon1 { top: 10px; left: 258px; } – Ihor Deyneka Jun 25 '12 at 13:51

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.