www.webdeveloper.com
Results 1 to 8 of 8

Thread: Random auto-refresh background!

  1. #1
    Join Date
    Nov 2005
    Posts
    21

    Random auto-refresh background!

    Hi

    I'm not sure if this is possible - I'm pretty sure it can't be done.

    I have a script (below) that generates a random background from 6 different images (background1.jpg, background2.jpg, etc etc).

    Works really well.

    Now, I want to try and make the background image refresh automatically (say, every 10 seconds) BUT without refreshing the page itself. So only the background image changes and nothing else does!

    Does anyone think this is possible?

    Would love to be pointed in the right direction!
    Many thanks in advance
    Rob



    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    today=new Date();
    jran=today.getTime();
    var number = 6;
    var random_number="";
    var image="";
    var text_color="";
    ia=9301;
    ic=49297;
    im=233280;
    jran = (jran*ia+ic) % im;
    random_number = Math.ceil( (jran/(im*1.0)) *number);
    // Loads the appropriate image and text color based on random number.
    if (random_number==1) {
    image="images/background1.jpg";
    }
    if (random_number==2) {
    image="images/background2.jpg";
    }
    if (random_number==3) {
    image="images/background3.jpg";
    }
    if (random_number==4) {
    image="images/background4.jpg";
    }
    if (random_number==5) {
    image="images/background5.jpg";
    }
    if (random_number==6) {
    image="images/background6.jpg";
    }
    // End -->
    </SCRIPT>

    </head>

    <body>
    <div id=EchoTopic>

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin
    document.open();
    document.write("<BODY BACKGROUND='"+image+"'>");
    document.write("<CENTER></CENTER>");
    // End -->
    </SCRIPT>

    </body>

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>demo</title>
    <style type='text/css'>
    body{
      text-align: center;
    }
    </style>
    <script type="text/javascript">
    /* <![CDATA[ */
    
    var timer = 10;// timer in secs, fractions allowed, but not recomended
    var imgs = new Array();
    
    imgs[imgs.length] = "images/background1.jpg";
    imgs[imgs.length] = "images/background2.jpg";
    imgs[imgs.length] = "images/background3.jpg";
    imgs[imgs.length] = "images/background4.jpg";
    imgs[imgs.length] = "images/background5.jpg";
    imgs[imgs.length] = "images/background6.jpg";
    
    function showBG(){
      if (document.body){
        document.body.background = imgs[Math.floor(Math.random()*imgs.length)];
      }
      window.setTimeout(showBG, timer*1000);
    };
    
    window.onload = showBG;
    
    /* ]]> */
    </script>
    </head>
    
    <body>
    <p>some content or other :P</p>
    </body></html>
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  3. #3
    Join Date
    Nov 2005
    Posts
    21
    Wow thanks Scragar! That quick on a Sunday deserves a medal in my opinion!!

    It works great except for one thing!

    I have a body tag on my page,
    <body onload="MM_preloadImages('images/button2.gif','images/button4.jpg','images/button6.gif')">

    which pre-loads a few button rollovers.
    When I leave this in, the script above doesn't work however when I just change it to <body>, the script works fine.

    Question, is the pre-loading images essential? Really necessary?
    Or is there a way round this?
    I assume it is the body onload command getting mixed up with the window.onload = showBG: command.

    Thanks again Scragar!
    Rob

  4. #4
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    change your body to
    Code:
    <body>
    like you had it, and then change the
    Code:
    window.onload = showBG;
    to read:
    Code:
    window.onload = function(){
      showBG();
      MM_preloadImages('images/button2.gif','images/button4.jpg','images/button6.gif');
    }
    and it isn't preloading the images, it's just a more efficient method of selecting which URL to load than your old if random_number equals 6 show this image style of code.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  5. #5
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    Doh!

    I just posted a similar solution on a double post of this.
    http://www.webdeveloper.com/forum/sh...d.php?t=189699

  6. #6
    Join Date
    Nov 2005
    Posts
    21
    Awesome Scragar! Works a dream - thank you very much.
    Rob

  7. #7
    Join Date
    Nov 2005
    Posts
    21
    Hi cgishack!

    yeah, sorry about the double post - bit of a long day!!

    thank you for posting too, i checked out the code, interesting the 2 different ways!

    cheers
    rob

  8. #8
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    @digitalbob
    would you mind using the thread tools at the top of the page to mark this thread as resolved then? It helps when another person with a similar problem searches later.

    @ cgishack
    Your solution is really good, I wrote this quick edit based on what your code does differently, kinda mixing the best of both:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>demo</title>
    <style type='text/css'>
    body{
      text-align: center;
    }
    </style>
    <script type="text/javascript">
    /* <![CDATA[ */
    
    var timer = 10;// timer in secs, fractions allowed, but not recomended
    var imgs = new Array();
    
    imgs.push( "images/background1.jpg" );// push is better, but only because
    imgs.push( "images/background2.jpg" );// most browsers don't keep trying
    imgs.push( "images/background3.jpg" );// to find the imgs array's length
    imgs.push( "images/background4.jpg" );// over and over again, silly IE
    imgs.push( "images/background5.jpg" );
    imgs.push( "images/background6.jpg" );
    
    function showBG(l){
      if (document.body){
        document.body.background = imgs[Math.floor(Math.random()*l)];
      }
    };
    
    window.onload = function(){
    /*               this code looks worse,
                      but it's actualy much more efficient,
                      since it doesn't call the imgs.length
                      over and over again and all without making
                      another global variable for the purpose :p
    */
      window.setInterval(
        (function(j){
          return function(){showBG(j)};
        })(imgs.length), timer*1000);
    
    //  MM_preloadImages('images/button2.gif','images/button4.jpg','images/button6.gif');
    };
    /* ]]> */
    </script>
    </head>
    
    <body>
    <p>some content or other :P</p>
    </body></html>
    what do you think?
    PS: you forgot to use CDATA over your javascript, XHTML can be a bit argumentative over that.
    Last edited by scragar; 08-24-2008 at 06:29 PM.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

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