hey guys, ive got a page which displays results but the order of them is a nonsense; the results are returned from a remote server and have an order id element to each result, although my script loops through the XML and displays html as it's looping through so effectively i'm getting; <div id="5"><p>Content</div> <div id="2"><p>Content</div> <div id="4"><p>Content</div> <div id="1"><p>Content</div> <div id="3"><p>Content</div> etc. etc. HTML output is as such on page, i know i could get these divs re-ordered using absolute positioning (each of these divs have a FIXED height and width) with CSS, although the number of results is far more than 5 and sometimes the returned result set could be anywhere between 1 and 100. So, my million dollar question is; can a get some form of javascript to change the order in which this HTML is outputted to the browser?
you can do this with jquery: <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(){ var n = 2;//number of div var height = $('#1').height();//return the height of the div with the id=1 $("div").css("position","absolute"); for(i=1;i<n+1;i++) { var h = height * (i-1); $(document.getElementById(i)).css("top",h); } }); </script> Code (markup):
thanks for this response, however, the problem grows greater as i forgot to mention that some of the html divs are not present i.e. the html which comes out exactly looks like this; <div id="5" class="item"><p>content.</p></div> <div id="17" class="item"><p>content.</p></div> <div id="1" class="item"><p>content.</p></div> <div id="2" class="item"><p>content.</p></div> <div id="9" class="item"><p>content.</p></div> So with this neat bit of jQuery, depending on what id's get dynamically requested there will always be the height of one div of white space inbetween the numbers which aren't present.
got it sorted now, literally. used a jQuery library called "tinysort", very handy and works well too, see as such-didn't even need to use div id's, it sorts by child content which is even better! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <title>tinysort test</title> <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="scripts/jquery.tinysort.js"></script> <style type="text/css"> #1{width:200px; height:50px;} .divStyle {width:200px; height:50px; background-color:#dedede;} p{margin:0;} </style> </head> <body> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div#cars>div").tsort("p.price"); }); </script> <div id="cars"> <div id="5" class="divStyle"><p>Content Five</p><p class="price">Inclusive 5.00</p></div> <div id="2" class="divStyle"><p>Content Two</p><p class="price">Inclusive 2.00</p></div> <div id="4" class="divStyle"><p>Content Four</p><p class="price">Inclusive 4.00</p></div> <div id="1" class="divStyle"><p>Content One</p><p class="price">Inclusive 1.00</p></div> <div id="3" class="divStyle"><p>Content Three</p><p class="price">Inclusive 3.00</p></div> </div> </body> </html> Code (markup):