How To Randomly Display Ads Using jQuery

How To Randomly Display Ads Using jQuery

Let’s say that you have a bunch of ads on your web site and you want to make sure that it doesn’t show one ad more often than the others. Well, here’s a nice jQuery code that will let you display them in random order.

shuffleAds: function(arr) {   for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);   return arr; }

Although I haven’t tried it yet myself, this code might also be used to show random articles to instead of the usual related posts to your blog readers. Why would you want to randomly show posts? For one thing, it is to let your readers know that your site isn’t limited to just one theme or particular niche.

Anyway, here’s an alternative code you could use for randomizing your posts.

function randsort(c) {     var o = new Array();     for (var i = 0; i < c; i++) {         var n = Math.floor(Math.random()*c);         if( jQuery.inArray(n, o) > 0 ) --i;         else o.push(n);     }     return o; }

Or perhaps you’d rather use this jQuery Shuffle plugin instead (from jsfromhell.com):

/*  * jQuery shuffle  *  * Copyright (c) 2008 Ca-Phun Ung <caphun at yelotofu dot com>  * Dual licensed under the MIT (MIT-LICENSE.txt)  * and GPL (GPL-LICENSE.txt) licenses.  *  * http://yelotofu.com/labs/jquery/snippets/shuffle/  *  * Shuffles an array or the children of a element container.  * This uses the Fisher-Yates shuffle algorithm <http://jsfromhell.com/array/shuffle [v1.0]>  */ (function($){     $.fn.shuffle = function() {         return this.each(function(){             var items = $(this).children().clone(true);             return (items.length) ? $(this).html($.shuffle(items)) : this;         });     }     $.shuffle = function(arr) {         for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);         return arr;     } })(jQuery);

Now here’s a great example of applying the code for randomizing ads:

//Function to display ads on the jQuery Blog and shuffle (function($) {    var displayAds = {        ads: {            1: {                 title: "jQuery UI Widgets for PC, Mobile and Touch devices",                 href: "http://www.jqwidgets.com",                 img: "jqwidgets.png"            },            2: {                 title: "jQuery Chop Slider 2.0 - The most eye catching image slider on the internet!",                 href: "http://www.idangero.us/cs/",                 img: "idangerous.jpg"            },            3: {                 title: "Sauce Labs - Online Cross Browser Testing",                 href: "http://www.saucelabs.com/scouthome?utm_source=banner&amp;utm_medium=flat&amp;utm_campaign=all+all+banner+jquery4u",                 img: "sauce-labs.jpg"            },            4: {                 title: "Diamond Slider - Ken Burns Effect &amp; Unlimited Transitions",                 href: "http://www.diamond.billykids-lab.net/",                 img: "diamond-slider.jpg"            },            5: {                 title: "AJAX Zoom - jQuery Dynamic 2d/360 Degrees Zoom with ipad support.",                 href: "http://www.ajax-zoom.com",                 img: "ajax-zoom.jpg"            }        },        signupAd: {            title: "Advertise here",            href: "http://www.jquery4u.com/advertise/"        },        shuffleAds: function(arr)        {           for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);           return arr;        },        load: function()        {            $('#shuffle-ads').hide();            var adContainer = $('#jq4u-sidebar-ads').empty(), adsArray = Array();            /* construct ads */            $.each(this.ads, function(i,v)            {                 adsArray.push('<a rel="nofollow" target="_blank" href="' + v.href + '"><div class="jq4uadbox"><img title="' + v.title + '" alt="' + v.title + '" src="http://www.jquery4u.com/images/ads/' + v.img + '"></div></a>');            });            /* shuffle ads in random order */            adsArray = this.shuffleAds(adsArray);            /* output ads */            $.each(adsArray, function(i,v)            {               adContainer.append(v);            });            /* add the signup ad */            adContainer.append('<a href="' + this.signupAd.href + '"><div class="jq4uadvertisebox">' + this.signupAd.title + '</div></a>');            /* show shuffle button */            adContainer.append('<a href="#" id="shuffle-ads">Shuffle</a>');            $('#shuffle-ads').live('click', function(e)            {               e.preventDefault();               displayAds.load();            });            $('#shuffle-ads').show();        }    }    $(document).ready(function() {       displayAds.load();    }); })(jQuery);

Hope a lot of you will benefit from this tutorial and learn web design. Have a good day, everyone!

KEITH FRIAS sees himself as an artist whose talent is in a state of coma, and a tech gadget freak who also loves to dabble in photography.