Welcome to our comprehensive guide on jQuery Window Events! In this tutorial, we will explore the resize and scroll events, which are essential for creating dynamic and interactive web pages. Let's dive in!
In a web page, the window refers to the browser's viewport. The resize event occurs when the size of the window changes, while the scroll event is triggered when the user scrolls the page.
By using these events, you can create responsive web pages, adjust content, and provide a seamless user experience.
resize Event 🎯resize Event?The resize event is triggered whenever the browser window is resized. This event is useful when you want to adjust the layout of your web page based on the user's screen size.
$(window).on('resize', function() {
// Your code to adjust the layout goes here
});Let's create a simple example where we change the background color of the body element when the window is resized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Resize Event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
$(function() {
$(window).on('resize', function() {
var width = $(window).width();
if (width < 600) {
$('#content').css('background-color', 'lightblue');
} else {
$('#content').css('background-color', 'lightgreen');
}
});
});
</script>
</body>
</html>Which jQuery event triggers when the browser window is resized?
scroll Event 🎯scroll Event?The scroll event is triggered when the user scrolls the page. This event is useful when you want to add interactive elements that respond to the user's scrolling behavior.
$(window).on('scroll', function() {
// Your code to adjust the elements based on scrolling goes here
});Let's create a simple example where we add a fixed header to the page when the user starts scrolling down.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Scroll Event</title>
<style>
header {
background-color: lightblue;
padding: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>Fixed Header</header>
<div id="content"></div>
<script>
$(function() {
var header = $('header');
$(window).on('scroll', function() {
if ($(this).scrollTop() > 50) {
header.addClass('scrolled');
} else {
header.removeClass('scrolled');
}
});
});
</script>
</body>
</html>In this example, we add a class named scrolled to the header when the user scrolls down more than 50 pixels.
Which jQuery event triggers when the user scrolls the page?
In this tutorial, we explored the resize and scroll events in jQuery. By understanding these events and their use cases, you can create interactive and responsive web pages that provide a great user experience.
Keep practicing and experimenting with these events to enhance your web development skills! Happy coding! 🚀💻