views:

282

answers:

2

Hello all,

I have a code wich works very nice and I had great help here. The only thing is dat the array players output are not very nice lined up with eachother in a table.

My question is, how can this code (array players output) be modified to have it nicely lined up?

<html>

<head>

<title>Lotto van Terwijn</title>

<body>

<p><img src="../lotto/images/terwijn.png" width="547" height="188"></p>

<style type="text/css">

      body {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        color: #000000;

        background-color: #FFFFFF;

      }

      .name {

        color: #000000;

        font-weight: bold;

        margin-right: 0.5em;

      }

      .picks, .picks * {

        display: inline;

        margin: 0;

        padding: 0;

        list-style-type: none;

      }

      .picks * {

        margin: auto 0.25em;

                               color: Yellow;

      }

      .win { color: #ffcc00; font-weight: bold }

      .loss { color: #ff0000; font-weight: bold }

      .drawNum, #Draws H3 {

          margin-bottom: 0;

      }

    </style>

<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"&gt;&lt;/script&gt;

<div id="players"></div>
<div id="draws"></div>

<script type="text/javascript">

var players = {
Joop   : ["6","8","16","18","26","28","32","36","38","41"],
Marijke: ["7","10","14","18","24","29","30","34","39","40"],
Michel : ["4","5","11","16","21","27","33","36","42","44"],
Mario  : ["6","9","18","25","32","35","39","40","43","45"],
Diana  : ["2","6","8","17","22","23","33","36","42","45"],
Agnes  : ["3","5","10","15","26","29","32","37","41","44"],
Chris  : ["5","7","8","9","11","12","16","28","30","32"],
Jeannette: ["1","2","4","7","8","11","13","28","30","38"],
Wieger: ["1","2","3","7","10","13","14","22","23","27"],
Anita: ["6","13","15","17","21","26","32","33","43","45"],
Thea: ["1","3","5","7","10","17","19","20","22","38"],
Danny: ["3","7","11","15","22","28","32","37","40","43"],
Cindy: ["2","4","16","18","21","24","33","38","41","44"],
Hanneke: ["1","3","4","12","18","21","25","30","36","40"],
Willem: ["3","9","17","21","27","33","35","39","41","42"]
};

var draws = [ {

when: 'Datum: Zaterdag 08-08-2009',
picks:[2, 13, 15, 18, 21, 41]
},

{
when: 'Datum: Zaterdag 15-08-2009',
picks:[6, 19, 24, 25, 35, 37]
},

{
when: 'Datum: Zaterdag 22-08-2009',
picks:[8, 17, 23, 26, 37, 42]
}
];

var buildPlayers = function(){
var cont = $("#players");
for(player in players){
var html = ["<div>","<span class='name'>"+player+"</span>", "<ol class='picks'>"];
for(var i = 0; i < players[player].length; i++){
html.push("<li class='loss pick_"+players[player][i]+"'>"+players[player][i]+"</li>");
}

html.push("</ol>","</div>");
cont.append(html.join(""));
}
};

var buildDraws = function(){
var cont = $("#draws");
for(var i = 0; i < draws.length; i++){
var html = ["<div class='draw'>","<h4 class='drawNum'>Trekking "+(i+1)+"</h3>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"];

for(var j = 0; j < draws[i].picks.length; j++) {
      var img = '<img src="http://www.lotto.nl/static/images/ballen/lotto/l'
                     + draws[i].picks[j]
                     + '.jpg" alt="'
                     + draws[i].picks[j]
                     + '" />';
      html.push("<li>"+img+"</li>");
      showWin(draws[i].picks[j]);
  }



html.push("</ol>","</div>");
cont.append(html.join(""));
}
};

var showWin = function(winNum){
$(".pick_"+winNum).removeClass("loss").addClass("win");
};

$(function(){
buildPlayers();
buildDraws();
});
</script>


</body>

</html>
+1  A: 

Use a table instead, or give fixed width to your spans in the css.

Zed
ading css to the span worked allmost great, the only think is that the numbers it self are not really lined up. I think it's because they come in a array, is there a way to line them up seperatly?Personally I don't know how to implement it in a table with javascript. I have seen it with document.print, but I think that doesn't fit into this type of coding.
Chris
+1  A: 

Zed is right: use a table instead of a list.

Then, you can put the stylesheet in the <head>, close the <head> and a few other little details.

pavium