Java Script for cycling through pages?

I was playing with this idea a bit more and made some refinements:

1.) changed the css so the iframe(s) would take up the whole window
2.) moved the css for making the second iframe initially unseen from the script to the style section
3.) changed from document ready to to jQuery(window).load because I noticed that if one navigated to the page via the back button it got weird, using load instead of ready minimized this problem
4.) added the ability to detect and properly process addresses that include hashes
5.) compacted/cleaned up the code a bit

Code:

<!DOCTYPE html> <html> <head> <title>Rotate iFrame Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> html body {height: 100%; overflow: hidden;} iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-width: 0;} #if_two {visibility: hidden;} </style> </head> <body> <div> <iframe id="if_one" src=""></iframe> <iframe id="if_two" src=""></iframe> </div> <script> jQuery(window).load(function(){ var pages = [ {page: 'http://www.dynamicdrive.com/forums/', dur: 10000}, {page: 'http://www.dynamicdrive.com/forums/forumdisplay.php?2', dur: 5000}, {page: 'http://www.dynamicdrive.com/forums/forumdisplay.php?3', dur: 3000} //<-- no comma after last page object ], p = pl = pages.length, ciframe = -1, $ = jQuery; while(--p > -1){ pages[p].hash = pages[p].page.split('#')[1] || ''; pages[p].hash = pages[p].hash? '#' + pages[p].hash : ''; pages[p].page = $('<a />', {href: pages[p].page.replace(pages[p].hash, '')}).get(0); } $('iframe').load(function(){ $('iframe').not(this).css({visibility: 'hidden'}); $(this).css({visibility: 'visible'}); setTimeout(loadIframe, pages[p].dur); }); function loadIframe() { var page = pages[(p = ++p % pl)].page; page = [page.href, page.search? '&' : '?', 'bustcache=', new Date().getTime(), pages[p].hash].join(''); $('iframe').eq((ciframe = ++ciframe % 2)).attr('src', page); } loadIframe(); }); </script> </body> </html>

Year i have changed some things here and there including the iframe to be 100% to suit the 4k screen. But thanks for the other tips and tricks.

Working on another script, I've come up with a further refinement. I discovered (rediscovered actually) that loading up iframes in this manner adds to the browser's history list. This generally isn't a good idea, especially with so many changes in a row. So I've changed to location.replace as opposed to changing the iframes src attribute:

Code:

<!DOCTYPE html> <html> <head> <title>Rotate iFrame Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> html body {height: 100%; overflow: hidden;} iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-width: 0;} #if_two {visibility: hidden;} </style> </head> <body> <div> <iframe id="if_one" src=""></iframe> <iframe id="if_two" src=""></iframe> </div> <script> jQuery(window).load(function(){ var pages = [ {page: 'http://www.dynamicdrive.com/forums/', dur: 10000}, {page: 'http://www.dynamicdrive.com/forums/forumdisplay.php?2', dur: 5000}, {page: 'http://www.dynamicdrive.com/forums/forumdisplay.php?3', dur: 3000} //<-- no comma after last page object ], p, pl = p = pages.length, ciframe = -1, $ = jQuery; while(--p > -1){ pages[p].hash = pages[p].page.split('#')[1] || ''; pages[p].hash = pages[p].hash? '#' + pages[p].hash : ''; pages[p].page = $('<a/>', {href: pages[p].page.replace(pages[p].hash, '')}).get(0); } $('iframe').load(function(){ $('iframe').not(this).css({visibility: 'hidden'}); $(this).css({visibility: 'visible'}); setTimeout(loadIframe, pages[p].dur); }); function loadIframe() { var page = pages[(p = ++p % pl)].page; page = [page.href, page.search? '&' : '?', 'bustcache=', new Date().getTime(), pages[p].hash].join(''); window.frames[(ciframe = ++ciframe % 2)].location.replace(page); } loadIframe(); }); </script> </body> </html>

Awesome code! Question for you? Could you create a countdown timer below the iframe that showed how many seconds before it would switch to the next one? I would think the timer would need to reference the setTimeout time already being used.

Hi John,

How would you create an accurate timer that would show how many seconds before the iframe would change to the next website? Having a really difficult time getting a countdown timer to work for this. Any suggestions?

