Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • refreshing ads images (or other stuff) after certain interval

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 281
    Comment on it

    Let me create an HTML sample for explanation

    <input id="totalAds" value="4" type="hidden">
    <input id="currentAd" value="2" type="hidden">
    <a class="ads ad-1" href="http://www.tourofindia.com" style="display: none;" target="&#95;blank">
        <img src="visit&#95;india.png" alt="India Tourism" title="India Tourism">
    </a>
    <a class="ads ad-2" href="http://tourofcuba.com" style="display: inline;" target="&#95;blank">
        <img src="visit&#95;cuba.jpg" alt="Cuba Tourism" title="Cuba Tourism">
    </a>
    <a class="ads ad-3" href="http://tourofcnorway.com" style="display: none;" target="&#95;blank">
        <img src="visit&#95;norway.png" alt="Norway Tourism" title="Norway Tourism">
    </a>
    <a class="ads ad-4" href="http://tourofsweeden.com" style="display: none;" target="&#95;blank">
        <img src="visit&#95;sweeden.png" alt="Sweden Tourism" title="Sweden Tourism">
    </a>
    

    here, I have created 4 demo ads. I have also created 2 hidden variables that will help me determine the number of ads and current ad that is displayed.

    Note: We can achieve this without creating hidden variables but I am supposing that you are creating these ads dynamically from some server side language. In that case the number of ads can go up and down

    Let write following jQuery function in $(document).ready, so that ads wont start refreshing before page loads

    <script type="text/javascript">    
    $(document).ready(function() {
        var autorefresh = setInterval(
            function ()
            {
                /* Ads changer */
                if($('#currentAd').val() == $('#totalAds').val()) {
                    var curad = 1;
                    $('#currentAd').attr('value',1);
                }else {
                    var curad = eval($('#currentAd').val()) + eval(1);
                    $('#currentAd').attr('value',curad);
                }
    
                $('a.ads').hide();
                $('a.ad-'+cg).fadeIn('slow');
            }, 
            10000
        );  
    });
    </script>
    

    The jQuery function is quite straight forward.

    Here, first we check if current ad is last one, if yes, we need to start the loop from first element, if no, then it next ad will appear. change the values of hidden variables accordingly. I used interval of 10 sec to change the ad, one can change this value according to the need.

    I hope this will help.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: