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

Thread: Java Script for cycling through pages?

  1. #21
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 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,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 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 04: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,138
    Thanks
    44
    Thanked 3,231 Times in 3,192 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.

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, 04:29 AM
  5. HTML Pages in XP
    By BNVSAJ in forum CSS
    Replies: 8
    Last Post: 09-11-2007, 08: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
  •