Menu
Can someone help me to come with with a script that automatically moves in between page when the page is idle for 3 seconds? Currently with what i have it can only move from one page to the other but i'm having 4 pages which i would want it to affect it all.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div>
<div data-role="content">This is page 1</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<p>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">This is page 2</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</p>
<p>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page 3</h1>
</div>
<div data-role="content">This is page 3</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<p>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Page 4</h1>
</div>
<div data-role="content">This is page 4</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</p>
</body>
</html>
Here's a fiddle to my page
http://jsfiddle.net/91wu20fr/
JQUERY
$(function () {
$(document).on("mousemove keypress", function () {
clearTimeout(goToNextPage);
goToNextPage = setTimeout(function () {
location.href = '#page2';
}, 3000);
});
});
851
Edit, Updated
Note, div is not valid child element of p element. Removed p elements that were parents of div element
html
<!DOCTYPE html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<script src="script.js"></script>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div>
<div data-role="content">This is page 1</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">This is page 2</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page 3</h1>
</div>
<div data-role="content">This is page 3</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Page 4</h1>
</div>
<div data-role="content">This is page 4</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
If hash of location begins at #page1 could use Number() , String.prototype.slice() to increment pages using existing js .
Defined mousemove, keypress event handler as named function , substituted .one() for .on() to prevent handler being called at each mousemove event ; defined goToNextPage variable outside of .one() handler
js
$(function() {
location.href = "#page1"
var goToNextPage = null;
function updatePage(event) {
console.log(event)
var currentPage = Number(location.hash.slice(-1));
// if `currentPage` is less than 4
if (currentPage !== 4) {
goToNextPage = setTimeout(function() {
if ((currentPage + 1) <= 4) {
// set `location.href` to `#page` + `currentPage` + `1`
location.href = "#page" + (currentPage + 1);
console.log(location.hash);
// reset event handlers
$(document).one("mousemove keypress", updatePage);
}
}, 3000);
} else {
clearTimeout(goToNextPage)
}
}
$(document).one("mousemove keypress", updatePage);
});
plnkr http://plnkr.co/edit/tunX9CjEqNEZWxoxXU1b?p=preview
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
