Page 4 of 4 FirstFirst ... 234
Results 31 to 39 of 39

Thread: Java Script for cycling through pages?

  1. #31
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 02-17-2017 at 05:34 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #32
    Join Date
    Feb 2017
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #33
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 06-22-2017 at 03:31 PM. Reason: code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #34
    Join Date
    Jun 2017
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #35
    Join Date
    Jun 2017
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #36
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #37
    Join Date
    Jun 2017
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #38
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 06-22-2017 at 03:30 PM. Reason: correct code error, later - code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #39
    Join Date
    Jun 2017
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Brilliant, thank you!

Similar Threads

  1. Resolved My html pages got problem
    By xaverius in forum HTML
    Replies: 7
    Last Post: 02-19-2012, 10:59 AM
  2. fade two .html pages
    By skizo in forum JavaScript
    Replies: 19
    Last Post: 02-28-2011, 03:14 PM
  3. HTML/CSS Pages
    By salvo in forum Looking for such a script or service
    Replies: 0
    Last Post: 02-08-2008, 09:25 PM
  4. XML>HTML output on several pages
    By tugg in forum PHP
    Replies: 1
    Last Post: 09-29-2007, 03:29 AM
  5. HTML Pages in XP
    By BNVSAJ in forum CSS
    Replies: 8
    Last Post: 09-11-2007, 07:35 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •