Java Script for cycling through pages? [Archive]

nicmcd77

05-09-2013, 04:25 PM

This is way out of my league and I'm using an HTML file that someone wrote for me. I have a Crystal Report up on a huge TV monitor. This report will display the current status of samples. The html file basically takes the report and displays it and refreshes every 5 minutes or so. This is fine when the report is only 1 page. But if it’s more than one page, I need something in the HTML (If possible) to tell it to cycle between pages. Is this possible and if so can someone help me out with the script? Here is my html file so far:

<html>
<script type="text/javascript">
/*<![CDATA[*/
function loadIframe() {
document.getElementById('if_one').src = 'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AUfvlluquuZIr0UKY0QEacU&sIDType=CUID&sInstance=Last&sReportMode=weblayout';

setTimeout(loadIframe, 120000);
}
window.onload = loadIframe;
/*]]>*/
</script>

<iframe id="if_one" src="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

</html>

jscheuer1

05-09-2013, 07:38 PM

That's actually called a javascript, not an HTML script. Anyways, here's one way to do that:

<html>

<iframe id="if_one" src="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

<script type="text/javascript">
var pages = [
'http://www.dynamicdrive.com/',
'http://www.dynamicdrive.com/forums/forumdisplay.php?2-Dynamic-Drive-scripts-help',
'http://www.bing.com/' //<-- no comma after last page address
], p = pages.length;
while(--p > -1){
(function(p){
var a = document.createElement('a');
a.href = pages[p];
pages[p] = a;
})(p);
}

function loadIframe() {
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;

setTimeout(loadIframe, 120000);
}
loadIframe();
</script>

</html>

Just put in your pages there replacing those where I have it highlighted. You can have as many as you want. But there must be at least one. Most browsers will error correct for it if you forget, but there should be no comma after the last page as indicated by the green comment.

nicmcd77

05-09-2013, 08:02 PM

Thanks for responding! The problem is I need to advance pages in a report and not cycle through web pages. I guess we are using opendocument so i need it to say "go to the next page".
This is the report and where the red box and arrows are is where I need it to advance. I was told you can't advance pages using opendocument for Crystal Reports.

jscheuer1

05-09-2013, 09:26 PM

I'm not sure that I can help you without being there - that is I think that this is all on an intranet and that I might have to see the setup.

But we might be able to work it out.

First of all, the obvious solution would be, once you see that in the window, click on it to advance the page.

If you don't see that in the window, or clicking on it doesn't advance the page, then we need to setup a list of the pages, probably like what I have in my previous code. Only instead of cycling through them, put up a little pagination thing at the top, above the iframe, where you can click for page 1, page 2, etc.

And have the refresh work off of the current location of the iframe.

BTW - in my previous code I introduced a bustcache variable to add to the query string. That was to ensure that the server would fetch a fresh copy of the page and not allow the browser to show a cached copy. Something similar should probably be done for the pagination links. So something like so:

<html>
<style type="text/css">
#pagination a {
padding-right: 1em;
}
</style>
<div id="pagination"></div>
<iframe id="if_one" src="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

<script type="text/javascript">
var pages = [
'http://www.dynamicdrive.com/',
'http://www.dynamicdrive.com/forums/forumdisplay.php?2-Dynamic-Drive-scripts-help',
'http://www.bing.com/' //<-- no comma after last page address
], p = pages.length, paginate = document.getElementById('pagination'), thepage;
while(--p > -1){
(function(p){
var a = document.createElement('a');
a.href = pages[p];
a.appendChild(document.createTextNode('Page ' + (p + 1)));
a.onclick = function(){
var bust = this.search? '&' : '?';
bust += 'bustcache=' + new Date().getTime();
window.frames[0].location.href = this.href + bust;
thepage = this;
return false;
};
paginate.insertBefore(a, paginate.firstChild);
pages[p] = a;
})(p);
}
thepage = pages[0];

function loadIframe() {
thepage.onclick.apply(thepage);
setTimeout(loadIframe, 120000);
}
loadIframe();
</script>

</html>

However, it is possible that adding anything to the query string might confuse the server. If so we will get rid of that part and hope for the best. If the pages as served by the server have a no cache header on them, that would probably be all that's needed to prevent a cached version from being shown by the browser, and then the bustcache variable would be superfluous even if it caused no harm.

nicmcd77

05-09-2013, 09:34 PM

Wow thank you so much for your help. I know it is hard to understand withouth looking at it. The report will be up on monitors and I don't want any user interaction. So I was hoping the report could go from page 1 to 2, to 3 and back to 1 on its own. So cycle through the report pages and not actual separate web pages. So if that's the case then I could take out the 3 web pages you have listed, correct? Again, I don't think it's possible to tell opendocument to cycle through the pages on its own. Thanks agian for your help I will forward this on to some others and see how we could incorporate it.

jscheuer1

05-09-2013, 09:39 PM

Well actually then the first code I gave you would be better. It loops through each page. If you need it to go a little faster, just decrease the timeout:

setTimeout(loadIframe, 120000);

nicmcd77

05-09-2013, 09:45 PM

One last question, the very top part of the code actually refreshes the report and makes it go back and grab the latest report. Is this still being seen by the code? I wasn't sure if that part is still refreshing along with the rest of the code you added? I know ours goes back every 12000 and wasn't sure how it refreshes that along with cycling through each page.

This part:

<html>
<style type="text/css">
#pagination a {
padding-right: 1em;
}
</style>
<div id="pagination"></div>
<iframe id="if_one" src="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

<script type="text/javascript">

jscheuer1

05-09-2013, 09:50 PM

Yes. I moved that part below the iframe. However, and you may have missed this (I posted about just before you asked your last question), I think my first code would be better as it will cycle through the listed pages with no user interaction, just as you say you want. The only problem might be how quickly it does that. If you need it to go a little faster, just decrease the timeout:

setTimeout(loadIframe, 120000);

nicmcd77

05-13-2013, 07:53 PM

Hello again. So this is what we went with and it's working great! However, when I first open up the link, each page is displayed for about 7 seconds. Then once it's cycled a couple of times, now each page is only staying displayed for about 3 seconds and then it switches to the next page. Is there something in here that is doing that? Also, can I remove the first part of this code or is it still needed (the part in red)? I'm confused as to what this timepoint is for? We have 120000 and also a 9000. Is the first timepoint how often to go back and get the newest version of the report and the second time point is how often to switch pages?

<html>
<script type="text/javascript">
/*<![CDATA[*/
function loadIframe() {
document.getElementById('if_one').src = 'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AUfvlluquuZIr0UKY0QEacU&sIDType=CUID&sInstance=Last&sReportMode=weblayout';

setTimeout(loadIframe, 120000);
}
window.onload = loadIframe;
/*]]>*/</script>
<iframe id="if_one" src="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

<script type="text/javascript">var pages = [
'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AWYKXgUmQoRDiQ3tXf72Ebo&sIDType=CUID&sInstance=Last&sReportMode=weblayout',
'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AaInp3Jp.zdHgEgYuOxLqoM&sIDType=CUID&sInstance=Last&sReportMode=weblayout',
'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AdjRz6q_vnxFgXHMMQg7PEw&sIDType=CUID&sInstance=Last&sReportMode=weblayout' //<-- no comma after last page address
], p = pages.length;
while(--p > -1){
(function(p){
var a = document.createElement('a');
a.href = pages[p];
pages[p] = a;
})(p);
}

function loadIframe() {
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;

setTimeout(loadIframe, 9000);
}
loadIframe();
</script>

</html>

jscheuer1

05-14-2013, 04:11 AM

I said before that you didn't need it, and I meant it. I said I had moved it to below the iframe, by which I meant that I had incorporated the useful part of it into what I had written for you. Use this:

<html>
<iframe id="if_one" src="" style="width: 2500px;height: 2000px;float: left;margin: 20px;"></iframe>

<script type="text/javascript">
var pages = [
'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AWYKXgUmQoRDiQ3tXf72Ebo&sIDType=CUID&sInstance=Last&sReportMode=weblayout',
'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AaInp3Jp.zdHgEgYuOxLqoM&sIDType=CUID&sInstance=Last&sReportMode=weblayout',
'http://usbdboxiwb901:8080/OpenDocument/opendoc/openDocument.jsp?iDocID=AdjRz6q_vnxFgXHMMQg7PEw&sIDType=CUID&sInstance=Last&sReportMode=weblayout' //<-- no comma after last page address
], p = pages.length;
while(--p > -1){
(function(p){
var a = document.createElement('a');
a.href = pages[p];
pages[p] = a;
})(p);
}

function loadIframe() {
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;

setTimeout(loadIframe, 9000);
}
loadIframe();
</script>

</html>

The only thing you may want to adjust is the length of time (red) between pages. It's currently 9000 (9 seconds). Any questions or problems, just let me know.

nicmcd77

05-14-2013, 04:03 PM

My apologies. This is all greek to me so I am trying to better understand. So where in the code does it tell it when to go back and get the newest version of the report? The time you have (9000) says how often to switch pages. But I also had (or at least I thought I had) a portion that stated to go back in 5 minutes and get the newest version. I assume it's this part? (sInstance=Last&sReportMode=weblayout';)

nicmcd77

05-14-2013, 04:04 PM

Oh never mind. I see it. Thanks!

jscheuer1

05-14-2013, 05:00 PM

Just as a point in fact, there's no need to go back every 5 minutes if every time we switch pages we get the latest version of that page. And that's what this code is doing. We could modify it so that it only forces the latest version every 5 minutes. But you might end up with an out of date page for up to 5 minutes, like if it changes right after the last forced look for a new version. However, it would mean less round trips to the server. If this is an intranet though, that shouldn't be much if any of a consideration.

nicmcd77

05-14-2013, 05:22 PM

Ah ok I think I am getting it now. For my own knowledge, how would I modify the code so that is only forces the version every 5 minutes? Our data doesn't change that often so less trips to the server might be the better option.

jscheuer1

05-14-2013, 08:02 PM

Replace this part:

function loadIframe() {
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;

setTimeout(loadIframe, 9000);
}

with:

var bustdate = new Date().getTime();
setInterval(function(){bustdate = new Date().getTime();}, 1000 * 60 * 5);
function loadIframe() {
var page = pages[(p = ++p % pages.length)], bust = 'bustcache=' + bustdate;
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;

setTimeout(loadIframe, 9000);
}

That way the cache busting query variable will only update every 5 minutes (1000 milliseconds times 60 times 5). The rest of the time the browser can show a cached copy, that is as long as (like I mentioned before) the server isn't serving it with a no cache header. And something I didn't mention is that if the page itself has a meta tag no cache header, that too can force the server to send a fresh copy each time.

But as I also said, as long as this is an intranet, repeated requests to the server (every 9 seconds) shouldn't be a big deal. But it might. Depends on the setup.

nicmcd77

05-15-2013, 03:50 PM

Thanks!! Is there any reason this code would change the scroll bar on the right to move down a bit? Every time it changes pages, the right hand side scroll bar moves down a bit and cuts off the top of the report being displayed :(

jscheuer1

05-15-2013, 04:59 PM

Do you mean both versions, or only this latest version? And, when it does that, can you use the right scrollbar to scroll up to see the top of the report?

I'm guessing that the answer to both questions is yes. Either way it would be hard to know for sure why it's happening without seeing it. Are their any elements on the reports that demand focus? That could be an explanation. When I tested this out, one of the pages I loaded was Bing's main page. It sets focus on its search input, so the iframe would always scroll to it when Bing loaded. After that, one had to manually scroll back up to see the top of any page loaded into the iframe.

It could also be javascript on the report pages telling them to scroll to a certain point on the page (window.scrollTo(x, y)) or by a certain amount (window.scrollBy(x, y)), or a named anchor (I see none of those in the page's URLs though). As I say though it would be hard to tell without seeing it. There might be some other explanation. It might even be something about the iframe itself. But I doubt that.

Was there any version where this did not happen? If so, which? Before answering, try it again to make certain it's not doing it. Like before when there was just one page, it might not appear to do it except on reloads, which were few and far between.

When I have more time, I will look into a possible fix. As long as both the page with the iframe and the reports are on the same server, we should be able to get the iframe to scroll to its top after loading.

jscheuer1

05-15-2013, 05:27 PM

I was just playing with this and it seems quite possible that it's not the iframe, rather the top page that's scrolling. Can you tell which it is?

jscheuer1

05-15-2013, 05:54 PM

I'm guessing it could be either or both, so try adding this code as shown:

. . . ge = pages[(p = ++p % pages.length)], bust = 'bustcache=' + bustdate;
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
document.getElementById('if_one').src = page;

setTimeout(loadIframe, 9000);
}
loadIframe();
function scrolltotop(){
setTimeout(function(){
window.frames[0].scrollTo(0, 0); //iframe
window.scrollTo(0, 0); //top window
}, 100);
}
if (window.addEventListener){
document.getElementById('if_one').addEventListener('load', scrolltotop, false);
}
else if (window.attachEvent){
document.getElementById('if_one').attachEvent('onload', scrolltotop);
}
</script>

.

That should take care of both/either. You can experiment by removing the one for the iframe and see if it still works, and likewise for the one for the top window after bringing back the iframe one. It's probably just one or the other. Probably the top window.

nicmcd77

05-15-2013, 07:47 PM

Turns out it only scrolls when I move it from my computer screen over to my TV monitor that I have hooked up. I guess I will need our IT to look into why it's scrolling for the TV monitor. Thanks again for everything!

jscheuer1

05-15-2013, 09:40 PM

The code from my last post:

http://www.dynamicdrive.com/forums/showthread.php?73827-Java-Script-for-cycling-through-pages&p=294896#post294896

might still fix that. Did you try it?

Joseph Lau

05-16-2014, 01:36 AM

I love your scripts and use the first one on page 1. May I ask:

(1) How can I set different "setTimeout" for different webpages (I want to display some pages longer); and
(2) How can I use "fadeIn/fadeOut" effect for the transition between two pages (I want to slide the pages smoothly/naturally).

Thank you very much.

jscheuer1

05-16-2014, 06:17 AM

<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<style type="text/css">
iframe {width: 2500px;height: 2000px;position: absolute;top: 0; left: 0;margin: 20px;}
</style>
</head>
<html>
<body>
<div>
<iframe id="if_one" src=""></iframe>
<iframe id="if_two" src=""></iframe>
</div>
<script type="text/javascript">
jQuery(function($){
$('#if_two').css({opacity: 0});
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 address
], p = pages.length, cif = 0;
while(--p > -1){
(function(p){
var a = document.createElement('a');
a.href = pages[p].page;
pages[p].page = a;
})(p);
}
$('iframe').load(function(){$('iframe').not(this).animate({opacity: 0});$(this).animate({opacity: 1}, 'slow', function(){setTimeout(loadIframe, pages[p].dur);});});
function loadIframe() {

var page = pages[(p = ++p % pages.length)].page, bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
$('iframe').eq(cif).attr('src', page);
cif = (++cif) % 2;
}
loadIframe();
});
</script>
</body>
</html>

