Problems with mouseover and mouseout events in a continuous jQuery content slider - javascript

I have tried to built a continuous content slider in jQuery.
If you don't hover over it, then it works fine, it slides (even though I feel like I made it happen in a wrong way).
When you hover it then it stops, but only for 2 seconds. As you'd imagine, it should stay stopped until the cursor is removed. Maybe the interval is not cleared properly?
Generally the whole thing works improperly when you starts to hover/unhover.
Here's a demo of my plugin: http://jsfiddle.net/T5Gt3/
(function ($) {
$.fn.productSlider = function(options) {
var defaults = {
speed: 2000
};
var config = $.extend(defaults, options);
this.each(function() {
var $this = $(this),
$scrollable = $this.find('#content-product-slider-inner'),
timeLeft;
function animateScrollable() {
$scrollable.animate({ left: '-120px' }, config.speed, 'linear', function() {
$scrollable.css({ left: '0px' }).find('a:first-child').remove().appendTo($scrollable);
});
};
animateScrollable();
var timer = setInterval(animateScrollable, config.speed);
$scrollable.mouseover(function() {
$scrollable.stop();
clearInterval(timer);
});
$scrollable.mouseout(function() {
animateScrollable();
var timer = setInterval(animateScrollable, config.speed);
});
});
return this;
};
})(jQuery);
Any help would be greatly appreciated.

$(".event_list_inner_wrapper").live({
mouseenter: function () {
$(this).find('.front_side').fadeOut(600).hide();
$(this).find('.back_side').fadeIn(600).show();
},
mouseleave: function () {
$(this).find('.back_side').fadeOut(600).hide();
$(this).find('.front_side').fadeIn(600).show();
}
});
That's code I used for a project that was similar to your description. Basically, bind the mice events, and do your thing.

Related

Delay before dragging in gridster

I'm using gridster.net in project, and i've run into problem.
I'm trying to get widgets start dragging only after a second of holding mouse after click. I'm using the next code:
$(".gridster .gs-w").on('mousedown', function(e) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
}, 500);
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
but it didn't work. It seems that i have to call function of starting dragging, something like gridsterObj.on_start_drag.call(gridsterObj, e, ui);, but where can i get the UI object? It's used everywhere in gridster code, but i can't find where it created.
It seems that it jquery UI object. How can i create it?
You should be able to reference the UI object as $.ui or window.jQuery.ui.
So your code should look like this:
$(".gridster .gs-w").on('mousedown', function(e) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
gridsterObj.on_start_drag.call(gridsterObj, $.ui);
}, 500);
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
I've ended with the next code:
$(".gridster .gs-w").on('mousedown', function(e, data) {
var self = this;
if (!data || !data.start) {
gridsterObj.disable();
dragTimeout = setTimeout(function() {
gridsterObj.enable();
$(self).trigger(e, [{ start: true }]);
}, 500);
} else {
$(self).addClass('dragging');
}
}).bind('mouseup mouseleave', function() {
clearTimeout(dragTimeout);
});
With that, gridster has delay 0.5 second before starting dragging.

How do I trigger a click when hovering over a element for x seconds, using JQuery?

I know that question have been asked, and answered here already, but setting a timer works with hover() function.
As my element is dynamically created, it requires two different functions : one on mouseenter, and the other one on mouseleave.
Anyone have an insight on this particular need ?
PS : I know there's a plugin called hoverIntent, but I don't want to use any plugin !
Try
$(document).on({
mouseenter: function () {
var $this = $(this);
var timer = setTimeout(function () {
$this.click();
}, 2000)
$this.data('clicktimer', timer)
},
mouseleave: function () {
clearTimeout($(this).data('clicktimer'))
}
}, '#test');
Demo: Fiddle
Something like this ?
$('.myelement').on('mouseenter', function(e) {
var element = $(this),
ctx = null,
timeout = 2000;
ctx = setTimeout(function() {
element.trigger('click');
clearTimeout(ctx);
}, timeout);
});

some issues with mouseenter and mouseleave functions

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

jQuery tool tip on hover

