2
\$\begingroup\$

http://jsfiddle.net/hrishikeshp19/VyDsu/21/

Following is my HTML body:

<div id="header">
<div id="logo">

</div>
<div id="headercontent1">

</div>
<div id="headercontent2">

</div>

</div>
<div id="buttons-container">
</div>
<div id="panels-container">
    <div id="panel1"></div>
        <div id="panel2"></div>
        <div id="panel3"></div>
</div>
<div id="table-container">
<table id="my-table">
<thead id="my-table-head">
<tr> 
<th>
    My Table
</th>
<th>
    Column 1
</th>
<th>
    Column 2
</th>
</tr>
</thead>
<tbody id="my-table-body">
<tr class="tr-odd">
<td>Row 1</td>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>    
</tr>
<tr>
<td>Row 2</td>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>    
</tr>
<tr class="tr-odd">
<td>Row 3</td>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>    
</tr>

    </tbody>
</table>    
</div>
<div id="gallery">
</div>
​

following is my css:

body{
    position: relative;
}
#header{
height: 160px;
    background-color:black;
    width: 960px;
    position: relative;
}#logo{
    position: absolute;
    width:300px;
    height:140px;
    left:40px;
    background-color: grey;
    top: 10px;
}
#headercontent2, #headercontent1{
    position: absolute;
    width:140px;
    height:140px;
    right:40px;
    background-color: grey;
    top: 10px;
}
#headercontent1{right:200px;}
#buttons-container{
    position:absolute;
    top:180px;
    left:0px;
height:60px;
    width:960px;
    background-color:black;
}
#panels-container{
    position:absolute;
    top:260px;
    left:0px;
}
#panel1,#panel2,#panel3{
    position:absolute;
    left:0px;
    height:300px;
    width:300px;
    background-color:cyan;
}
#panel2{
        left:320px;
}
#panel3{
        left:640px;
}

#table-container{
    position:absolute;
    top:580px;
    left:0px;
    width:960px;
    background-color:white;
}
#my-table{
    width:960px;
border-color: black;
    border-width: 1px;
    border-style: solid;
}

#my-table-head th{
    background-color: grey;
    height:50px;
    text-align:center;
    width: 320px;
}
#my-table-body tr{
    text-align:center;
    background-color:grey;
    height: 50px;
}

#my-table-body td{
    text-align:center;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    width: 320px;
}

#my-table .tr-odd{
background-color:white;
}

#gallery{
    position:absolute;
    top:800px;
        left:0px;
    width: 960px;
    height:400px;
    background-color:blue;
    overflow:hidden;
}
​

and the javascript:

var url = "http://numberonelarge.com/tapjoy/jsonp.php?callback=yourcallbackfunction";

var images_ready = function(images){
    //sort the images, sorting based on height of images, this is called as greedy strategy
    for(var i=0,len=images.length;i<len;i++){
        for(var j=i+1;j<len;j++){
            if(images[i].height<images[j].height){
                var temp = images[j];
                images[j]=images[i];
                images[i]=temp;                    
            }
        }
    }
    images.reverse();//arrange in ascending order
    //assumption 1: all images of constant width
    var img_width = 160;
    var row_limit = $("#gallery").width()/img_width;
        for(var i=0,len=images.length;i<len;i++){
            $(images[i]).css({"left":img_width*(i % row_limit)});
            if(i-row_limit>=0){
$(images[i]).css({"top":images[i-row_limit].height+parseInt($(images[i-row_limit]).css("top"))});                
            }            
            else{
                $(images[i]).css({"top":0});                
            }
            $("#gallery").append(images[i]);
        }
}

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
        var images = [ ];
        for (var i=0,len=json.length;i<len;i++){
            var img = $('<img />').attr({ 'id':'img_'+i, 'src': json[i]}).css({"position":"absolute"}).load(function(){
                images.push(this);
                if(images.length == len){
                    images_ready(images);
                }              
            });
        }             
    },
    error: function(e) {
       console.log(e.message);
    }
});

Above is the fiddle I want to make cleaner.

\$\endgroup\$
  • 1
    \$\begingroup\$ We ask that you post your code in your question. This makes it easier to look at, and links like you have posted sometimes expire, so if somebody is looking at this in the future they code might not be there. \$\endgroup\$ – Jeff Vanzella Sep 26 '12 at 15:57
  • 1
    \$\begingroup\$ At least one user that has understood of this site works ;) \$\endgroup\$ – hakre Sep 26 '12 at 15:57
  • \$\begingroup\$ Cleaner in what way? Better to read? Or using better techniques? My first suggestion would be to use less absolute positioning and fixed pixel sizes. \$\endgroup\$ – RoToRa Sep 27 '12 at 10:59
2
\$\begingroup\$

The code you posted doesn't have must meaning to me and it's hard to follow.

Here are a few guidelines to follow to improve your code quality.

1) Format your code.

Formatting makes your code easier to read and maintain.

2) Add some comments

It looks like you posted a basic template. It would be nice if you added a comment about the overall purpose of each section.

3) Try out a css framework.

Creating a layout that is consistent among various browsers is challenging. CSS frameworks were created to solve just that problem. Here's a popular framework called blueprint.

4) Learn how to create meaningful names.

What's the purpose of this table?

<table id="my-table">

Can you guess what this table is for?

<table id="yearlySalesTable">

You should read this question over at stackoverflow.com called "How to name variables"

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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