So I have this function to prevent the body scrolling when the sidebar is hovered.
The problem is, I can't get the mouseout function to work properly.
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(document).ready(function (){
$(".sidebarholder, .commentswrapper").hover(function (){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
})
My question is, how do I unbind it on the mouseout?
If I do this, it just stops working altogether.
$(".sidebarholder, .commentswrapper").mouseout(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
jQuery's hover() has built in "hover off", which might be helpful:
$(".sidebarholder, .commentswrapper").hover(
function (){ // hover over
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
},
function (){ // hover off
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
}
)
http://api.jquery.com/hover/
Have you tried
$(document).ready(function () {
$(".sidebarholder, .commentswrapper").hover(function () {
currentScroll = $(window).scrollTop();
$(window).bind('scroll', lockscroll);
}, function () {
currentScroll = $(window).scrollTop();
$(window).unbind('scroll');
})
})
Related
I created this slider and I want to mouse over action on numbers jquery but I can't seem to get it to work, Does anyone know how I can achieve this? Every time I tried something it seemed to break the slider.
thanks
jsfiddle version: http://jsfiddle.net/BijanZand/cmqkc59b/
Here is the current code:
function tabsrotate() {
$("#slider_a, #slider_b").tabs({
show: function (event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top);
}
$(ui.panel).hide().fadeIn(1500);
if (lastOpenedPanel) {
lastOpenedPanel.toggleClass("ui-tabs-hide").css("position", "absolute").css("top", "0").fadeOut(1500, function () {
$(this).css("position", "");
});
}
$(this).data("lastOpenedPanel", $(ui.panel));
}
}).tabs('rotate', 7777, true);
}
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
});
You can attach a mouseover event to your anchor using jQuery and inside this event trigger the anchor click:
Your $(document).ready will look like this:
$(document).ready(function () {
tabsrotate();
$('.tabnavigation').css("display", "inline");
$('.tabnavigation li a').mouseover(function(){
$(this).click();
});
});
i have made a rotating slider in javascript and css. Javascript function makes it rotating. When i first time load the page it works fine but when i navigate to some other page and then return back, the js function is called but the slider does not stop rotating on mouse hover. I have made a js function that when mouse hovers on div the rotation stop, when it leaves the function is called again.Here is my js code
var timer;
window.onload = function()
{
myTimer();
};
var $i=1;
function myTimer(){
timer=setInterval(function(){
if($i<6){
closeTab();
openTab($i);
$i++;
}
else
{$i=1;}
},2000);
}
closeTab();
var selectedSlider ;
function closeTab()
{
var $this = $('#accordion > li');
//$width=$(window).width();
//$this.stop().animate({'width':'110px'},500);
$this.stop().animate({'width':'7%'},500);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
function openTab(id)
{
var $this = $('.bg'+id);
//$this.stop().animate({'width':'450px'},500);
$this.stop().animate({'width':'70%'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
}
openTab(1);
$(function() {
$('#accordion > li').hover(
function () {
console.log("in mouse hover");
var $this = $(this);
selectedSlider = $this.attr("class").replace("bg", "");
closeTab();
openTab(selectedSlider);
clearInterval(timer);
},
function () {
}
);
});
$('#accordion > li').mouseleave(function(){
console.log("in mouse leave");
myTimer();
});
As #David said browser was caching the javascript, so your code for hover effect is not work as you put it in such a way, that when js file will call then hover event is fire but here js file is already cached.
You may try this, instead of using hover function anonymously put it inside window.onload.
I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.
Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle
You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.
How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/
I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....