Description
Many standardized events of jQuery can be used in jQuery Mobile. Along with these jQuery Events, jQuery Mobile also offers several events that are mainly made for the purpose of mobile browsing. Few of jQuery Mobile Events are:
- jQuery Mobile Scroll events - The scroll events gets triggered if a user scrolls the screen up and down
- Page events - The page events gets triggered if a page is made to show, hide, create, load and/or unload
- Touch events - The touch events gets triggered if a user touch the screen (tap and swipe).
- Orientation events - The orientation events gets triggered if a device rotates horizontally or vertically.
Description
Normally, in jQuery, the event document.ready() is used to avoid the code from running before the document is loading finished.
[html]
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//jQuery ready function
$(document).ready(function(){
$("p").on("click",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
[/html]
Output:
But in jQuery Mobile, the event 
pagecreate is used to make the page create in the DOM, but before enhancement is completed.
The "#pageone" points to the page id to specify the events for jQuery Mobile pagecreate event.
Description
jQuery Mobile Scroll Event gives three events "
scroll", "scrollstart" and "scrollstop" that are grouped on elements of scroll.
These events helps when there are lengthy lists, where elements can be processed before and after they appear in the view.
Also, mobile scroll varies from desktop scroll. Mobile scrolling is much easier as it slows down before grinding to a complete halt and firing event scrollstop.
- scrollstart Event -> triggers at the beginning of scrolling
- scrollstop Event -> triggers at the end of scrolling
Example
[html]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>The scrollstart Event</h1>
</div>
<div data-role="main" class="ui-content">
<p><b>Tip:</b> Try to to resize the window if the scrollbar is not available.</p>
<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
[/html]
Output:
When the scrolling starts the alert message appears as shown below.
Key Points
- Scroll Event has three events “scroll“, “scrollstart” and “scrollstop” .
- scrollstart starts the scroll and scrollstop stops the scroll.