Run Jquery function on window events: load, resize, and scroll?
How do I run a jquery function on window events: load, resize, and scroll?
Here is my code
I’m trying to detect if a div is viewable and then if it is run some ajax code…
<script>
function topInViewport(element) {
return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top <= $(window).scrollTop() + $(window).height();
}
</script>
<script>
topInViewport($("#mydivname"))
{
// ajax code goes here
}
You can use the following. They all wrap the window object into a jQuery object.
$(window).load(function () {
topInViewport($("#mydivname"))
});
$(window).resize(function () {
topInViewport($("#mydivname"))
});
$(window).scroll(function () {
topInViewport($("#mydivname"))
});
Or bind to them all using on:
$(window).on("load resize scroll",function(e){
topInViewport($("#mydivname"))
});
You can bind listeners to one common functions –
$(window).bind("load resize scroll",function(e){
// do stuff
});
Or another way –
$(window).bind({
load:function(){
},
resize:function(){
},
scroll:function(){
}
});
Alternatively, instead of using .bind() you can use .on() as bind directly maps to on().
And maybe .bind() won’t be there in future jquery versions.
$(window).on({
load:function(){
},
resize:function(){
},
scroll:function(){
}
});
just call your function inside the events.
load:
$(document).ready(function(){ // or $(window).load(function(){
topInViewport($(mydivname));
});
resize:
$(window).resize(function () {
topInViewport($(mydivname));
});
scroll:
$(window).scroll(function () {
topInViewport($(mydivname));
});
or bind all event in one function
$(window).on("load scroll resize",function(e){
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
