I am hiding my address bar, in Safari on an iPhone using this script:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
The problem is if the page doesn't fully load and the user scrolls down, when it finishes loading it shoots back up again. I want to make this more defensive, so when a user moves the phone and clears the address bar themselves, it will not do it again.
This was my attempt which didn't work:
window.addEventListener("load",function() {
setTimeout(function(){
if(window > 1){
}
else
{
window.scrollTo(0, 1);
}}, 0);
});
Just in case anyone says I was going to do a if(!window ... and take out the else but wanted to keep it like this for testing purposes, marks out the possibility of me writing it wrong.
Any ideas?
Use document.body.scrollTop instead of simply window:
window.addEventListener("load",function() {
setTimeout(function() {
if (document.body.scrollTop > 1) {
// Do your testing here...
} else {
window.scrollTo(0, 1);
}
}, 0);
});
When you're done testing, you could collapse it all into 1 line:
window.addEventListener("load",function() {
setTimeout(function() {
document.body.scrollTop || window.scrollTo(0, 1);
}, 0);
});
Related
I have a problem regarding two animations, one scrolling down and one scrolling up (when the user has scrolled back up completely).
The animations block each other - with the following source code:
jQuery(document).ready(function($) {
$(window).on("load",function() {
$(window).scroll(function(){
if($(window).offset().top == 0){
$("selector").animate({}, 500);
$("selector").animate({}, 500);
} else {
$("selector").animate({}, 500);
$("selector").animate({}, 500);
}
});
}).scroll();
});
So it happens that after the true statement block of the if directly the else part is executed again and therefore the animation is partly not executed at all or both are executed one after the other. Does anyone have an idea that the animations are executed reliably:
else animation once as soon as scrolling down was done
if-Animation as soon as scrolling up completely again
Thanks in advance!
Makes no sense to cauculate $(window).offset().top since... it does what it says. 0.
Perhaps, on "scroll" Event you want to get the $(window).scrollTop()
jQuery($ => {
const $win = $(window);
const $items = $(".item");
$win.on("scroll", () => {
$items.toggleClass("active", $win.scrollTop() == 0);
});
$win.on("load", () => {
$win.trigger("scroll");
});
});
.active {
/* your styles here */
}
I am making a javascript/jQuery condition to make the header drop down once a user clicks a button ("Buy Now") only when they can't see the header (200px down). My problem is that when the user scrolls more than 200px even if they scroll back up the code still exectues. Here is my code, thanks.
$(function() {
$(document).scroll(function() {
var y = $(window).scrollTop();
console.log(y);
if (y >= 200) {
$('.product__add-to-cart-button').click(function() {
// your statements;
$(".site-header").addClass("site-header--fixedd").removeClass("site-header--transparent");
$("#crazy-pineapple, #coco-twist, #crunchy-joy, #nutty-chia").css('margin-top', 143);
setTimeout(function() {
$(".site-header__cart-bubble").removeClass("bubblenormal").addClass("bubblevisible");
}, 300);
setTimeout(function() {
$(".site-header__cart-bubble").removeClass("bubblevisible").addClass("bubblenormal");
}, 700);
setTimeout(function() {
$(".site-header").removeClass("site-header--fixedd");
$(".site-header").addClass("site-header--fixeddd");
}, 1200);
setTimeout(function() {
$("#crazy-pineapple, #coco-twist, #crunchy-joy, #nutty-chia").css('margin-top', 0);
$(".site-header").addClass("site-header--transparent");
$(".site-header").removeClass("site-header--fixedd");
$(".site-header").removeClass("site-header--fixeddd");
}, 1600);
});
}
});
});
There are a few big NO's in your code.
You should NEVER add a event handler in a scroll/resize function! Why? Because you keep stacking them once you do the resizing/scrolling.
At the moment you apply multiply click events to .product__add-to-cart-button which I assume you don't want.
In addition there is no point to your scroll event at the moment. You can just create an if statement inside the click event if the scrollTop() is bigger than 200 and you can remove the scroll event all together.
In addition you must get the habit of caching objects if you plan to use them multiply times. Any object used more than once must be cached.
And here is how should your code look if we take in consideration all of the above remarks:
$(function() {
var $win = $(window);
var $siteHeader = $(".site-header");
var $siteHeaderCartBuble = $(".site-header__cart-bubble");
var $group = $("#crazy-pineapple, #coco-twist, #crunchy-joy, #nutty-chia");
$('.product__add-to-cart-button').on('click',function() {
if ($win.scrollTop() <= 200) {
return false
};
$siteHeader
.addClass("site-header--fixedd")
.removeClass("site-header--transparent");
$group.css('margin-top', 143);
setTimeout(function() {
$siteHeaderCartBuble
.removeClass("bubblenormal")
.addClass("bubblevisible");
}, 300);
setTimeout(function() {
$siteHeaderCartBuble
.removeClass("bubblevisible")
.addClass("bubblenormal");
}, 700);
setTimeout(function() {
$siteHeader
.removeClass("site-header--fixedd")
.addClass("site-header--fixeddd");
}, 1200);
setTimeout(function() {
$group.css('margin-top', 0);
$siteHeader
.addClass("site-header--transparent")
.removeClass("site-header--fixedd")
.removeClass("site-header--fixeddd");
}, 1600);
});
})
this script runs at the beginning of a website. If the user starts scrolling, some css animations start. After the classes are added (this all works so far), I want an auto-scroll to the next anchor.
The hasClass("makeVisible") == true part also works, but after scrolling to my anchor I can't scroll anymore. The page sticks.
Anybody an idea? Thanks in advance!
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$('.navBg').addClass('activate');
$('.logo h2').addClass('removeText');
$('.logo').addClass('animate');
$('.secondTitle').addClass('maker');
setTimeout(function() {
$('.animate').addClass('moveLeft');
}, 500);
setTimeout(function() {
$('.maker').addClass('makeVisible');
}, 700);
if ($('.maker').hasClass("makeVisible") == true) {
$('html, body').delay(300).animate({
scrollTop: $('#secondPoint').offset().top
}, 2000);
} else {}
} else {
$('.animate').removeClass('moveLeft');
$('.navBg').removeClass('activate');
$('.logo h2').removeClass('removeText');
$('.logo').removeClass('animate');
$('.maker').removeClass('makeVisible');
$('.secondTitle').removeClass('maker');
}
});
});
I'm hoping a Javascript wiz can help a fellow citizen out with resolving a problem. I've a fairly straight forward function. When I scroll down by 1px I would like to apply a bounceDown class, this will run for 5 seconds and the class will then disappear for future running of the same function.
When I scroll up from that current scroll position I would like the bounceUp effect to apply. However the issue is I think the bounceUp effect only works once you scroll past the original scroll but in addition to this if the previous function is still running on it's 5 second transition then it gets jumpy as it's trying to run two classes at the same time so there almost needs to be a delay applied.
Does anyone think they can help, I'd gratefully appreciate it.
<script>
(function($){
$.fn.extend({
addTemporaryClass: function(className, duration) {
var elements = this;
setTimeout(function() {
elements.removeClass(className);
}, duration);
return this.each(function() {
$(this).addClass(className);
});
}
});
})(jQuery);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$(".spanner").addTemporaryClass("BounceDown", 5000);
}
else if (scroll <= 1) {
$(".spanner").addTemporaryClass("BounceUp", 5000);
}
});
</script>
What about a boolean variable that is 'true' when addTemporaryClass is running? So:
(function($){
var classAdded = false; //New
$.fn.extend({
addTemporaryClass: function(className, duration) {
classAdded = true; //New
var elements = this;
setTimeout(function() {
elements.removeClass(className);
classAdded = false; //New
}, duration);
return this.each(function() {
$(this).addClass(className);
});
}
});
})(jQuery);
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1 /*New*/ && !classAdded /*New*/) {
$(".spanner").addTemporaryClass("BounceDown", 5000);
}
else if (scroll <= 1 /*New*/ && !classAdded /*New*/) {
$(".spanner").addTemporaryClass("BounceUp", 5000);
}
});
Please take a look at this website
I'm trying to implement two arrows on top and bottom of the gallery so when people mouse over the arrows, the content would scroll top and bottom respectively.
Here is the code I'm currently using that scrolls the content down when you hover over the bottom arrow. But there are two issues with it:
I want the scrolling to stop when the user mouses off
Hopefully do not display the arrow(s) if there is no more content left to scroll
if ( $("body").hasClass('projects') ) {
$("#jig1").height($(document).height() - 187);
$("#scroll-to-bottom").hover(
function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
},
function () {
}
);
}
Can anyone offer an improved solution?
Answer to the seccond question.
Add the inner wrapper to the divs blocks
Html should look like this
<div id="jig1">
<div id="jig1Inner">
... here put rest of the code
if ($("body").hasClass('projects'))
{
$("#jig1").height($(document).height() - 187);
var watchScrollers = function()
{
var tmp = $("#jig1Inner").height() - $("#jig1").height();
if (tmp == $("#jig1").scrollTop())
{
$("#scroll-to-bottom").css("visibility","hidden");
}
else
{
$("#scroll-to-bottom").css("visibility","visible");
}
if ($("#jig1").scrollTop() == 0)
{
$("#scroll-to-top").css("visibility","hidden");
}
else
{
$("#scroll-to-top").css("visibility","visible");
}
}
$("#scroll-to-bottom").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: $("#jig1Inner").height() - $("#jig1").height()}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
$("#scroll-to-top").unbind("hover").hover(function() {
$("#jig1").stop().animate({scrollTop: 0}, 10000);
}, function() {
$("#jig1").stop(); //stops the animation
watchScrollers();
});
watchScrollers();
}
Try this:
$("#scroll-to-bottom").mouseover( function () {
$("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});
$("#scroll-to-bottom").mouseout( function () {
$("#jig1").stop()
});