filmov
tv
jQuery scroll event
Показать описание
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
In this video we will discuss scroll event and how to handle it using jQuery.
scroll event is raised when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll.
In the following exampe, notice that the div element overflow style is set to scroll. The div element has a scrollbar and as you scroll up and down the div element, the scroll event is raised and handled.
Replace < with LESSTHAN symbol and > with GREATERTHAN symbol
<html>
<head>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$('div').scroll(function () {
$('h3').css('display', 'inline').fadeOut(1000);
});
});
</script>
</head>
<body style="font-family:Arial">
<div style="width:300px; height:200px; border:1px solid black; overflow:scroll">
PRAGIM Speciality in training arena unlike other training institutions. Training delivered by real time software experts having more than 10 years of experience. Interview questions and real time scenarios discussion on topics covered for the day. Realtime projects discussion relating to the possible interview questions. Trainees can attend training and use lab untill you get a job. Resume preperation and mock up interviews. 100% placement assistance. 24 hours lab facility. PRAGIM Technologies offers professional real time projects for studetns in their final semester. Course completion and project completion certificates will also be provided upon successful completion of the course. We have partnered with major multinational companies to place freshers with our clients on their course completion.
</div>
<br />
<h3 style="display:none; color:red">Scroll event handled</h3>
</body>
</html>
The following example, keeps track of how many times the scroll event is raised.
<html>
<head>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var count = 0;
$('div').scroll(function () {
$('span').text(count += 1);
});
});
</script>
</head>
<body style="font-family:Arial">
<div style="width:300px; height:200px; border:1px solid black; overflow:scroll">
DIV CONTENT
</div>
<br />
<h3 style="color:red">Scroll event handled <span>0</span> time(s)</h3>
</body>
</html>
The following example, keeps track of whether the user scrolled up or down.
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
var lastScrollTop = 0;
$('div').scroll(function () {
var currentScrollPosition = $(this).scrollTop();
if (currentScrollPosition > lastScrollTop) {
$('h3').text('You scrolled down');
} else {
$('h3').text('You scrolled up');
}
lastScrollTop = currentScrollPosition;
});
});
</script>
</head>
<body style="font-family:Arial">
<div style="width:300px; height:200px; border:1px solid black; overflow:scroll">
DIV CONTENT
</div>
<br />
<h3 style="display:inline; color:red"></h3>
</body>
</html>
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
In this video we will discuss scroll event and how to handle it using jQuery.
scroll event is raised when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll.
In the following exampe, notice that the div element overflow style is set to scroll. The div element has a scrollbar and as you scroll up and down the div element, the scroll event is raised and handled.
Replace < with LESSTHAN symbol and > with GREATERTHAN symbol
<html>
<head>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$('div').scroll(function () {
$('h3').css('display', 'inline').fadeOut(1000);
});
});
</script>
</head>
<body style="font-family:Arial">
<div style="width:300px; height:200px; border:1px solid black; overflow:scroll">
PRAGIM Speciality in training arena unlike other training institutions. Training delivered by real time software experts having more than 10 years of experience. Interview questions and real time scenarios discussion on topics covered for the day. Realtime projects discussion relating to the possible interview questions. Trainees can attend training and use lab untill you get a job. Resume preperation and mock up interviews. 100% placement assistance. 24 hours lab facility. PRAGIM Technologies offers professional real time projects for studetns in their final semester. Course completion and project completion certificates will also be provided upon successful completion of the course. We have partnered with major multinational companies to place freshers with our clients on their course completion.
</div>
<br />
<h3 style="display:none; color:red">Scroll event handled</h3>
</body>
</html>
The following example, keeps track of how many times the scroll event is raised.
<html>
<head>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var count = 0;
$('div').scroll(function () {
$('span').text(count += 1);
});
});
</script>
</head>
<body style="font-family:Arial">
<div style="width:300px; height:200px; border:1px solid black; overflow:scroll">
DIV CONTENT
</div>
<br />
<h3 style="color:red">Scroll event handled <span>0</span> time(s)</h3>
</body>
</html>
The following example, keeps track of whether the user scrolled up or down.
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
var lastScrollTop = 0;
$('div').scroll(function () {
var currentScrollPosition = $(this).scrollTop();
if (currentScrollPosition > lastScrollTop) {
$('h3').text('You scrolled down');
} else {
$('h3').text('You scrolled up');
}
lastScrollTop = currentScrollPosition;
});
});
</script>
</head>
<body style="font-family:Arial">
<div style="width:300px; height:200px; border:1px solid black; overflow:scroll">
DIV CONTENT
</div>
<br />
<h3 style="display:inline; color:red"></h3>
</body>
</html>
0:10:17
jQuery scroll event
0:04:07
15 JQuery Scroll event (Complete JQuery And JQuery UI Course For Beginner)
0:08:23
jQuery 43 - Events 13 - Scroll events -scroll(), scrollLeft(), scrollTop()
0:00:57
Executing a function on scroll event in jQuery | #shorts #html #css #javascript #coding
0:08:41
Scroll() event in jquery with example | Part - 17
0:08:19
jquery tutorial for beginners - jquery scroll event position (video-27)
0:07:58
The “scroll” event JavaScript Tutorial | window.onscroll
0:09:47
JQuery handling window of page events like resize , scroll
0:11:45
jQuery scrollTop & scrollLeft Method Tutorial in Hindi / Urdu
0:07:11
The 'scroll' event in JavaScript | window.onscroll
0:08:18
jquery tutorial for beginners - jquery scroll event position (video-27)by Trip Event
0:09:25
Play / Pause of html5 videos using jQuery scroll event and scrollTop Method
0:08:19
Lecture 33 Tutorial JQuery Scrolling Event or Position
0:08:00
jQuery Tip 7 Fixed Header Scroll Event
0:01:31
jQuery : jQuery scroll event
0:01:17
JavaScript : How can I determine the direction of a jQuery scroll event?
0:01:32
CSS : How to use JQuery .on() to catch the scroll event
0:01:18
jQuery : Scroll event for Meteor
0:01:27
jQuery : How to trigger an on scroll event without scrolling
0:01:37
jQuery : Javascript how to find the source a scroll event
0:02:58
jQuery scroll event fire once per scroll (2 Solutions!!)
0:05:33
13 - ( jQuery Tutorial ) Events: Scroll, Resize
0:01:38
jQuery : jQuery scroll event: how to determine amount scrolled (scroll delta) in pixels?
0:02:20
jQuery document scroll event and scroll top value of document, html, body and firefox issue 720p
Комментарии