An "if mouseover" or a "do while mouseover" in JavaScript/jQuery - javascript

Is there a JavaScript or jQuery solution to run a function repeatedly (after setTimeout) while the mouse is over a DOM object? Otherwise said, is there a JavaScript "do while mouseover" (or "if mouseover")?
$('someObject').bind('mouseover', function() {
//Do the following while mouseover
$('someOtherObject').css('margin-left',adjustedLeft + 'px');
setTimeout(/*do it again*/,25);
});

$('someObject').on('mouseenter', function() {
this.iid = setInterval(function() {
// do something
}, 25);
}).on('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
Example Look here

I would solve this issue using the onmouseout event.
Start whatever you intended to do while the mouse is over the specified component on the mouseover event.
When onmouseout event occurs i would stop it.

i use new bind style of jQuery.
$(el).bind({
'mouseenter': function(){console.log('Mouse over');},
'mouseleave': function(){console.log('Mouse leave');}
});

I know this is kind of old, but I think the proper function is already in JavaScript, onmousemove does just that.

OBJ.addEventListener("mouseenter", function() {
focus=true;
});
OBJ.addEventListener("mouseleave", function() {
focus=false;
});
Just in case you don't want to use jquery you can use this :)

Related

How to add and remove a class from a single element with one click…

I’m trying to trigger a complete CSS3 animation with a single click on an anchor element. My current version is working (based on lots of searching here and on Google), but it requires two clickable elements to be present.
Here’s what I have so far:
http://codepen.io/ProfessorSamoff/pen/rVNOdv
As you’ll see, the jQuery is pretty typical:
$('a.puff').click(function() {
$('a.puff').addClass('active');
$(this).removeClass('active');
});
I know that I’m probably missing something pretty simple, so any help is appreciated.
Thanks,
Tim
CSS alone doesn't provide a mechanism to act on a keyframe animation/transition end, however it does fire a javascript-detectible event, as explained here.
Your repeatable puff animation will look like this :
$('a.puff').each(function() {
$(this).attr('data-puff', $(this).text());
}).on('click', function() {
var $a = $(this).addClass('active').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
$a.removeClass('active');
});
});
As far as I'm aware this is as simple as you can make it.
Updated codepen
$(document).ready(function() {
$('.puff').each(function() {
$(this).attr('data-puff', $(this).text());
});
$('a.puff').click(function() {
var $this = $(this);
$this.addClass('active');
setTimeout(function(){ $this.removeClass('active'); }, 150);
});
});

How to get JQuery.trigger('click'); to initiate a mouse click

I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.
You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);
This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});
See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}
May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})
jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});
Try this that works for me:
$('#bar').mousedown();
Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.
Just use this:
$(function() {
$('#watchButton').trigger('click');
});
You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.

Is it possible to bind a handler to a jQuery effect?

I would like to call function when slideUp or slideDown are performed on an element. Is this possible?
Something like:
$('#panel').on('slideUp', function() { open--; });
$('#panel').on('slideDown', function() { open++; });
Update: The problem is that there are a ton of slide calls (e.g.: $().slideUp()) all over the page, within ajax responses, hash link clicks, etc.. I was hoping to bind to the slide itself somehow rather than add code to each calling function.
You cannot bind to an event since there is no such.
But you can pass a handler that will be called after animation is finished
$('#panel').slideUp(function() { ... });
http://api.jquery.com/slideUp/
If you really want to do this, you can use custom events and your own little plugin, something like this:
$.fn.mySlideToggle = function() {
this.slideToggle();
this.trigger('mySlideToggle');
}
$('div').on('mySlideToggle', function(){ console.log('hey') });
$('button').on('click', function(){ $('div').mySlideToggle(); });
Here's a little demo (check console): http://jsbin.com/asejif/2/edit
In your case it is redundant though, since you can use the callback that the slide events provide, but it might be useful for other things...

How to toggle an element with on()?

I am using the Hammer.js library for mobile touch events and in their example for use with jQuery, they have the following:
$('#test_el').hammer().on("tap", ".nested_el", function(event) {
console.log(this, event);
});
This is straightforward; however, I would like to incorporate a toggle behavior to #test_el. In other words, if the above example was replaced with something like this:
$('button').hammer().on("tap", function() {
$('div').addClass('open');
}, function {
$('div').addClass('close');
});
How would I get this "toggle" behavior to work?
Initially, you could add a starting class to all buttons. Then on event, you can check if the class exists. This lets you know what state the element was in when you tapped it.
$('button').addClass('close');
$('button').hammer().on('tap', function() {
if ($(this).hasClass('close')) {
$(this).removeClass('close').addClass('open');
// Event code
}
else {
$(this).removeClass('open').addClass('close');
// Event code
}
});
jQuery also provides a toggleClass method.
There is already a toggleClass function available in JQuery, it seems that it does what you want.
Try:
$('#test_el').hammer().on("tap", ".nested_el", function(event) {
$(this).toggleClass("classnamehere");
});
Where classnamehere would be your class name.

Disable mouseover event then re-enable

How do I unbind or disable the mouse over after it's being hovered out then re-enable if the other box is faded out.
I tried the unbind, but seems that its not working, it just disables the whole thing.
I even tried a timeout but that is not working into my advantage.
Any help would be appreciated.
$("#shopping_basket").mouseover(function() {
// set a timeout so that this event will not trigger twice when mouseover from the bottom
setTimeout(function() {
/*$("#shopping_basket").unbind(mouseover);*/
$("#miniBasketDetails").fadeIn(500);
},500);
});
$("#miniBasketDetails").mouseleave(function() { $("#miniBasketDetails").fadeOut(500); });
Just a guess try something like this:
$("#shopping_basket").bind('mouseover', function() {
setTimeout(function() {
$("#shopping_basket").unbind('mouseover');
$("#miniBasketDetails").fadeIn(500);
}, 500);
//Re-enable as needed: $("#shopping_basket").bind('mouseover', function(){});
});
This code is not tested, but should work.
I think your problem was that you passed mouseover into .unbind() as a variable, not a string. This is why the "whole thing" was disabled, because JavaScript was looking for a variable named mouseover, which was not defined, and caused your code to break. Try it like this: .unbind('mouseover').
Not sure if this is the algorythm you're looking for, it is based on answers shown in this question.
Here is the fiddle and the code:
$("#shopping_basket").hover(function() {
$("#miniBasketDetails").fadeIn(500);
}, function() {
$("#miniBasketDetails").data('is_over', false);
setTimeout(function() {
if (!$('#miniBasketDetails').data('is_over')) {
//if not hovered over the #miniBasketDetails in 650 miliseconds after mouseleave
$("#miniBasketDetails").fadeOut(500);
}
}, 650);
});
$("#miniBasketDetails").mouseenter(function() {
$(this).data('is_over', true);
});
$('#miniBasketClose').click(function() {
$("#miniBasketDetails").fadeOut(500, function() {
$(this).data('is_over', false);
});
});
The span#miniBasketClose is just one optional "Close button", not necessary for functionality of the code. Its functionality can be substituted (if needed) for example also with hovering over some other elements.

Categories