Geek Answers Handbook

Continue to the next and suspended page when the page has been idle for 3 seconds on each page.

Can someone help me with a script that automatically moves between pages when the page is idle for 3 seconds? Currently, with what I have, it can only move from one page to another, but I have 4 pages that I would like this to affect all of this.

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>&nbsp; <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>&nbsp; <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>&nbsp; <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 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); }); });
+6
source share
1 answer

Change, update

Note. div is not a valid child of p . Removed p elements that were parents of a 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 starts with #page1 , you can use Number() , String.prototype.slice() to enlarge pages using existing js .

Defined by mousemove , the keypress event handler as a named function, substituting .one() for .on() to prevent the handler from being called in every mousemove event; defined goToNextPage variable outside the .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

+2
source

More articles:


All Articles