I got a little Icon on my page which should fade in when I am on the top of my page. When I scroll down a bit, it should fade out. But when i go back up again, it reappears. I thought that should work with this code:
if ($(document).scrollTop() === 0){
$('#down').fadeIn(200);
console.log("Hi");
}
else{
$('#down').fadeOut(200);
console.log("Bye");
}
but obviously it doesn't. Here's a little codepen
You need to add it inside onscroll functionality. For example:
$(window).scroll(function(){
});
or
$( "#down" ).scroll(function() {
});
Related
Can someone help me turn my code into one that will animate the scroll. I've been researching and trying to do it myself but I'm obviously not doing something correctly.
Here is my JS:
$(function() { //When the document loads
$(".jrm-menu-whyus > a").bind("click", function() {
$(window).scrollTop($("#menu-jrm").offset().top);
return false;
});
});
Thanks!
It works fine, just want to animate the scroll.
Use jQuery.animate():
$("html, body").animate({scrollTop: $("#menu-jrm").offset().top});
jQuery.animate documentation
I have a tooltip that appears when you mouseover a link. I want the tooltip to stay if you hover over it (because there are links and such in it), or disappear if you mouse away from the link.
I tried a couple things, but haven't figured it out. This is my first time building anything serious with jQuery.
The stuff below is what is in the .hover() 'handlerOut' event.
if($(this.a).mouseout())
{
if ($('.tip_container').hover()) {
$('.tip_container').css('display', 'block');
$('.tip_container').mouseleave(function() {
$('.tip_container').remove(0);
});
} else if ($('.tip_container').hover() == false && $(this.a).mouseoff() == true)
{
$('.tip_container').remove(0);
}
}
>>"this.a" refers to the link<<
With this and the other things I've tried the tooltip doesn't disappear unless you mouse over the off of it. I also tried
else if (!$('.tip_container').hover() && $(this.a).mouseoff()) {
Is it possible to have multiple conditions?
The main idea of the code is that if you mouse off of the link "this.a" the tooltip will be removed by:
$('.tip_container').remove(0);
but if you mouse over the tooltip it will not be removed until you mouse off of the tooltip.
Do you have a fiddle or anything to demonstrate?
Maybe something like
$(this, '.tip_container').hover(function () {
$('.tip_container').show();
}, function () {
$('.tip_container').hide();
}
);
Basically bind both the link and the tooltip elements to the hover method, which hides/shows the tooltip element on mouseenter/mouseleave. The link Pointy posted in comments is a good place to start
After a good nights rest and ignoring it for a while I figured out a solution. This is what I put in the hover handlerOut event.
var timer;
timer = setTimeout(function() {
$('.tip_container').remove();
}, 500);
$( '.tip_container' ).hover(
function() {
clearTimeout(timer);
$('.tip_container').css('display', 'block');
}, function() {
$('.tip_container').remove();
}
);
On the hover out of the link it will wait before executing the remove and if the mouse hovers over the tooltip it will clear the timer and set the tooltip to block to keep it displayed then on that hover out of the tooltip it will be removed.
I have a dropdown navigation where I want to slide up and down a dropdown which works fine, what I've found however is that if I hover over the link quickly the nav links dont disappear, I've tried adding stop(true,true) etc but with no success. Can anyone advise on how I can resolve this?
Fiddle: http://jsfiddle.net/9QdhN/3/
JS
mouseleave: function() {
if( !isActive ) {
inner.stop(true,true).fadeOut('fast', function(){
if (topLevelLinks.children('.sub-nav').filter(":visible").length === 0) {
subNav.stop(true,true).slideUp();
}
});
}
}
});
You don't need the isActive variable, jQuery does this for you in the stop() method.
Here's the fixed code: http://jsfiddle.net/9QdhN/7/
I'm using the fancybox plugin without image resizing by window height. The gallery images are the right resolution with a height about 800-2000px. So user should scroll every picture in the stack. To make it easier I decided to insert a scrollToTop button. But it didn't work, because fancybox somehow blocks the scroll event. I just tried recreating the scroll event by doing:
$(window).scroll(function() {
alert('Scroll');
});
But it didn't work either.
I guess you should initialize your scrollToTop button within a fancybox (afterShow) callback like :
afterShow: function() {
$("#scrollButtonID").on("click", function() {
$(".fancybox-overlay").scrollTop(0); // or whatever value
});
}
Notice that instead of targeting $(window) we are actually moving to the top of the fancybox overlay $(".fancybox-overlay")
See this jsfiddle
In my DEMO I set the button as an appended element of the fancybox overlay but you could set it as the title of fancybox too. For a smoother transition you could animate the scroll event, but that is cosmetic ;)
You can also use vanilla javascript for this:
window.onscroll = function () {
alert('Scroll');
}
Try binding with .on()?
$(document).on('scroll', function() {
alert('Scroll....');
});
FancyBox - jQuery Plugin
Version: 1.3.4 (11/11/2010)
line from 1073 to 1083, i disable part of code
/*if ($.fn.mousewheel) {
wrap.bind('mousewheel.fb', function(e, delta) {
if (busy) {
e.preventDefault();
} else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
e.preventDefault();
$.fancybox[ delta > 0 ? 'prev' : 'next']();
}
});
}*/
I want to show and hide a piece of code if i scroll and the page is for example half way, i have tried to use window scroll but this doesnt works(no errors, clean code, different browsers, different jQuery versions), but this doesn't trigger anything, so i am looking for a better way to show and hide a div if i scrolldown.
used this to trigger an event(not working)
$(window).scroll(function(){
alert('works')
});
Try using the window.onload function (that's how they use it in jQuery examples):
window.onload = (function(){
$(window).scroll(function () {
if( $(window).scrollTop() > 200 ) {
// Display something
}
})
})