www.webdeveloper.com
Results 1 to 9 of 9

Thread: Need to add autorotation in this Javascript

  1. #1
    Join Date
    Jul 2013
    Posts
    5

    Need to add autorotation in this Javascript

    Hello, this is my first post, hopefully someone will help me.

    I have this short Javascript, which is great because it can rotate anything, plain picture banner (JPG, GIF, PNG) or SWF, (externally or internally hosted) text, link... On page load. Every time a page loads, different banner is shown. Here's the script:

    PHP Code:
    <script language="Javascript">
    <!--
    var 
    currentdate 0
    var core 0

    function StringArray (n) {
      
    this.length n;
      for (var 
    =1<= ni++) {
        
    this[i] = ' '

      
    }
    }

    image = new StringArray(4)
    image[0] = '<OBJECT classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=5,0,0,0 id=Banner><PARAM NAME=movie VALUE=flashAD.swf><PARAM NAME=quality VALUE=high><PARAM NAME=menu VALUE=false><EMBED src=flashAD.swf quality=high  TYPE=application/x-shockwave-flash PLUGINSPAGE=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash></EMBED></OBJECT>'
    image[1] = 'Text only ad'
    image[2] = '<a href="ad.htm">Text AD</a>'
    image[3] = '<img src="ad.jpg">'

    var ran 60/image.length

    function radAD() {
      
    currentdate = new Date()
      
    core currentdate.getSeconds()
      
    core Math.floor(core/ran)
        return(
    image[core])
    }

    document.write(radAD())

    //-->
    </script> 
    However, I'd like to have it auto rotating every 10-15 second or so.
    Two most common methods are out.
    1. Autorefresh of a script because it causes refresh of the whole page,
    2. Putting the code in iFrame and refreshing iFrame only. Both me and Google don't like iFrames. :-)

    Could anyone come with some quick solution? Thanks a million!

  2. #2
    Join Date
    Jul 2013
    Posts
    66
    Get rid of the out-dated document.write[1] and use modern DOM methods instead, then use window.setInterval to run it in given intervals.

    It should be noted that this script seems to be about as old as Javascript itself. The "language" attribute is non-sense, the HTML comment has been unnecessary for about forever and the code style would make any experienced developer scream.

    [1] Why? Because if document.write is called after the page has loaded, it will overwrite the entire page – including the script that wrote it.

  3. #3
    Join Date
    Jul 2013
    Posts
    66
    Here is a more up-to-date version:

    Code:
    <script type="text/language">
    (function (refresh_rate) {
        var objects = [];
        var index = 0;
    
        objects[0] = '<div class="object" id="number1">Banner #1</div>';
        objects[1] = '<div class="object" id="number2">Ad #2!</div>';
        objects[2] = '<div class="object" id="number3">I like turtles!</div>';
    
        function render() {
            document.getElementById('output').innerHTML = objects[index];
            index = (index + 1) % objects.length;
        }
    
        render();
        setInterval(render, refresh_rate * 1000);
    })( /* refresh rate in seconds */ 2);
    </script>
    You should place this script right before the </body> tag in your HTML. Then, at the spot where you want the object to be displayed (which should be where you currently have that old script), simply put this:

    Code:
    <div id="output"></div>
    Note that this script will cycle through the objects. If you need randomness – for whatever reason –, a tiny adjustment needs to be done. An example can be seen here: http://jsfiddle.net/HhyLN/

  4. #4
    Join Date
    Jul 2013
    Posts
    5
    Well, I've picked up the original script from some old forum thread from another forum, that's why it looks like that. Anyway, I've tried to implement it but it doesn't show anything. One question though. Where should I put actual banner code, instead of Banner #1 between <div class="object" id="number1">Banner #1</div> or somewhere else?
    Do I need some prerequisites on my site, some library or anything or it should work as is?

  5. #5
    Join Date
    Jul 2013
    Posts
    66
    You put the code for whatever you want in the object[0] = "", object[1] = "" and so on. You can, of course, use more than three items. Just add them with increasing number as you like. If you put it on your site the way I told you (and not any different), it will work as is.

  6. #6
    Join Date
    Jul 2013
    Posts
    5
    Ok so I've created the page at http://start.italkmoney.com/ with the script inside. I believe you can see it by looking at the page source. It doesn't work.

    What am I doing wrong here?

  7. #7
    Join Date
    Jul 2013
    Posts
    66
    There are two mistakes – one by you, one by me. Mine is a wrong attribute. Replace

    Code:
    <script type="text/language">
    with

    Code:
    <script type="text/javascript">
    The other one is that you didn't follow my instructions on how to include it on your page. Please read this again and think about what you forgot.

    You should place this script right before the </body> tag in your HTML. Then, at the spot where you want the object to be displayed (which should be where you currently have that old script), simply put this:

    Code:
    <div id="output"></div>
    Note that this script will cycle through the objects. If you need randomness – for whatever reason –, a tiny adjustment needs to be done. An example can be seen here: http://jsfiddle.net/HhyLN/

  8. #8
    Join Date
    Jul 2013
    Posts
    5
    Thanks for the fast response. Yes I've noticed that part about text/language as well, but don't really know how I've managed to miss first part of <div... I've just put up the page using Seamonkey's Composer so either it ate it or I didn't do copy/paste properly. Regardless, it works now, as you can see, though I've slowed it down a bit.

    Thanks a lot.

  9. #9
    Join Date
    Jul 2013
    Posts
    5
    So, I'd like to amend this one a bit. If you have bigger number of ads rotating, it is not good if the rotation always start from the first item "objects[0]" because there's a chance that an user will move away from the page before seeing all of ads and if it is a forum where users open several pages it is better to introduce random start point. I did it this way, with only one change of the line No. 4:

    Code:
    var index = Math.floor((Math.random() * Z));
    where Z = total number of ads in rotation.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles