Java Script for cycling through pages?

**jscheuer1** · 05-15-2013, 09:40 PM

The code from my last post:

http://www.dynamicdrive.com/forums/s...896#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

Code:

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

Code:

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

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.

**jscheuer1** · 02-13-2017, 04:03 PM

Originally Posted by dallemnn

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:

Code:

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