Dynamic Float top positions

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

counter = $("#container > div").size(); // count total immidiate children of container
columns = 3;

leftpos = 0;
var myarray = [];
var temp = [];
temp[0] =temp[1] = temp[2] =0;
j=0;

for(i=1;i<=counter;i++)
{

width = $("#div"+i).width();

$("#div"+i).css('left',leftpos+'px');
$("#div"+i).css('top',temp[j]+'px');

$("#div"+i).css('display','block');

leftpos = leftpos + width;
myarray[j] = $("#div"+i).height();

temp[j] = temp[j] + myarray[j]

j++;
if(i%columns==0) {leftpos =0; var myarray = []; j=0;}

}// end of for loop

});
</script>

<style type="text/css">
#container{ width:900px; position:relative;}
.divs { width:300px; float:left; display:none; position:absolute; border:#000 1px solid;}
</style>

<div id="container">
<div id="div1">
asd falksjdf alksjdf ;asdf
asdf asdfa sdlfkjal; sdfkl;aksjd f;lkasjdf ;laksjdf ;laksjdf ;laksjdf laksdjfa lskdfj a;sldkfj as
</div>
<div id="div2">t is a long established fact tha sdf at a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div id="div3">t is a long established fact that a ra sdfkahsd fadsfeader will be distracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div id="div4">t is a long established fact that a reader will be di asdkjfh laksjdhf aksdhf stracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will be distracted by the readable content of a</div>
<div id="div5">t is a long established fact that a reader will be distracted by the readable asd asdf asdfk hasdfcontent of a page when looking at its layout. </div>
<div id="div6">t is a long established fact that a reader will be distracted by the readable content of a page whas dfasdf asdfkjh f en looking at its layout. </div>
<div id="div7">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its la asdf ads fadfyout. </div>
<div id="div8">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its la dfa fayout. </div>
<div id="div9">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layoua adsf t. </div>
<div id="div10">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layoa dfasd fasdf asd fasdf ad asdfadsf asdf ut. </div>
<div id="div11">t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layou asd fasdf aksd fkjahsd fjkahsd flkjahsd ft. </div>

</div>

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 5 = nine