So, this is a pretty simple sounding question, but I’m interested in other peoples opinions about the “best” practice for handling this. The site is a presentational delivery of building energy information; it’s mostly HTML5/CSS3 and jQuery with some heavy graphics. It does use PHP to leverage the building information via an API, however it does not drive any other attribute of the site.
So, this site needs to do one last thing, after a set interval(usually several minutes long) the page needs to redirect the user to the next page in the flow. It’s important that the browser also refreshes periodically(to restart looping animations).
I’ve certainly considered the very simple:
<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location = "../javascriptredirect.php"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 300000)">
</body>
</html>
This works, but it doesn’t “feel” like the best option. Thanks in advance to anyone who can contribute an idea.
I think your method would work best. When you refresh the page with code, you could add a querystring parameter to the url and on page load if you detect that parameter there, then you know it has refreshed already and you may then decide to redirect after a couple of page refreshes.
Function pulled from: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx
If this had been earlier in development I would suggest loading content of another page, slide out your current content then slide in the new content. That would have opened the door to easily trigger page refreshes, too. When I think of a website as a slideshow I think of jquery mobile. When you click on a link in jqmobile, it loads the next page’s content in to the current DOM, then it slides out the old content and slides in the new content. Upon loading the new content, a hash-tag is appended to the url so, it helps to image how it is really just referencing another block of content on the same page (like when using
<a href="#paragrapn2">Go to Paragraph 2</a>).