Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Aaron Fryer
Aaron Fryer
3,605 Points

Change order of divs every reload

Hey Folks,

So i have got my first website job, and one of the pages on it needs to contain a list of 20+ sponsors, they will be small divs with a logo and company name in, and i hope to squeeze 3/4 into each "line" making a large grid of sponsor divs. All within a content div of set width.

My question is, how can i make them load in different (random) orders on the page each time its loaded? IE say mcdonalds was first in the list, burger king second, kfc third etc, then the next time someone loads the page kfc is now at the top, mcdonalds 8th BK bottom etc etc.

I'm guessing i will need the math.function in Jscript but can't quite figure out how to display them all in a random order!!!

I hope I've explained myself well enough, any help would be AMAZING!

Thanks in Advance,

Aaron

4 Answers

Omar Ramírez
Omar Ramírez
183 Points

If you know a little bit of jQuery maybe this helps you.

  • My parent div ID are #sponsors

  • My class for the childs are .single-sponsor

        $(document).ready(function(){

          $('div#sponsors').each(function(){

                // get current div
                var $div_parent = $(this);

                // get array of childs in parent div
                var $divsArr = $div_parent.children('div.single-sponsor');

                // sort array of childs in parent div (#sponsors) randomly
                $divsArr.sort(function(a,b){

                      // Get a random number between 0 and 10
                      var temp = parseInt( Math.random()*10 );

                      // Get 1 or 0, whether temp is odd or even
                      var isOddOrEven = temp%2;

                      // Get +1 or -1, whether temp greater or smaller than 5
                      var isPosOrNeg = temp>5 ? 1 : -1;

                      // Return -1, 0, or +1
                      return( isOddOrEven*isPosOrNeg );
                })

                // append child items to parent
                .appendTo($div_parent);            
          });
    });

This is other example using a list: http://jsbin.com/upuju3/2

Hope this helps.

Aaron Fryer
Aaron Fryer
3,605 Points
Aaron Fryer
Aaron Fryer
3,605 Points

Wow that's brilliant, end result is exactly what I am after, I think i need to finish off the jquery learning adventure to fully understand it though. Whilst I am learning I am trying really hard to not blindly copy code without knowing how to change/fix it if it ever goes wrong. Otherwise i will never learn anything :)

Thank you so much though Omar, a great help!!!

Aaron Fryer
Aaron Fryer
3,605 Points
Aaron Fryer
Aaron Fryer
3,605 Points

I looked through your code Omar, and it really gave me some direction for how to find a solution in javascript (something i have a muhc greater knowledge of than jQuery)

I ended up with this:

<blockquote>
    <script>
                var sponsorList=new Array()
                sponsorList[0]='<div class="sponsor"><img src="images/sponsors/tafc.gif"/>    <p>Tonbridge Angels FC - Event Hosts</p></div>';
                sponsorList[1]='<div class="sponsor"><img     src="images/sponsors/ajfweb.png"/><p>AJFWeb.com - Website Provider</p></div>'
                sponsorList[2]='<div class="sponsor"><img     src="images/sponsors/arg.png"/><p>ARG Group</p></div>'
                sponsorList[3]='<div class="sponsor"><img src="images/sponsors/olddairy.jpg"/><p>Old Dairy Brewery</p></div>'
                sponsorList[4]='<div class="sponsor"><img src="images/sponsors/ramsgate.png"/><p>Ramsgate Brewery</p></div>'
                sponsorList[5]='<div class="sponsor"><img src="images/sponsors/tonbridgeBrewery.png"/><p>Tonbridge Brewery</p></div>'
                sponsorList[6]='<div class="sponsor"><img src="images/sponsors/westerhamBrewery.png"/><p>Westerham Brewery</p></div>'
                sponsorList[7]='<div class="sponsor"><img src="images/sponsors/rockinRobin.jpg"/><p>Rockin&rsquo; Robin Brewery</p></div>'
                sponsorList[8]='<div class="sponsor"><img src="images/sponsors/portableFloodlights.jpg"/><p>Portable Floodlights</p></div>'

                var i=0
                var random
                while (i<sponsorList.length){
                    random=Math.floor(Math.random()*sponsorList.length)
                    if (sponsorList[random]!="selected"){
                        document.write(sponsorList[random])
                        sponsorList[random]="selected"
                        i++
                    }
                }
            </script>

</blockquote>

I hope this comes out alright!

Thanks again fro your help Omar

Omar Ramírez
Omar Ramírez
183 Points
Omar Ramírez
Omar Ramírez
183 Points

Wow Aaron, it's a good start!

Good luck!