We Keep Coding

fadeOut on scroll at pixel height

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

backtotop.js bug: box is always visible in Firefox 29

// JavaScript Document
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
This should hide the box until you have scrolled to about 100px from the top. It does work in every browser until the latest Firefox update came out. Any suggestions why that is?
Check the box on the lower left corner on this site: http://lightningsoul.com

Problem had nothing to do with FF29 but with the implementation of the JavaScript.
I had to add a leading / in order to implement it for pages like http://lightningsoul.com/media/vid/1934 etc.

Object; Block. Function; Hover it makes a slidedown. Hover out the slidedown, doesn't hide it. (pre-structured script)

I'm rushing on something for the moment.
The object is a shopping cartblock, which, when hovered, shows the content of the cart by a slidedown object.
When you hover out the cartblock, it slides up, that's good. But when I hover out the slidedown object, nothing is happening, which is pretty frustrating for a customer.
I tried many variations of the code below but seems I can't point it.
PS: I'm new to JavaScript, clear and complete explanation will be GREATLY appreciated.
$(document).ready(function(){
// expand/collapse management
$('#block_cart_collapse').click(function(){
ajaxCart.collapse();
});
$('#block_cart_expand').click(function(){
ajaxCart.expand();
});
ajaxCart.overrideButtonsInThePage();
ajaxCart.refresh();
/* roll over cart */
var cart_block = new HoverWatcher('#cart_block');
var shopping_cart = new HoverWatcher('#shopping_cart');
$("#shopping_cart a:first").hover(
function() {
$(this).css('border-radius', '3px 3px 0px 0px');
if (ajaxCart.nb_total_products > 0)
$("#cart_block").stop(true, true).slideDown(800);
},
function() {
$('#shopping_cart a').css('border-radius', '3px');
setTimeout(function() {
if (!shopping_cart.isHoveringOver() && !cart_block.isHoveringOver())
$("#cart_block").stop(true, true).slideUp(800);
}, 200);
}
);
$("#cart_block").hover(
function() {
$('#shopping_cart a').css('border-radius', '3px 3px 0px 0px');
},
function() {
$('#shopping_cart a').css('border-radius', '3px');
setTimeout(function() {
if (!shopping_cart.isHoveringOver())
$("#header #cart_block").stop(true, true).slideUp(450);
}, 200);
}
);
$('.delete_voucher').live('click', function() {
$.ajax({url:$(this).attr('href')});
$(this).parent().parent().remove();
if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
{
if (typeof(updateAddressSelection) != 'undefined')
updateAddressSelection();
else
location.reload();
}
return false;
});
});

Remove the second function declaration in your .hover handler. Like this:
$("#shopping_cart a:first").hover(
function() {
$(this).css('border-radius', '3px 3px 0px 0px');
if (ajaxCart.nb_total_products > 0)
$("#cart_block").stop(true, true).slideDown(800);
// LINE REMOVED //
$('#shopping_cart a').css('border-radius', '3px');
setTimeout(function() {
// THIS LINE WILL DISPLAY A POPUP IF THE TIMEOUT IS CALLED //
alert("IF YOU SEE THIS, .isHoveringOver() is the problem");
if (!shopping_cart.isHoveringOver() && !cart_block.isHoveringOver())
$("#cart_block").stop(true, true).slideUp(800);
}, 200);
}
);

Thanks for the trick #Askanison4,
I added the proposed line and sadly, isHoveringOver IS the issue; the pop-up appears.
But, instead of hoverout, I found a good workaround which is the following;
$(document).click(function() {
$('#cart_block').fadeOut(300);
});
So, at least, customers can click out to close the slidedown object, pretty less annoying.
I will keep this post opened as if someone finds a solution to the hover out issue, but I'm quite satisfied for the moment.
Thanks again !!!

Div does not slide back up on click / JS

I'm having a small problem, i cant seem to solve.
I'm having a problem with the functionality of my animated function. When the div is clicked, it slides perfectly down, but when i click again on the div, it won't slide back up.
Thats the code i use....
$("#menu").click(function () {
if($(this).offset().bottom == -40) {
$(this).animate({'bottom': '0px'}, 1000);
}
else {
$(this).animate({'bottom': '-40px'}, 1000);
}
});
However, it works perfectly fine, when my div is positioned on top,left or right of my page, rather on bottom? Thats something i dont understand... but i must say, i'm rather new to Js.
I've set up a jsFiddle here... http://jsfiddle.net/JmLqp/438/
Any suggestions?
Thanks, B

Changed the JS to check for the div's bottom value, and animate from that. Fiddle
$("#menu").click(function () {
if($(this).css('bottom') == '-40px') {
$(this).animate({'bottom': '0px'}, 1000);
}
else {
$(this).animate({'bottom': '-40px'}, 1000);
}
});

It looks like you aren't getting the right value out of $(this).offset().bottom. You could do this instead:
var status = "up"
$("#menu").click(function () {
if(status == "up") {
status = "down"
$(this).animate({'bottom': '100px'}, 1000);
}
else {
$(this).animate({'bottom': '-30px'}, 1000);
status = "down"
}
});

Help needed Pausing/Resuming FadeIn and FadeOut

Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?

I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});

Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});