Animate some divs only once - javascript

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!

From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};

var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.

The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

Related

Header doesnt hide/show again after certain scroll

Hello Why does my Script not work?
I created two header, one should hide and the other show after 1980px of scroll which works!
But then i want it to hide and show again after 2500px so basicallythat its just like in the beginning with out any scroll anymore.
$(window).scroll(function() {
if ($(this).scrollTop()>1980)
{
$('#navBar').fadeOut();
}
else if ($(this).scrollTop()>2500)
{
$('#navBar').fadeIn();
}
else
{
$('#navBar').fadeIn();
}
});
i believe that for your second condition the first one is also true.so i think you can limit the first one like this.in other words you need to make a more specific condition
$( document ).ready(function() {
console.log( "ready!" );
$(window).scroll(function() {
var scrollTop = $(this).scrollTop()
if (1980<scrollTop && scrollTop<2500)
{
console.log("firstPoint");
}
else if (2500<scrollTop && scrollTop<3000)
{
console.log("secondPoint");
}
else {
console.log("thirdPoint");
}
});
});

Changing element styles following scrolling from the top

I'm trying to apply a different style to the header whenever you scroll down from the top. Basically I want it so that if you are scrolled at the top then apply style 1, but if you are not scrolled at the top then apply style 2.
I have tried using a while and for loop to achieve this but both failed. The jQuery example below did work but for some reason not on this example. However I would rather use JavaScript than jQuery since I am learning JavaScript.
Can someone advise me what should I use for this: a while or if statement? And can someone tell me what I have done wrong with my attempts?
Thanks for any help.
// ATTEMPT 1
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
while (h > 0) {
headerWrap.addClass('scroll-opacity-change');
}
headerWrap.removeClass('scroll-opacity-change');
}
// ATTEMPT 2
/*
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
*/
/*
// ATTEMPT 3
var headerWrap = document.getElementById('header-wrap');
var h = headerWrap.scrollTop;
function changeHeaderOpacity() {
"use strict"; // wtf is this?
if (h > 0) {
headerWrap.addClass('scroll-opacity-change');
} else {
headerWrap.removeClass('scroll-opacity-change');
}
}
*/
body{
height:1000px;
}
#header-wrap{
height:100px;
width:100%;
background:#0f0;
}
.scroll-opacity-change{
background:#f00;
}
<div id="header-wrap">
</div>
Well first of all, you need to add listener to detect window scroll.
$(document).ready(function() {
$(window).scroll(function() {
//do the header styling using .style
});
});
Now you need to store the scroll log in few variables to figure out you are scrolling down or not, you can the following using this:
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop){
// You are down scrolling
} else {
// You are up scrolling
}
previousScroll = currentScroll;
Final code:
$(document).ready(function() {
previousScroll=0 //this means we are starting from top
$(window).scroll(function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > previousScroll){
// Change header style cause you are down scrolling
} else {
// Do something else? You are up scrolling anyway...
}
previousScroll = currentScroll;
);
});
I hope this helps, your comments are welcomed.
Use class instead of id;
<div class="header-wrap">
</div>
and
$(window).scroll(function() {
$('.header-wrap').addClass('scroll-opacity-change');
if($(this).scrollTop() <= 0) {
$('.header-wrap').removeClass('scroll-opacity-change');
}
});

If/Else Jquery Header animations

I am having some trouble with this one. I have the following javascript...
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 130) {
header.animate({height: '51px'}, 500);
mainNav.css("display", "none");
logo.fadeOut("fast");
scrollLogo.delay(300).slideDown("fast");
$(this).off('scroll');
}
else {
header.animate({height: '130px'}, 500);
}
});
I am trying to do a series of changes to my header when scrolled past 130 px and then return it to its original state if scrolled back up. Everything works fine if I comment out the else statement, but as soon as I start to add to it, everything breaks. I cannot figure out why. Any help is much appreciated.
My guess would be that you're repeatedly calling either the if or the else condition, whereas you just want to call them just once.
Try something like this:
var compactHeader = false;
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 130 && !compactHeader) {
compactHeader = true;
// Code to collapse header...
} else if (scrollPosition < 130 && compactHeader) {
compactHeader = false;
// Code to expand header...
}
});
As well as checking the scroll position we check whether the header is collapsed or expanded, to ensure the animation is only performed once.

Trying to trigger scroll event by using jquery.mousewheel

I'm having some trouble with triggering a scroll event by using jquery.mousewheel. I want to "expand" the scroll event for #bio-content-container to trigger when scrolling over #bio-slider-container.
I'm using following code:
var lastScrollTop = 0;
$("#bio-content-container").scroll(function () {
var st = $(this).scrollTop();
if (st > lastScrollTop){
scroll('Down');
} else {
scroll('Up');
}
lastScrollTop = st;
});
jQuery(function($) {
$('#bio-slider-container')
.bind('mousewheel', function(event, delta) {
$("#bio-content-container").trigger('scroll');
return false;
});
});
I don't want to trigger scroll on #bio-slider-container, so that's why I'm using mousewheel. Any help would be much appreciated :)
If I understand correctly, you want to scroll the contents of #bio-content-container when you use the mousewheel over #bio-slider-container. You might want to check out the jquery.scrollTo plugin. This code works for me (without seeing your HTML):
$(document).ready(function () {
$('#bio-slider-container').bind('mousewheel', function (event, delta) {
var content = $("#bio-content-container");
if (delta < 0) {
content.scrollTo("+=10");
} else {
content.scrollTo("-=10");
}
});
});

effect similar to infinite scroll for javascript/jquery

I want to achieve something similar to infinite scroll, but I want it to trigger when an element is in the viewable window rather than scroll position. Any ideas?
I have a few little static helper functions in a Utils class for occassions such as these:
Utils = {
underView: function(element) {
return (($(window).height() + $(window).scrollTop()) <= element.offset().top);
},
aboveView: function(element) {
return ($(window).scrollTop() >= element.offset().top + element.height());
},
inView: function(element) {
return (Utils.aboveView(element) !== true && Utils.underView(element, element.height()) !== true);
}
};
Implemented thusly:
$(window).scroll(function(){
if(Utils.inView($(".div"))){
// do something
}
});
You can use JQuery's offset() to see if an element is on screen or not:
http://api.jquery.com/offset/

Categories

Resources