Page 3 of 3 FirstFirst 123
Results 21 to 27 of 27

Thread: Java Script for cycling through pages?

  1. #21
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

    The code from my last post:

    http://www.dynamicdrive.com/forums/s...896#post294896

    might still fix that. Did you try it?
    - John
    ________________________

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

  2. #22
    Join Date
    May 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #23
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 05-16-2014 at 03:49 PM. Reason: add 2nd method
    - John
    ________________________

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

  4. #24
    Join Date
    May 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #25
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,412
    Thanks
    45
    Thanked 3,267 Times in 3,228 Posts
    Blog Entries
    12

    Default

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

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

  6. #26
    Join Date
    May 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes. Thanks again.

  7. #27
    Join Date
    Jul 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Resolved My html pages got problem
    By xaverius in forum HTML
    Replies: 7
    Last Post: 02-19-2012, 09:59 AM
  2. fade two .html pages
    By skizo in forum JavaScript
    Replies: 19
    Last Post: 02-28-2011, 02:14 PM
  3. HTML/CSS Pages
    By salvo in forum Looking for such a script or service
    Replies: 0
    Last Post: 02-08-2008, 08: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
  •