Let your users toggle your Adverts with an advert switch!

Posted By: Ian on Jan 05, 2013 in JQuery
Last modified on January 29th, 2015 at 9:31 pm,

Using HTML5 localStorage and a little JQuery we can make an advert switch giving our visitors the option to turn our adverts on and off.

Simply save the JQuery script below in your scripts folder and then add a link to it in the head of your page.

<script type="text/javascript">
    /**
     * Declare global variable advertState
     */
    var advertState;
    /**
     * Check if localStorage is supported and alert user if it's not
     */
    if (typeof (localStorage) == 'undefined') {
        alert('Your browser does not support HTML5 localStorage. Try upgrading.');
    }
    /**
     * Check a value has been set for the key advertSwitch
     * Change advertState value to 1 or true if it has
     */
    if (localStorage.getItem("advertSwitch") != null) {
        advertState = 1;
    }
    /**
     * Wait until DOM has loaded then check global variable advertState is true or been set
     * if so hide the ads and show the user Ads On text (As there off we don't need
     * to tell them they can see).
     */
    $(document).ready(function () {
        if (advertState == 1) {
            $(".ads").hide();
            document.getElementById("toggleAds").innerHTML = 'Ads On';
        }
        /**
         * Bind click handler to #toggleAds and check global variable advertState is true or been set
         * if so remove the item advertSwitch (Key and Value).  Slowly show the ads and show user Ads Off text
         * set advertState back to false or 0
         * exit click function
         */
        $('#toggleAds').click(function () {
            if (advertState == 1) {
                localStorage.removeItem('advertSwitch');
                $(".ads").show("slow");
                document.getElementById("toggleAds").innerHTML = 'Ads Off';
                advertState = 0;
                return;
            }
            /**
             * set key advertSwitch and value 1 into local storage
             * slowly hide the ads and show user Ads On text
             * set advertState to true or 1
             */
            localStorage.setItem("advertSwitch", 1);
            $(".ads").hide("slow");
            document.getElementById("toggleAds").innerHTML = 'Ads On';
            advertState = 1;
        });
    });
</script>

Add the div below into your page either directly or using JQuery append

<div id="toggleAds">Ads Off</div>

And add the class called ads to all of your adverts or put a div around them

<a href='http://mental-man.com/bannerbar/admin/counter.php?id=5' class="ads" id="topB">
<img src='http://envato.s3.amazonaws.com/referrer_adverts/3d_125x125_v4.gif' alt='Click me!' /></a>

Now your done!

Demo

 

AnonymousIan.J.Gough

Did this help you? Please Let me know by commenting below even if it’s just to say “Thanks”

leave a comment

About This Site

Dreams are built from lines of code well it's true!
If you can dream it you can usually code it.

I have learned so much from other people on the Internet and this site is for me to give back some of what i have learned and hope people can now learn from me.
Have fun and surf safely,
Ian.J.Gough

protected by copyscape duplicate content check

Categories


Powered by Banner Bar 125