1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

ordering html div elements with js?

Discussion in 'JavaScript' started by jeanmichel, May 24, 2010.

0
  1. #1
    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?
     
    jeanmichel, May 24, 2010 IP
  2. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    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):
     
    wab, May 24, 2010 IP
  3. jeanmichel

    jeanmichel Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    jeanmichel, May 24, 2010 IP
  4. jeanmichel

    jeanmichel Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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):
     
    jeanmichel, May 24, 2010 IP
  5. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #5
    I had a look on the plugin's website, It's pretty interesting, and really easy to use!
     
    wab, May 25, 2010 IP