How to detect scroll only once per user request. My first attempt looks like this:
$(window).bind('mousewheel', function(event) {
console.log("hello")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>
The problem with the above code is that when the user scrolls the function doesnt fires continuesly rather than just detecting it once and printing the console.log once.
My second attempt:
$(this).one('scroll', function(){
// scroll
console.log("hello")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>
The problem with the second attempt is that the function fires only one time unless the page is refreshed.
How can I make my second attempt better so that it detects more than one time without refreshing the page? If I scroll down I want hello to be displayed only once and when I scroll up again I want hello to be displayed once again
Set the scroll eventListener and then unbind it on scroll:
$(window).on("scroll", function(e){
console.log("only alerting once");
$(window).unbind("scroll");
});
var currentScrollTop = 0,
previousScrollDir = true;
$(this).scroll(function () {
var scrollTop = $(this).scrollTop();
if (scrollTop < currentScrollTop) {
if (!previousScrollDir) {
console.log('scrolled up');
previousScrollDir = true;
}
} else {
if (previousScrollDir) {
console.log('scrolled down');
previousScrollDir = false;
}
}
currentScrollTop = scrollTop;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<image src="https://www.setaswall.com/wp-content/uploads/2017/10/Beautiful-Wallpaper-1080x2160.jpg"></image>
Related
I would like to show the button when scroll up. My current script doing this but I have to scroll to the top, and then the button appears. Is there any possible to show the button just shortly after I scrolling up the page?
<script>
function showButton() {
var button = $('#my-button'), //button that scrolls user to top
view = $(window),
timeoutKey = -100;
$(document).on('scroll', function() {
if(timeoutKey) {
window.clearTimeout(timeoutKey);
}
timeoutKey = window.setTimeout(function(){
if (view.scrollTop() > 10) {
button.fadeOut();
}
else {
button.fadeIn();
}
}, 10);
});
}
$('#my-button').on('click', function(){
$('html, body').stop().animate({
scrollTop: 10
}, 10, 'linear');
return false;
});
//call function on document ready
$(function(){
showButton();
});
</script>
You should use offset().top instead of scrollTop()
I want to hide a div when the height of my iframe reaches a certain size without the page needed to be reloaded
<script>
jQuery(document).ready(function($){
if ($(".remove-text").height() <= 582) {
$("#execphp-31").hide();
} else {
$("#execphp-31").show();
};
});
</script>
This works on page load but if the iframe size changes it doesn't update the show/hide function
Try calling it on both window load and window resize.
$(window).on('resize', function() {
if ($(".remove-text").height() <= 582) {
$("#execphp-31").hide();
} else {
$("#execphp-31").show();
};
});
You need to bind the this code to both the window load and resize events.
$(function() {
$(window).bind("load resize", function() {
if ($(".remove-text").height() <= 582) {
$("#execphp-31").hide();
} else {
$("#execphp-31").show();
};
}
});
i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});
I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo
I am working with a script to scroll an element on click. It's working properly, however it either scrolls all the way up, or all the way down. I'm new to jquery, and I'm wondering how to make it scroll a little at at time. For example, clicking to scroll down once will take you down a certain length, clicking again scrolls that length again. Also, sometimes it jitters and bugs out when scrolling back up. Any insight on how to fix this is appreciated as well!
Thanks.
Code below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').click(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').click(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
</script>
You're saying you want to scroll little at a time but your code is saying scroll UNTIL mouse leaves. If you want to scroll little at a time why would you write a mouseleave which clearly stating if it's been scrolling stop now!
If you want to scroll up/down a bit on click, you should get rid of setInterval and mouseleave.
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5;
$('#scroll-up').click(function() {
// Scroll the element up
ele.scrollTop( ele.scrollTop() - scroll );
});
$('#scroll-down').click(function() {
ele.scrollTop( ele.scrollTop() + scroll );
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
}
});
});
jsfiddle
At my page, i have a few booleans in my script, to check if the first screen is activated, and the same thing for the second screen. Screen 1 fills up the whole screen.
It looks something like this:
var headerLoaded = true,
contentLoaded = false;
When i scroll, i want the page to scroll automaticly to the 'content' area of my webpage. And i had this code for it:
$(window).scroll(function() {
if (($(window).scrollTop() > 0) && (!contentLoaded && headerLoaded)) {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 500, function() {
contentLoaded = true;
headerLoaded = false;
});
}
});
It checks if im not at the top of the page, and for the 2 booleans.
The function works great, but it's still calling the
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 500, function() {
contentLoaded = true;
headerLoaded = false;
});
part when i'm scrolled down to the 'content' div.
So everytime i scroll when im at the 'content' div, its scrolling back to the top of that.
Btw, both of the div's are absolute.
So, the animate is calling your original $(window).scroll(...) over and over.
Try telling your main scroll listener not to start animating if its already animating.
var animating = false;
$(window).scroll(function() {
if (!animating && $(window).scrollTop() > 0 && !contentLoaded && headerLoaded) {
animating = true;
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 500, function() {
animating = false;
contentLoaded = true;
headerLoaded = false;
});
}
});
wait.. i just read it..
You're just locking the screen at the content... why animate at all?
The answer I was giving was saying the animating the scroll will also trigger the main scroll, resulting in an endless loop... but what are you trying to do in the first place?