Java Script for cycling through pages?

Printable View

Show 40 post(s) from this thread on one page

05-09-2013, 04:25 PM
nicmcd77

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>
05-09-2013, 07:38 PM
jscheuer1

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.
05-09-2013, 08:02 PM
nicmcd77

1 Attachment(s)

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.
05-09-2013, 09:26 PM
jscheuer1

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.
05-09-2013, 09:34 PM
nicmcd77

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.
05-09-2013, 09:39 PM
jscheuer1

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);
05-09-2013, 09:45 PM
nicmcd77

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">
05-09-2013, 09:50 PM
jscheuer1

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);
05-13-2013, 07:53 PM
nicmcd77

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>
05-14-2013, 04:11 AM
jscheuer1

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.

Show 40 post(s) from this thread on one page