Been busy. But I did give this some thought. I think it would either have to be a separate, yet concurrent function, or we could maybe give over the timing to a countdown function. There's also the small matter of where the timer would appear on the page, considering that the latest versions are all full page. I suppose an absolutely or fixed position counter could work. I'll let you know if I come up with anything. That said - for suitability purposes, could you tell me a why you want this, what sort of pages you would be cycling through, and why you think it would be a good idea?

Definitely, currently using the code you wrote on page 1 to cycle through different web dashboards. I set the cycle at 2 minutes but users want the ability to know how much time they have left before it will change to the next dashboard (helpful for them to know how much time is left). I tried building another timer using setTimeout but in order to get the timer to loop it has to refresh and that seems to be refreshing your javascript so it never changes to the next dashboard just keeps showing the first one. I also implemented a setInterval timer that loops but it becomes misaligned with the setTimeout in your code (loses about a second every 20 minutes or so). Not sure if there is a way to measure or subtract the time in your original setTimeout to show the countdown? To answer your second question I have been showing the timer at the bottom of the page but I also saw some example of countdown timers that use the tab bar. Thanks!

OK, well I'm working from the latest version which has some refinements and requires jQuery. Here's a demo of it with a countdown timer in the title (tab bar):

Code:

<!DOCTYPE html> <html> <head> <title>Rotate iFrame Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> html body {height: 100%; overflow: hidden;} iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-width: 0;} #if_two {visibility: hidden;} </style> </head> <body> <div> <iframe id="if_one" src=""></iframe> <iframe id="if_two" src=""></iframe> </div> <script> jQuery(window).load(function(){ var pages = [ // {page: 'url', dur: seconds} {page: 'http://www.dynamicdrive.com/forums/', dur: 120}, {page: 'http://www.dynamicdrive.com/forums/forumdisplay.php?2', dur: 5}, {page: 'http://www.dynamicdrive.com/forums/forumdisplay.php?3', dur: 3} //<-- no comma after last page object ], p, pl = p = pages.length, ciframe = -1, $ = jQuery; while(--p > -1){ pages[p].hash = pages[p].page.split('#')[1] || ''; pages[p].hash = pages[p].hash? '#' + pages[p].hash : ''; pages[p].page = $('<a/>', {href: pages[p].page.replace(pages[p].hash, '')}).get(0); } function formattime(t){ var s = t % 60, m = (t - s) / 60; s = (s + '').length < 2? '0' + s : s; return 'Time Remaining: ' + m + ':' + s; } function timeit(){ var dur = pages[p].dur, timer; document.title = formattime(dur); timer = setInterval(function(){ document.title = formattime(--dur); if(!dur){clearInterval(timer); loadIframe();} }, 1000); } $('iframe').load(function(){ $('iframe').not(this).css({visibility: 'hidden'}); $(this).css({visibility: 'visible'}); timeit(); }); function loadIframe() { var page = pages[(p = ++p % pl)].page; page = [page.href, page.search? '&' : '?', 'bustcache=', new Date().getTime(), pages[p].hash].join(''); window.frames[(ciframe = ++ciframe % 2)].location.replace(page); } loadIframe(); }); </script> </body> </html>

Any questions or problems, just let me know.

Brilliant, thank you! :)

start and stop buttons

Quote:

Originally Posted by mike95465

Thank you for your source code.
Is there any way to have a keyboard shortcut to change the timeout or even pause the timeout completely? Something such as keycode?

I am using much of your source code for a page that I am cycling the iframe src, again thank you. I am trying to have a button and a keyboard shortcut to pause the current iframe src where it is.

e.g. User presses 'A' to pause iframe where it is.
User presses 'B' to return the timeout to where it was.

Another addition that I am trying to implement is the ability to skip to a certain page of the var pages and then continue cycling from that point on.
e.g.
User presses 'C' to skip to the 10th page in var pages.
User presses 'D' to skip to the 13th page in var pages.

Is this possible? Or with like "Start cycling" and "Stop cycling" buttons.

Or even better, if you touch screen with mouse, it'ill stop. and touch again it'll run again.

This script is in use in big touch screen TV.