Events are also triggered in a situation when the page DOM (Document Object Model) is ready or when the user resize or scrolls the browser window, etc.
Example: Sample code to execute a function on scroll event
<!DOCTYPE html>
<html>
<head>
<title> Function on Scroll Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
p{
width: 100%;
padding: 50px 0;
text-align: center;
font: bold 34px sans-serif;
background: purple;
position: fixed;
top: 50px;
display: none;
}
.dummy-content{
height: 600px;
font: 34px sans-serif;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>
</head>
<body>
<p>Scroll Happened!</p>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
<div class="dummy-content">Scroll the viewport.</div>
</body>
</html>
E.g. Description
Document/Window Events:
Events are also triggered in a situation when the page DOM (Document Object Model) is ready or when the user resize or scrolls the browser window, etc.
The ready() Method:
The jQuery ready() method specify a function to execute when the DOM is fully loaded.
The resize() Method:
The jQuery resize() method attach an event handler function to the window element that is executed when the size of the browser window changes.
The scroll() Method
The jQuery scroll() method attach an event handler function to the window or scrollable frames and elements that are executed whenever the element's scroll position changes.
The following above example will display a message when you scroll the browser window.
No comments:
Post a Comment