Changing Iframe content depending on hour

@Chester_BApr 06.2004

Hi, I’m very new to Java Script and the problem that I have shouldn’t be that hard at all. I have a webpage with Iframes, and i want to change the content of the Iframes, depending on the hour. I can get the hour and minutes from the system date in Java Script, but I don’t know how to change the contents of the IFrames. Lets say for Example:

When you go to the webpage and it’s between 8 AM and 8 PM, the content of the Iframe “MAIN” should be ‘IndexDay.htm’, and when its between 8 PM and 8 AM the content of Iframe “Main” should be ‘IndexNight.htm’

I just need a simple Java Script to determine the content of the Iframe “MAIN”

Thanks in Advance, Chester

to post a comment

JavaScript

10 Comments(s) _↴

@jaegernautApr 06.2004 — #This script loads the IndexDay.htm unless it is after 8pm and before 8 am.

<script type="text/javascript">



</script>

</head>

<body>

<iframe id="MAIN" src="IndexDay.htm"></iframe>

I think that will work for you.

@cootheadApr 06.2004 — #Hi there Chester_B,

Welcome to these forums ?

See if this suits your requirements...

[size=3]
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Page Changer&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 function pageChange(){
 var google="http://www.google.com/";
 var lycos="http://www.lycos.com/";
 
 <i>    </i>var today=new Date();
 <i>    </i>var hour=today.getHours();
 
 if((hour&gt;7) &amp;&amp; (hour&lt;=19)){
 document.getElementById("main").src=google;
 }
 else if((hour&gt;19) ||(hour&lt;=7)){
 document.getElementById("main").src=lycos;
 }
 }
 //]]&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="pageChange()"&gt; 
 &lt;div&gt;
 &lt;iframe id="main"&gt;&lt;/iframe&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 [/size]

[i][size=4]c??thead[/size][/i]

@Chester_BauthorApr 06.2004 — #Thank you both for the solution of my problem!! It works perfectly ?

@Chester_BauthorApr 07.2004 — #One more question about this please :rolleyes:

What if i simply want to go to google of lycos ( like in the example above ) in the MAIN WINDOW, instaid of the Iframe ? So basicly a GoToURL, but i can't quite get it to work ...

thank you for taking the time ?

@Paul_JrApr 07.2004 — #Change [FONT=courier new]document.getElementById("main").src=lycos;[/FONT] (both occurences), to [FONT=courier new]window.location = "[i]foo.html[/i]"[/FONT]

With [i]foo.html[/i] being the page you want to be redirected to.

@Chester_BauthorApr 07.2004 — #Thank you very much!

Now i only need to know how to change the background image of the MAIN WINDOW, depending on the hour. Same code, but that one rule is different. Lets say that the 2 image i want to use are 'image1.jpg' and 'image2.jpg'

Can somebody tell me what code this is please ?

Thanks!!

@JayDieApr 07.2004 — #[i]Originally posted by coothead [/i]

[B]//<![CDATA[

...//]]> [/B][/QUOTE]

What does this mean, where is it needed for??

JayDie

@WebskaterApr 07.2004 — #if((hour>7) && (hour<=19)){

document.getElementById("main").src=google;

}

else if((hour>19) ||(hour<=7)){

document.getElementById("main").src=lycos;

In one of the answers given, the code above was used. Why do you use document.getElementById("main")?

Wouldn't

document.frames('main') do the job?

What is the point of getElementById? I see it used everywhere but don't understand what it is used for.

@fredmvApr 07.2004 — #[i]Originally posted by JayDie [/i]

[B]What does this mean, where is it needed for?? [/B][/QUOTE] http://forums.webdeveloper.com/showthread.php?s=&threadid=28037[i]Originally posted by Webskater [/i]

[B]document.frames('main') do the job?[/B][/QUOTE]No (because there is no [font=courier]frames[/font] method on [font=courier]document[/font]), however, you could do something along these lines if you've got a [font=courier]name[/font] attribute present on the frame in question:frames['foo'];[i]Originally posted by Webskater [/i]

[B]What is the point of getElementById?[/B][/QUOTE]It is the standardized way to access a node in the DOM. As the name of the method implies, it expects you to pass one argument to it: the string of the [font=courier]id[/font] of the element you'd like to get a hold of. Once executed, it gets you a reference back to the [font=courier]HTMLElement[/font] object in question.

Consider the following example:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 
 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;untitled&lt;/title&gt;
 &lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /&gt;
 &lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 [color=green]// When the document is done loading, do this stuff.[/color]
 onload = function()
 {
 [color=green]// Get a reference to the "foo" element.[/color]
 var o = document.getElementById('foo');
 
 <i>	</i>			[color=green]// Now that we have a reference to it, we can manipulate it however we'd like.
 <i>	</i>			// Let's access its style property and change its color to red.[/color]
 <i>	</i>			o.style.color = 'red';
 <i>	</i>		}
 <i>	</i>	//]]&gt;
 <i>	</i>	&lt;/script&gt;
 <i>	</i>&lt;/head&gt;
 <i>	</i>&lt;body&gt;
 <i>	</i>	&lt;div id="foo"&gt;
 <i>	</i>		If your browser implements the W3C DOM Level 1 correctly, this text should be red!
 <i>	</i>	&lt;/div&gt;
 <i>	</i>&lt;/body&gt;
 &lt;/html&gt;

Also in #JavaScript _↴

Passing html code via javascript into input value JavaScript OO critique please!help with cookies and adding to a link

Success!

Help @Chester_B spread the word by sharing this article on Twitter...

Tweet This

Changing Iframe content depending on hour

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Changing Iframe content depending on hour

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