Or (probably smoother transitions but fades to blank in between):

<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<style type="text/css">
iframe {width: 2500px;height: 2000px;position: absolute;top: 0; left: 0;margin: 20px;}
</style>
</head>
<html>
<body>
<div>
<iframe id="if_one" src=""></iframe>
<iframe id="if_two" src=""></iframe>
</div>
<script type="text/javascript">
jQuery(function($){
$('#if_two').css({opacity: 0});
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 address
], p = pages.length, cif = 0;
while(--p > -1){
(function(p){
var a = document.createElement('a');
a.href = pages[p].page;
pages[p].page = a;
})(p);
}
$('iframe').load(function(){
var $this = $(this);
$('iframe').not(this).animate({opacity: 0}, function(){
$this.animate({opacity: 1}, 'slow', function(){
setTimeout(loadIframe, pages[p].dur);
});
});
});
function loadIframe() {

var page = pages[(p = ++p % pages.length)].page, bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
$('iframe').eq(cif).attr('src', page);
cif = (++cif) % 2;
}
loadIframe();
});
</script>
</body>
</html>

Joseph Lau

05-18-2014, 06:45 AM

Dear John,

Thank you very much. It is a very good source code.

For other issue, some people says <iframe> is currently not a suggested method because <iframe> may create a lot of problems. I am not familiar with this issue.

Do you have any comment or advice on it? or any other method you could suggest me.

Thanks again so much.

Joseph

jscheuer1

05-18-2014, 03:08 PM

For off site pages, without using server side code in a way that can violate copyright, there is nothing other than frame or iframe and those are about the same in that some sites will not allow their pages to be viewed through an iframe or frame. Of the two, iframe is generally less complicated.

If the pages are all on the same site, AJAX is often a better approach, as can be simply linking to them.

Joseph Lau

05-19-2014, 06:21 AM

Yes. Thanks again.

mike95465

07-07-2015, 06:29 PM

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.

dallemnn

02-13-2017, 09:34 AM

jscheuer1

02-13-2017, 04:03 PM

Hi John,

Love your code!!

But i have a question about the fading script. How will i be possible to just disable or turn it off? I will still like the "different setTimeout" but just want the fading to be disabled.

Kind regards Daniel.

Sure:

<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
iframe {width: 2500px;height: 2000px;position: absolute;top: 0; left: 0;margin: 20px;}
</style>
</head>
<html>
<body>
<div>
<iframe id="if_one" src=""></iframe>
<iframe id="if_two" src=""></iframe>
</div>
<script type="text/javascript">
jQuery(function($){
$('#if_two').css({visibility: 'hidden'});
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 address
], p = pages.length, cif = 0;
while(--p > -1){
(function(p){
var a = document.createElement('a');
a.href = pages[p].page;
pages[p].page = a;
})(p);
}
$('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 % pages.length)].page, bust = 'bustcache=' + new Date().getTime();
page = page.search? page.href + '&' + bust : page.href + '?' + bust;
$('iframe').eq(cif).attr('src', page);
cif = (++cif) % 2;
}
loadIframe();
});
</script>
</body>
</html>

dallemnn

02-15-2017, 07:58 AM

Hey, you are the best. Thanks allot John. :) Really appreciate it!

jscheuer1

02-17-2017, 04:54 AM

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

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

dallemnn

02-17-2017, 07:38 AM

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.

jscheuer1

03-05-2017, 12:32 PM

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:

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

dvon

06-19-2017, 08:47 PM

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.

dvon

06-20-2017, 08:58 PM

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?

jscheuer1

06-21-2017, 01:36 AM

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?

dvon

06-21-2017, 12:46 PM

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!

jscheuer1

06-21-2017, 04:01 PM

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):

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

dvon

06-22-2017, 06:12 PM

Brilliant, thank you! :)

tomfinland

12-17-2018, 11:14 AM