I have a jquery code that I've indicated below. These codes run, When I start scrolling (I mean when the height of scroll is more than 100)
But I want to run just for once, immediately after height of 100, and not to be run more than once.
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//some codes...
}
});
How can I do this? Thank you :)
As soon as your condition is met, unbind the scroll handler:
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//Kill the handler
$(window).off("scroll");
//some codes...
}
});
use
$(window).unbind('scroll');
When you enter first time
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
$(window).unbind('scroll');
//some codes...
}
});
Bind the scroll event to $(window), then when scrollTop() > 100, execute your action then unbind the scroll event from $(window)
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(this).scrollTop() > 100) {
$('body').prepend('Scroll top > 100');
$(window).unbind('scroll');
}
});
});
body { min-height: 1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://codepen.io/pen/
ok this can be done with the help of global variable or flag in order to see the effect first put lots of data into the page so that you can see vertical scroll.
<script>
var flag = 0;
$(document).ready(function() {
$(window).scroll(function() {
if (flag == 0) {
if ($(window).scrollTop() > 100) {
alert('1st time');
flag = 1;
}
} else if (flag == 1) {
alert('second time and u can comment this alert');
}
});
});
</script>
The .off() function will stop the function from firing after the first time.
$(document).ready(function () {
$(window).on('scroll.myEvent', function() {
if ($(document.body.scrollTop > 100))
{
$(window).off('scroll.myEvent');
alert('fired');
}
});
});
Example: http://jsfiddle.net/2k3s9jx8/
Related
I just write a script to auto positioning an element on my page.
$(document).ready(function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll < 180) {
$(".header-bottom").removeClass("scroll-menu");
if ($(window).width() > 991) {
$(".header_user_top").css("position", "absolute");
$(".header_user_top").css("top", "initial");
$(".header_user_top").css("right", "60px");
$(".header_user_top").css("z-index", "1");
}
} else {
$(".header-bottom").addClass("scroll-menu");
if ($(window).width() > 991) {
var rightContainer = ($(window).width() - ($('#header div.header-bottom div.container').offset().left + $('#header div.header-bottom div.container').outerWidth()));
$(".header_user_top").css("position", "fixed");
$(".header_user_top").css("top", "-22px");
$(".header_user_top").css("right", rightContainer+60+"px");
$(".header_user_top").css("z-index", "99");
}
}
});
});
It's working but if I resize browser window the script doesn't reload.
If I refresh the page it's working.
I have add window.onresize = function(){ location.reload(); }to my script to fix this problem but I'm looking for a better solution.
Any idea?
Use on function to call multiple event:
$(window).on("load resize scroll",function(e){
// do something
}
Call function which is handling size on windows.resize also
function handleSize(){
// You code to handle size
}
window.resize=handleSize();
I have a scroll function. It needs to alert when you scroll to bottom. Strangely, it only alerts when you scroll to top. What is the correct way to make it work when you scroll at bottom.
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert();
});
});
You can use a flag to keep the current scroll or update it and then check the current position:
$(function () {
cur = $(window).scrollTop();
$(window).scroll(function() {
if ($(window).scrollTop() < cur) {
// Scrolled Up!
} // Remove the extra `);` here.
});
});
try this
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()){
alert();
} //Remove from here
});
Remove ) after the end of if block.
function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else if (windowSize <= 450) {
$('.menu-361').on('hover', function () {
//mousehover
} , function(){
//mouseout
} );
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
else {}
}
changeDrop();
$(window).resize(changeDrop);
After the if statment is true the bit of code is loaded in the memory i think. And when the window.width is <= 450 the code from the if statment or > 450 still runs. Any idea how to make this work?
http://tidalbania.com/tidnew/
The link in witch the demo is on the real site!
If you need a fiddle i can update the question.
As others have mentioned, you should not bind event handlers on every change. This should suffice:
$('.menu-361').hover(hoverInOut);
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
function hoverInOut(event) {
var windowSize = $(window).width();
if (windowSize > 450) {
if(event.type == "mouseenter")
$('.menu-361 ul').show();
else
$('.menu-361 ul').hide();
}
}
Well for starters, your code is essentially if A, else if not A, else which is redundant. Just if A, else is fine.
That aside, you are attaching a new event handler for every single time your code runs. That's a lot of event handlers! You are also never detaching your handlers, instead trying to re-add blank ones.
Take a moment to learn how event handlers work ^_^
function changeDrop() {
var windowSize = $(window).width();
if (windowSize > 450) {
$('.menu-361').hover(
function() {
$('.menu-361 ul').show();
},
function() {
$('.menu-361 ul').hide();
});
console.log("screen width is greater than 450px");
}
else {
$('.menu-361').unbind('mouseenter mouseleave');
$('#dropbutton').click(function() {
$('.menu-361 ul').toggle();
$('#dropbutton p').toggle();
});
console.log("screen width is less than 450px");
}
}
changeDrop();
$(window).resize(changeDrop);
I think i fixed the issue adding the unbind ('mouseenter mouseleave') when width is less than 450px by removing the binded hover function.
Is this the way it should be done?
this makes the back to top div appear when scrolling down 100 pixels, but if a person is already scrolled down and does a refresh, the page stays scrolled down, but the div is not shown.
<div id="gototopwrap">Back To Top</div>
<script>
$(function(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
});
</script>
i tried doing this, but it didn't work:
$(function myFunction(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
});
myFunction();
also tried it like this, and still nothing:
function myFunction(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
}
myFunction();
i'm already wrapping in document ready. i think the issue is that it's only listening for the the scroll and only acts on scroll.
Trigger the event which will fire your function
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
}).trigger("scroll");
Bind both events:
$(window).on('load scroll', function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
Something like this should work
$(function(){
$(window).scroll(function() {
$('#gototopwrap').toggle($(document).scrollTop() > 100);
});
if($(document).scrollTop() > 100)
{
$('#gototopwrap').toggle();
}
});
I would like to trigger an event with jQuery when the scroll bar is not at the top of the document. So far I can only get this to work when it's at the top of the document. "!==" does not seem to work.
$(document).ready(function() {
if($(window).scrollTop() === 0) {
alert("top!")
};
});
Try this:
$(document).ready(function() {
$(window).scroll(function() { /* or whatever element you want to attach to */
if($(window).scrollTop() === 0) {
alert("top!")
};
});
});
Of course, this will trigger every time you scroll to the top, which may not be what you want.
You need to use the .scroll() event
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() !== 0) {
alert("not top!")
};
});
});
http://jsfiddle.net/EX2q2/