Rotate Random Div Layers on Page Refresh?

[Joey_Stacks]

Does anyone know of a scipt that will rotate random div layers on page
refresh? I have a primary content area front and center on my site
homepage, and I'd like to rotate various chunks of html (in div
layers) each time a user reloads the page. Right now I'm resorting to
a random image rotation (those scripts are a dime a dozen) on refresh,
but it's far from ideal for what I'm trying to accomplish. Any help
on this would be GREATLY appreciated!

Joey Stacks
(e-mail address removed)

 

[-Lost]

Does anyone know of a scipt that will rotate random div layers on page
refresh? I have a primary content area front and center on my site
homepage, and I'd like to rotate various chunks of html (in div
layers) each time a user reloads the page. Right now I'm resorting to
a random image rotation (those scripts are a dime a dozen) on refresh,
but it's far from ideal for what I'm trying to accomplish. Any help
on this would be GREATLY appreciated!

Just so I can be sure of what you are asking...

You mean rotate as in switch between say 4 current DIVs for 4 *other* DIVs or did you mean
to rotate around something?

I just got confused from "random image rotations" and "rotate random div layers."

The first sounds like randomly, you turn some of the IMGs clockwise or counter- clockwise
by 90 degrees or something.

The second sounds to me as if you want to replace 4 DIVs for 4 DIVs (per my previous
example), the likes of which are undetermined ("random div layers").

-Lost

 

[Joey_Stacks]

Just so I can be sure of what you are asking...

You mean rotate as in switch between say 4 current DIVs for 4 *other* DIVs or did you mean
to rotate around something?

I just got confused from "random image rotations" and "rotate random div layers."

The first sounds like randomly, you turn some of the IMGs clockwise or counter- clockwise
by 90 degrees or something.

The second sounds to me as if you want to replace 4 DIVs for 4 DIVs (per my previous
example), the likes of which are undetermined ("random div layers").

-Lost

I'd be happy to clarify. You know how people rotate banner ads on
refresh? Like, at the top of a web site. Each time you refresh the
page, a different banner ad shows up in the same spot. Sometimes
you'll see the same banner on consecutive refreshes as the javascript
is completely random math (I guess.) That's what I want to do, only
with div layers. So here's what I've got going on. I'm designing a
site, and front and center on the homepage in a 900x300 table, I want
to rotate (on refresh) 3 seperate marketing messages with graphics and
html text. The text has to be on top of the graphic though, thus the
need to for div layers. Got it?

 

[Pete]

<div id="d1" style="display:none;">some text 1</div>
<div id="d2" style="display:none;">some text 2</div>
<div id="d3" style="display:none;">some text 3</div>

<script type="text/javascript">
divs = ['d1','d2','d3'];

function hideDivs() {
for (var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';
}

function showDiv() {
hideDivs(); //hide them all before we show the next one.
var randomDiv = divs[Math.floor(Math.random()*divs.length)];
var div = document.getElementById(randomDiv).style.display =
'block';

setTimeout(showDiv,500); //set a delay before showing the next div
}

showDiv();
</script>

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
legroups.com>, Mon, 16 Apr 2007 20:17:53, Joey_Stacks

Sometimes
you'll see the same banner on consecutive refreshes as the javascript
is completely random math (I guess.)

Obviously there are two parts to the question -
How to choose the next banner,
How to emplace the chosen banner.

For the first part, consider "Indefinite Random Slide Show" at
<URL:http://www.merlyn.demon.co.uk/js-randm.htm#IRSS> - but you'll need
to be able to preserve sufficient information between refreshes.

It's a good idea to read the newsgroup c.l.j and its FAQ. See below.

 

[Joey_Stacks]

<div id="d1" style="display:none;">some text 1</div>
<div id="d2" style="display:none;">some text 2</div>
<div id="d3" style="display:none;">some text 3</div>

<script type="text/javascript">
divs = ['d1','d2','d3'];

function hideDivs() {
for (var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';

}

function showDiv() {
hideDivs(); //hide them all before we show the next one.
var randomDiv = divs[Math.floor(Math.random()*divs.length)];
var div = document.getElementById(randomDiv).style.display =
'block';

setTimeout(showDiv,500); //set a delay before showing the next div

}

showDiv();
</script>

Pete, thanks for the reply! I tried your code and can't seem to get
it to work. The text isn't showing up. I assume the script goes in
between the <head></head> tags yes? Any chance the display='block'
has anything to do with this? Here's what I did:

--------------------------------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
divs = ['d1','d2','d3'];

function hideDivs() {
for (var i=0; i<divs.length; i++)
document.getElementById(divs).style.display = 'none';

}

function showDiv() {
hideDivs(); //hide them all before we show the next one.
var randomDiv = divs[Math.floor(Math.random()*divs.length)];
var div = document.getElementById(randomDiv).style.display =
'block';

setTimeout(showDiv,500); //set a delay before showing the next div

}

showDiv();
</script>
</head>

<body>

<div id="d1" style="display:none;">some text 1</div>
<div id="d2" style="display:none;">some text 2</div>
<div id="d3" style="display:none;">some text 3</div>
</body>

 

[Pete]

I intended the script to be embedded after the divs.

If you want the js to be at the top of the page then set your body tag
to:

<body onload="showDiv();">

and remove or comment out the existing call to showDiv();

//showDiv();

 

[Joey_Stacks]

PEte,

It works! You are THE MAN! One more question. How would I turn off
the auto-rotation that is built in after each page refresh? So, I
refresh the page and I see one of the 3 divs, and it stays there until
I refresh the page again, follow me? No auto-rotation going on
without a page refresh. Thanks!!

 

[Joey_Stacks]

Pete,

Nevermind (maybe) about turning off the auto-rotate, I might have
figured it out on my own. You're probably laughing at me. How hard
could it be to figure it out right? ha! So, I just commented out the
setTimeout function, here:

//setTimeout(showDiv,500);

 

[Pete]

If that's the case we could simplify the code.....but hey it works
already.

 

[Joey_Stacks]

Thanks again Pete, I'll have to email you when the demo site is live
so you can see your code in action...