I am in need of a very lightweight tooltip similar to the 1 found here http://www.history.com/videos when you hover a video link under "Popular Videos", a tooltip fades into place, it stays there and you can even select text on it until you move the cursor off it. Facebook and Google+ also have a similar style tool-tip as well as stackoverflow when you hover over a tag. Can someone provide a light weight method of doing this.
I have search and looked at many existing "plugins" they are all somewhat bloated though. Thanks for any help
Here's a pretty simple way you could accomplish this:
var timeout;
function hide() {
timeout = setTimeout(function () {
$("#tooltip").hide('fast');
}, 500);
};
$("#tip").mouseover(function () {
clearTimeout(timeout);
$("#tooltip").stop().show('fast');
}).mouseout(hide);
$("#tooltip").mouseover(function () {
clearTimeout(timeout);
}).mouseout(hide);
Where #tip is the element you want to mouseover to make the tooltip appear, and #tooltip is the actual tooltip element.
Here's an example: http://jsfiddle.net/pvyhY/
If you wanted to wrap this in a jQuery plugin:
(function($) {
$.fn.tooltip = function(tooltipEl) {
var $tooltipEl = $(tooltipEl);
return this.each(function() {
var $this = $(this);
var hide = function () {
var timeout = setTimeout(function () {
$tooltipEl.hide();
}, 500);
$this.data("tooltip.timeout", timeout);
};
/* Bind an event handler to 'hover' (mouseover/mouseout): */
$this.hover(function () {
clearTimeout($this.data("tooltip.timeout"));
$tooltipEl.show();
}, hide);
/* If the user is hovering over the tooltip div, cancel the timeout: */
$tooltipEl.hover(function () {
clearTimeout($this.data("tooltip.timeout"));
}, hide);
});
};
})(jQuery);
Usage:
$(document).ready(function() {
$("#tip").tooltip("#tooltip");
});
Add more functionality and you'll eventually end up with the excellent qTip plugin, which I recommend taking a look at as well.

Implementing Hover Intent

I just finished developing this Wordpress theme:
http://www.minnesdiner.com/
Everything is working well, but I'm not 100% happy with the navigation.
The sliding position indicator works smoothly, but I'd like to integrate the hover intent jQuery plugin to prevent the sliding indicator from sliding when the user unintentionally passes over the nav.
Any ideas as to how I could integrate this plugin? I'm currently firing a separate jQuery function for each nav item and passing coordinates to the sliding indicator based on which item is being hovered upon.
Here's my current jQuery code:
$(document).ready(function() {
var $currentpos = $("#menu-indicator").css("left");
$("#menu-indicator").data('storedpos', $currentpos);
$(".current-menu-item").mouseenter(function () {
$("#menu-indicator").stop().animate({left: $currentpos}, 150);
});
$(".menu-item-26").delay(500).mouseenter(function () {
$("#menu-indicator").stop().animate({left: "52px"}, 150);
});
$(".menu-item-121").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "180px"}, 150);
});
$(".menu-item-29").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "310px"}, 150);
});
$(".menu-item-55").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "440px"}, 150);
});
$(".menu-item-27").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "570px"}, 150);
});
$(".menu-item-164").mouseenter(function () {
$("#menu-indicator").stop().animate({left: "760px"}, 150);
});
$delayamt = 400;
$("#header-row2").click(function () {
$delayamt = 5000;
});
$("#header-row2").mouseleave(function () {
$("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600);
});
});
As you can see, I need to bind mousover and mouseout to separate elements (list-item and containing div).
Thanks!
If all you want to do is avoid the user triggering the slide by mousing over the nav, I would just setTimeout in your hover function to call your sliding code after a certain amount of time has passed, and clear the timeout on the mouseout event. No extra plugin needed.
For example:
var hover_timer;
$('.menu-item').hover(
function() {
hover_timer = setTimeout(function() {
...
}, 500);
},
function() { clearTimeout(hover_timer); }
);
EDIT: by the by, you should be combining all those hover functions into one. You can do something like:
$('.menu-item-26').data('slider-pos', '52px');
$('.menu-item-121').data('slider-pos', '180px');
...
And then in the code to slide, call it back:
$this = $(this);
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150);
And that's just a start - you can generalize it even more, I bet.

Categories

Resources