Random auto-refresh background!

**digitalbob** · 08-24-2008 01:08 PM

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">

</SCRIPT>

</head>

<body>
<div id=EchoTopic>

<SCRIPT LANGUAGE="JavaScript">


</SCRIPT>

</body>

**scragar** · 08-24-2008 01:47 PM

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>

**digitalbob** · 08-24-2008 02:37 PM

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

**scragar** · 08-24-2008 02:42 PM

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.

**cgishack** · 08-24-2008 05:52 PM

Doh!

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

**digitalbob** · 08-24-2008 06:07 PM

Awesome Scragar! Works a dream - thank you very much.
Rob

**digitalbob** · 08-24-2008 06:08 PM

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

**scragar** · 08-24-2008 06:26 PM

@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.

Thread: Random auto-refresh background!

Thread Tools

Display

Random auto-refresh background!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions