We Keep Coding

Shopify javascript/jQuery condition for scrollTop not working

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);
});
})

Scroll to anchor after Scrolling

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');
}
});
});

Cannot Read Property CSS of Undefined?

var random;
var squareArray = [$('#square1'),$('#square2'),$('#square3'),$('#square4')];
var randomOrder = [];
var i = 0;
var j = 0;
function computerPlays() {
random = Math.floor(Math.random() * 4);
randomOrder.push(random);
makeSquareBlink();
userPlays();
}
function makeSquareBlink() {
setTimeout(function() {
var randomSquare = squareArray[randomOrder[i]];
randomSquare.css('opacity', '0.5');
setTimeout(function() {
randomSquare.css('opacity', '1');
}, 300);
i++;
if (i < randomOrder.length)
makeSquareBlink();
}, 500);
}
function userPlays() {
$('#square1').on('click', function() {
if (randomOrder[j] === 0) {
$('#square1').css('opacity', '0.5');
setTimeout(function() {
$('#square1').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
$('#square2').on('click', function() {
if (randomOrder[j] === 1) {
$('#square2').css('opacity', '0.5');
setTimeout(function() {
$('#square2').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
$('#square3').on('click', function() {
if (randomOrder[j] === 2) {
$('#square3').css('opacity', '0.5');
setTimeout(function() {
$('#square3').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
$('#square4').on('click', function() {
if (randomOrder[j] === 3) {
$('#square4').css('opacity', '0.5');
setTimeout(function() {
$('#square4').css('opacity', '1');
}, 300);
}
else {
$('#counter').text('!!');
makeSquareBlink();
}
});
}
function reset() {
randomOrder = [];
i = 0;
}
$('button').click(function() {
reset();
computerPlays();
});
Why it isn't possible to change the css property of randomSquare variable in makeSquareBlink function? Is there any way to do it? Edit #001: Added the full code now Still not working help. Man stackoverflow wants more details wth should I type more ? FTHISS hit FML Fk everything letme post it bro. YOu're my last hope ://

I guess the goal of the game is to click the same square like the computer before. Right?
One problem with your code is that makeSquareBlink() increases i by one when the computer plays. Then when the user plays and hits the wrong square inside makeSquareBlink() you try to access randomOrder[i] which is in fact calling randomOrder[1] which returns undefined as randomOrder only contains one element so far. Thus squareArray[randomOrder[1]] gives back undefined and undefined.css(...) is the error you get.
You may fix it by adding a param to your makeSquareBlink() method so that it reads
function makeSquareBlink(p) {
setTimeout(function() {
var randomSquare = squareArray[randomOrder[p]];
randomSquare.css('opacity', '0.5');
setTimeout(function() {
randomSquare.css('opacity', '1');
}, 300);
p++;
if (p < randomOrder.length)
makeSquareBlink(p);
}, 500);
}
And then inside computerPlays you call it with i as param and inside userPlays with j. Haven't tested it but I don't want to solve your homework completely ;)
Also rethink the event listener attachment inside userPlays() as this will attach click listeners each time the method is called. I guess that's not what you want. Maybe try jQuerys one() method here. Or better restructure your code so that the click-listeners are attached only once.
BTW here a fiddle that helped me debug your code: https://jsfiddle.net/hm69ff0a/

does jQuery stop() work on custom functions?

There are three images that I have made a tooltip for each.
I wanted to show tooltips within timed intervals say for 2 seconds first tooltip shows and for the second interval the 2nd tooltips fades in and so on.
for example it can be done with this function
function cycle(id) {
var nextId = (id == "block1") ? "block2": "block1";
$("#" + id)
.delay(shortIntervalTime)
.fadeIn(500)
.delay(longIntervalTime)
.fadeOut(500, function() {cycle(nextId)});
}
now what i want is to stop the cycle function when moseover action occurs on each of the images and show the corresponding tooltip. And again when the mouse went away again the cycle function fires.

If I understand everthing correctly, than try this code. Tt stops the proccess if you hover the image and continues if you leave the image. The stop() function will work on custom functions if you implement them like the fadeOut(), slideIn(), ... functions of jquery.
$('#' + id)
.fadeIn(500, function () {
var img = $(this).find('img'),
self = $(this),
fadeOut = true;
img.hover(function () {
fadeOut = false;
},
function () {
window.setTimeout(function () {
self.fadeOut(500);
}, 2000);
}
);
window.setTimeout(function () {
if (fadeOut === false) {
return;
}
self.fadeOut(500);
}, 2000);
});​

Sequentially fade in divs on coming into view with jQuery

I'm currently using jquery.inview to detect when certain elements are fully visible in the browser. I have this working correctly like so:
$('.exclusive').bind('inview',function(e, isInView, visiblePartX, visiblePartY) {
var elem = $(this);
if (elem.data('inviewtimer')) {
clearTimeout(elem.data('inviewtimer'));
elem.removeData('inviewtimer');
}
if (isInView) {
elem.data('inviewtimer', setTimeout(function() {
if (visiblePartY == 'top') {
elem.data('seenTop', true);
} else if (visiblePartY == 'bottom') {
elem.data('seenBottom', true);
} else {
elem.data('seenTop', true);
elem.data('seenBottom', true);
}
if (elem.data('seenTop') && elem.data('seenBottom')) {
elem.animate({ 'opacity' : 1}, 1000)
elem.unbind('inview');
}
}, 1000))
}
});
However, I want to amend this code slightly, so that when there are multiple matched elements in view, these are faded in sequentially with a slight delay between each. And of course when the user moves the viewport to bring more elements into view it will continue to do the same. Can anyone point me in the right direction?
Thanks,
Chris

You can delay fading in of particular elements like this:
var divs = $('div'); // replace with your selector
$.each(divs, function(i, item) {
setTimeout(function() {
$(item).fadeIn(1000);
}, 1000 * i);
});​
Check the live DEMO.