Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: Java Script for cycling through pages?

  1. #1
    Join Date
    May 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Java Script for cycling through pages?

    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:


    Code:
    <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>
    Last edited by nicmcd77; 05-09-2013 at 08:15 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

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

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

  3. #3
    Join Date
    May 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	5-9-2013 9-11-48 AM.jpg 
Views:	193 
Size:	102.4 KB 
ID:	5053  

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

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

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

  5. #5
    Join Date
    May 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    setTimeout(loadIframe, 120000);
    - John
    ________________________

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

  7. #7
    Join Date
    May 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    setTimeout(loadIframe, 120000);
    - John
    ________________________

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

  9. #9
    Join Date
    May 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?
    Code:
    <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>
    Last edited by Beverleyh; 05-13-2013 at 08:33 PM. Reason: Formatting

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

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

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

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
  •