By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,108 Members | 1,657 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,108 IT Pros & Developers. It's quick & easy.

Rotate Random Div Layers on Page Refresh?

P: n/a
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
jo********@yahoo.com

Apr 14 '07 #1
Share this Question
Share on Google+
10 Replies


P: n/a
"Joey_Stacks" <jo********@yahoo.comwrote in message
news:11**********************@y80g2000hsf.googlegr oups.com...
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
Apr 15 '07 #2

P: n/a
On Apr 14, 10:26 pm, "-Lost" <missed-s...@comcast.netwrote:
"Joey_Stacks" <joey_60...@yahoo.comwrote in message

news:11**********************@y80g2000hsf.googlegr oups.com...
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
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?

Apr 17 '07 #3

P: n/a
<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[i]).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>
Apr 17 '07 #4

P: n/a
In comp.lang.javascript message <11*********************@w1g2000hsg.goog
legroups.com>, Mon, 16 Apr 2007 20:17:53, Joey_Stacks
<jo********@yahoo.composted:
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.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Apr 17 '07 #5

P: n/a
On Apr 17, 4:06 am, Pete <peter.gal...@gmail.comwrote:
<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[i]).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></headtags 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[i]).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>
</html>
-------------------------------------------------------------------------------------------------------
>
Apr 18 '07 #6

P: n/a

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();
</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></headtags yes? Any chance the display='block'
has anything to do with this? Here's what I did:
Apr 18 '07 #7

P: n/a
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!!

On Apr 18, 2:19 am, Pete <peter.gal...@gmail.comwrote:
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();
</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></headtags yes? Any chance the display='block'
has anything to do with this? Here's what I did:

Apr 19 '07 #8

P: n/a
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);


On Apr 18, 11:57 pm, Joey_Stacks <joey_60...@yahoo.comwrote:
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!!

On Apr 18, 2:19 am, Pete <peter.gal...@gmail.comwrote:
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();
</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></headtags yes? Any chance the display='block'
has anything to do with this? Here's what I did:

Apr 19 '07 #9

P: n/a
If that's the case we could simplify the code.....but hey it works
already.

On Apr 19, 1:01 pm, Joey_Stacks <joey_60...@yahoo.comwrote:
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);

On Apr 18, 11:57 pm, Joey_Stacks <joey_60...@yahoo.comwrote:
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!!
On Apr 18, 2:19 am, Pete <peter.gal...@gmail.comwrote:
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();
</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></headtags yes? Any chance the display='block'
has anything to do with this? Here's what I did:- Hide quoted text -

- Show quoted text -

Apr 20 '07 #10

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

On Apr 19, 7:38 pm, Pete <peter.gal...@gmail.comwrote:
If that's the case we could simplify the code.....but hey it works
already.

On Apr 19, 1:01 pm, Joey_Stacks <joey_60...@yahoo.comwrote:
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);
On Apr 18, 11:57 pm, Joey_Stacks <joey_60...@yahoo.comwrote:
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!!
On Apr 18, 2:19 am, Pete <peter.gal...@gmail.comwrote:
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();
</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></headtags yes? Any chance the display='block'
has anything to do with this? Here's what I did:- Hide quoted text -
- Show quoted text -

Apr 20 '07 #11

This discussion thread is closed

Replies have been disabled for this discussion.