I have a tooltip that can be seen below, at the moment it reveals the tooltip only on hover, but I want it to reveal the tooltip when both hovering and clicking (for touch screen devices) could somebody please show me how?
My JSFiddle
My javascript code
<script type="text/javascript">
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
</script>
You can create a function, let's call it activate:
function activate(that) {
//Your code here
}
and then use it like this:
$("ul.thumb li").hover(function() {
activate($(this));
});
$("ul.thumb li").click(function() {
activate($(this));
});
Note, that activate will hold the commands you need to process in those events. Also, in activate, try to make sure that you are using that instead of this.
First, refactor and rename your hover in and out function:
function showTooltip(){
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
// etc...
}
function hideTooltip(){
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
// etc...
}
Then instead of using the hover shorthand, use the mouseenter and mouseleave events to listen the hovering:
$("ul.thumb li")
.on('mouseenter', showTooltip)
.on('mouseleave', hideTooltip);
If you want to show the tooltip for touch events, just add the touchstart event to it: I guess you want to tap to both open and close the tooltip.
$("ul.thumb li")
.on('mouseenter touchstart', showTooltip)
.on('mouseleave touchstart', hideTooltip);
You can use jQuery .on() method to bind a handler to multiple events...
First of you need to name the two functions. Then you can use .on() as follows:
$("ul.thumb li").on('mouseover touchstart', show);
$("ul.thumb li").on('mouseleave touchend', hide);
Updated JSFiddle
Related
If I mouseover/mouseout very fast more than one time during animation times (here 900). Button is animating more than one time; even when I stopped mouse activity.
I want that it will take only one event for animation during animation times; even when multiple event triggered.
Other way I want to say if I triggered multiple mouseover event during 900 it will terminate immediately when I triggered mouseout and vice-versa.
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").animate({
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").animate({
width: "100%",
}, 900);
$(this).text("Show More");
});
});
Here's an JSFiddle to show you the behaviour
You need to use .stop()
Stop the currently-running animation on the matched elements.
Use
$(document).ready(function () {
$("button").mouseover(function () {
$(this).css({
background: 'transparent',
color: '#09F'
});
$("button").stop().animate({ //Here used stop
width: "110%",
}, 900);
$(this).text("Show More >");
});
$("button").mouseout(function () {
$(this).css({
background: '#09F',
color: '#FFF'
});
$("button").stop().animate({ //Here used stop
width: "100%",
}, 900);
$(this).text("Show More");
});
});
DEMO
Yes every time because you have some duration for example
$('somelemenent').animate({}, 400);
Your animation will stay in order if you hover element more quickly than your duration.
For this cases, you should set:
$('somelement').stop().animate(/* and your properties */);
Method .stop() stops all effects and orders which have connection with current element.
Use this : add another event after finishing previous one.
$(document).ready(function(){
$("button").mouseover(function() {
$( this ).css({background :'transparent',color : '#09F'});
$( "button").stop().animate({width: "110%",}, 900 );
$(this).text("Show More >");
}).mouseout(function() {
$( this ).css({background :'#09F',color : '#FFF'});
$( "button").stop().animate({width: "100%",}, 900 );
$(this).text("Show More");
});
});
I have some DIVs for products, and I have:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperContentVisible').animate({
height: '100px',
opacity: '1',
}, function(){
$(this).find('.productWrapperPrice').fadeIn();
$(this).find('.productWrapperByCompany').fadeIn();
});
});
// mouseleave
$(document).on('mouseleave', '.productWrapper', function(){
$(this).stop(true,true);
$(this).find('.productWrapperPrice').fadeOut('fast');
$(this).find('.productWrapperByCompany').fadeOut('fast');
$(this).find('.productWrapperContentVisible').animate({
height: '40px',
opacity: '.8',
});
});
and there are about 20 of products in each page, while I'm using stop(true,true), after I move my mouse on many of them many times, this doesn't work right, they continue to change height, and sometimes productWrapperPrice is still there while I don't have my mouse over there, it should go hidden.. .
sample: http://jsfiddle.net/gwsPB/
What's wrong with my code?
Thanks
Try this:
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, false).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, false).animate({
height: '40px',
opacity: '.8'
});
});
DEMO
The problem is: when you mouseenter and mouseleave immediately fast enough, your animate function in the mouseenter event is not finished yet. When your call $this.find('.productWrapperContentVisible').stop(true, true), the animation is stopped but the callback function is called which display them again
function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany')
.stop(true, true).fadeIn();
}
By using stop(true, false), the callbacks are not called.
You need to call stop() on elements where are being animated, calling it on an ancestor element has no effect.
// mouseenter
$(document).on('mouseenter', '.productWrapper', function () {
$(this).find('.productWrapperContentVisible').stop(true, true).animate({
height: '100px',
opacity: '1'
}, function () {
$(this).find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeIn();
});
}).on('mouseleave', '.productWrapper', function () {
var $this = $(this);
$this.find('.productWrapperPrice, .productWrapperByCompany').stop(true, true).fadeOut('fast');
$this.find('.productWrapperContentVisible').stop(true, true).animate({
height: '40px',
opacity: '.8'
});
});
I'm trying to get a nice animation with jQuery. I came up with that code:
$(document).ready(function () {
$('#arrow_up').hide();
$('#arrow_down').bind({
mouseenter: function() {
$('#content')
.animate({
height: '110px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '100px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '300px'},
500);
$('#arrow_up')
.delay(1000)
.fadeIn( 2000 );
});
$('#arrow_up').bind({
mouseenter: function() {
$('#content')
.animate({
height: '290px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '300px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '100px'},
500);
$('#arrow_down')
.delay(1000)
.fadeIn( 2000 );
});
});
It is working nicely, but only the first time. You can check it here: http://www.cow-art.eu/test/index.html
I want to animate the content div on hovering an arrow below. After clicking it I want to slide it down to full size and after the next click - to hide it partially. You can check it on the link provided above. It's working fine, but the arrow hovering animation is working unless I show and hide the content. The second approach is not animating it as the first.
I assume it's because the clicking event is unbinding the mouseenter and mouseleave, and there is no other event what can bind it again.
I ran out of ideas how to fix it. Can you please help me with that one?
I want to bump up a li on hover and let it get to original state when the mouse leaves. This works but does the hover animat(up) another time when the mouse is leaving which gives me a delay and inefficient code. Do you guys have some suggestions for me to make this more efficient?
function HoverListItem() {
var menuItem = $('#menu > li')
menuItem.on('hover', function(){
console.log('up');
$(this).animate({
'marginTop': '-10px'
}, 150);
});
menuItem.on('mouseleave', function(){
console.log('down');
$(this).animate({
'marginTop': '0px'
}, 150);
})
};
This is because the animations are queued, clear the queue before issuing a new animation. I myself also prefer using hover() to register mouseenter and mouseleave.
$("#menu > li")
.css("position", "relative")
.hover(
function() {
$(this).clearQueue().animate({
bottom: 10
});
},
function() {
$(this).clearQueue().animate({
bottom: 0
});
}
Example: http://jsfiddle.net/6xXGw/
I just noticed something unusual. This is what I want to accomplish:
I want a div to be shown when I click a link
I want the div to disappear when I click somewhere else in the document
I don't want it to disappear when I click the div itself
Something like this:
http://jsfiddle.net/XPmyF/
JS:
(function() {
var box = $('#box');
$(document).on('click', function() {
if (box.css('display') == 'block') {
box.css('display', 'none');
}
});
$('#start').on('click', function(e) {
box.css({
'text': 'Box',
'position': 'absolute',
'top': '50px',
'left': '0',
'background': '#EEE',
'border': '1px solid #555',
'width': '200px',
'height': '50px',
'display': 'block'
});
e.stopPropagation();
});
box.on('click', function(e) {
e.stopPropagation();
});
})();
That fiddle works just fine but when I tested that in Firefox (15.0.1), if you right-click on the div, it dissapears, which is not the behavior I'm looking for. It seems that stopPropagation() works for clicks but not right-clicks in Firefox. Chrome keeps right-clicks from propagating to the document.
How can I fix it?
Thanks
Use the event.which method to detect which button was clicked. Here's an example in jsfiddle.
$(document).on('click', function(event) {
if (event.which == 1 && box.css('display') == 'block') {
box.css('display', 'none');
}
});
Edited to actually work...
Sorry about that, the events didn't work as anticipated. You could handle it with mouse-overs.
(function() {
var box = $('#box');
var clicky = true;
$(document).on('click', function() {
if (box.css('display') == 'block' && clicky) {
box.css('display', 'none');
}
});
$('#start').on('click', function(e) {
box.css({
'text': 'Box',
'position': 'absolute',
'top': '50px',
'left': '0',
'background': '#EEE',
'border': '1px solid #555',
'width': '200px',
'height': '50px',
'display': 'block'
});
e.stopPropagation();
});
box.mouseenter(function(e) {
clicky = false;
});
box.mouseout(function(e) {
clicky = true;
});
})();