Displaying a Random Div Per Page Load

So why would someone want to display a random div per page load? Well, for one of the websites I worked on, I wanted to have a different product advertisement everytime a person reloaded the page, went to a similar page, or even just came back to that page through a bookmark or something similar. I did not want to grab some type of plugin. and so we figured this one out through Javascript.

We are going to create a div that contains an image, a link and some text. With this code, you can switch between the images and text that goes with it and have a different link for each div as well! You want to display one ad block, lets create both.

So here are our two product ads:

Chocolate Butter

Our chocolate butter makes for a great addition to toast, graham crackers and marshmallows or even on pancakes! Shop now.

Blue Fudge Syrup

This syrup blends well in coffee or milk, pour some over your ice cream! Kids will love this vitamin B packed syrup! Buy now!

Not bad right? Haha.

Here's the code for these.

HTML Code:
  1. <div>
  2. <a href="#"><img height="137px" src="" width="256px" /> </a>
  3. <h3><a href="#">Chocolate Butter</a></h3>
  4. Our chocolate butter makes for a great addition to toast, graham crackers and marshmallows or even on pancakes! <a href="#">Shop now.</a>
  5. </div>
  6.  
  7. <div>
  8. <a href="#"><img height="137px" src="" width="256px" /></a>
  9. <h3><a href="#">Blue Fudge Syrup</a></h3>
  10. This syrup blends well in coffee or milk, pour some over your ice cream! Kids will love this vitamin B packed syrup! <a href="#">Buy now!</a>
  11. </div>
  12.  

Ok so now you want to switch between the two ads. Add the style 'display:none;' to both your divs. You also need to order and id (name) your divs, so check out the code for our divs and their IDs:

HTML Code:
  1. <div id="productAd1" style="display:none;">
  2. <a href="#"><img height="137px" src="" width="256px" /> </a>
  3. <h3><a href="#">Chocolate Butter</a></h3>
  4. Our chocolate butter makes for a great addition to toast, graham crackers and marshmallows or even on pancakes! <a href="#">Shop now.</a>
  5. </div>
  6.  
  7. <div id="productAd2" style="display:none;">
  8. <a href="#"><img height="137px" src="" width="256px" /> </a>
  9. <h3><a href="#">Blue Fudge Syrup</a></h3>
  10. This syrup blends well in coffee or milk, pour some over your ice cream! Kids will love this vitamin B packed syrup! <a href="#">Buy now!</a>
  11. </div>
  12.  

Notice how we have the same id but with a different number. This lets this Javascript code know they go together in the same area and keeps the div from being skipped. If you want another div, name it something like "productAd3", making sure the name matches and the number is the next one in line. Underneath the code for your divs, you are going to place some javascript.

Javascript Code:
  1. <script type="text/javascript"><!--
  2. // Change the number 2 to the amount of divs you have.
  3.  
  4. HowManyDivs = 2;
  5.  
  6. ////////////////////////////////////
  7. var CookieName = 'DivRamdomValueCookie';
  8. function RandomDiv() {
  9. var r = Math.ceil(Math.random() * HowManyDivs);
  10. if(HowManyDivs > 1) {
  11. var ck = 0;
  12. var cookiebegin = document.cookie.indexOf(CookieName + "=");
  13.  
  14. if(cookiebegin > -1) {
  15. cookiebegin += 1 + CookieName.length;
  16. cookieend = document.cookie.indexOf(";",cookiebegin);
  17. if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
  18. ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
  19. }
  20.  
  21. while(r == ck) { r = Math.ceil(Math.random() * HowManyDivs); }
  22. document.cookie = CookieName + "=" + r;
  23. }
  24.  
  25. for( var i=1; i<=HowManyDivs; i++) {
  26. document.getElementById("productAd"+i).style.display="none";
  27. }
  28.  
  29. document.getElementById("productAd"+r).style.display="block";
  30. }
  31.  
  32. RandomDiv();
  33. //--></script>
  34.  

This Javascript will first determine how many divs you have. Then, using the browser's cookies, will set a cookie for the visitor and then will display each separate div on each page load. If the visitor has their cookies turned off on their browser, they may only see one div. After this, the Javascript chooses a random "productAd" div and changes it style from display.none, to display:block.

Reload your page or upload it to a server and open it in your browser. Press the reload or refresh button and watch your div change.

Displaying Time Changing Divs on the Page

Don't want the visitor to wait until the page loads to change? If you want the div to switch at a timely pace while your visitor is on the page, add this code after the "RandomDiv()" function at the bottom of the script above. This way the end of your code will look like this:

Javascript Code:
  1. RandomDiv();
  2. setInterval("RandomDiv()",7000);
  3. //--></script>
  4.  

Change the number 7000 to change how fast the div switches.

Be sure to style your divs! It's only going to display one at a time so make sure it fits your area. Here's my CSS code for my div, for example.

CSS Code:
  1. #randomDiv{
  2. width:256px;
  3. border:1px solid;
  4. padding:5px;
  5. float:left;
  6. margin-right:40px;
  7. display:block;
  8. }
  9.  

Enjoy!

Comments  

0 #1 Sticker Decals 2014-10-12 19:55
Thank you! This is exactly what I have been looking for!
Quote

Add comment


Security code
Refresh

Search

Visit fbetting.co.uk Betfair Review