Any ideas why this doesn't work, or how to make it work? I want to remove the "onmouseover" and "onmouseout" events so they are basically disabled and at the same time change the background color. Then when the user clicks on another element I want to reassign the mouse events back to the element. Right now the onmouse events don't get disabled at all, the background doesn't change, etc.
Here's how I call the function:
Here's the function:
$(document).ready(function(){
$(".maximize").toggle(
function(){
$("#property_bg").unbind("onmouseover");
$("#property_bg").unbind("onmouseout");
$("#property_bg").toggleClass("body_bgcolor");
},
function() {
$("#property_bg").bind("onmouseover", function() {
swap_class("property_bg","body_bgcolor")} );
});
});
Thanks for the help.
Remove the "on" from the event names. Then it'll work.
on your events, take out the 'on'... just mouseover or mouseout...
I found out the real problem in the following two threads for anyone who comes along with a similar problem I will add them here:
How do I unbind "hover" in jQuery?
Why this unbind doesn't work?
The problem was solved by not hard coding the mouse events in the HTML, but rather binding them in the document.ready 1st. In order to "unbind" and event, the event has to be "binded" by jquery.
Also, "mouseover" didn't work for some reason I couldn't figure out, but when I put "mouseenter" and "mouseleave" as suggested in one of the posts above it worked. I've never heard of "mouseenter" or "mouseleave", but ... it works now.
Good luck!
Related
I'm using an external plug-in that manipulate the DOM which in turn cause vertical scroll resetting on clicking
I know there is similar questions but non of them worked for me
I've tried handling it on 'change' but it never fired the event
$(document).on('change', '.element', myfunc);
The function absolutely have to remove and place element, there is no way to hide or change value, any suggestions are highly appreciated.
I did try to check hash anchor solution for tips and pointers but failed miserably, same thing with focus.
is there anyway to handle that resetting so I would prevent it?
The change event is not for dom change. To catch insert event you can do this:
$(document).on('DOMNodeInserted', '.element', myfunc);
I think you can use this for Insert and Remove both:
$(document).on('DOMNodeInserted remove', '.element', myfunc);
I'm trying to capture the event when the mouse is hovering over the select box, be it collapsed or expanded. I'm using .on() in the following manner,
$(document).on('hover', "select#selectBox", function() {
alert("done");
});
Please note that I'm using this snippet inside DOM document ready too.
I've tried changing the event to click, scroll, mouseover, mouseenter, etc too.
Doesn't seem to work for those too.
Please point out where I'm going wrong.
I've made a JSFiddle: https://jsfiddle.net/g9vf1mty/2/
EDIT: Thanks for the quick response everyone!
I have fixed my mistakes :)
I have tweaked the JSFiddle a little bit. Now, I'm attempting to scroll the select box with a size lesser than the number of options and have changed the 'hover' event to 'scroll' event. It does not seem to work that way.
I'm using jQuery 2.1.3.
JSFiddle here: https://jsfiddle.net/g9vf1mty/8/
You don't need to wrap event bound to document level inside ready pseudo event. And because you want to delegate event, maybe to hanlde dynamic elements, the correct way would be to bind both mouseenter & mouseleave events this way:
eventually filtering by event type inside handler (in/out)
$(document).on('mouseenter mouseleave', "#selectBox", function(e) {
alert("done: " + e.type);
});
$("select#selectBox").hover(function() {
alert("working");
});
use hover function, in the above manner. and more importantly, you missed jQuery library too.
As on("hover") was deprecated form jQuery 1.8, it won't work on Higher versions of jquery.
You should use mouseenter event
and include jquery in your fiddle :)
Look also at this (SO question)[Is it possible to use jQuery .on and hover?
I have two divs, one called "mainDesign" and a box called "div1".
When "div1" is clicked, focusin is called and the border-color changes.
"div1" can only focusout if "mainDesign" is clicked.
The script works but "mainDesign" needs to be clicked twice in order for it to work, after it has focused out, the script works perfectly.
Any ideas?
Code: http://jsfiddle.net/v3DWf/14/
Thanks.
Rewrote using mousedown and stopPropagation(): http://jsfiddle.net/patrickmarabeas/v3DWf/20/
Haha, looks like Royce Feng beat me to it.
I removed focusout(), as it seems to be an unnecessary step...
Is this acceptable?: http://jsfiddle.net/patrickmarabeas/v3DWf/15/
EDIT: switched the functions around, seems to work as intended now: http://jsfiddle.net/patrickmarabeas/v3DWf/17/
You can switch to using .mousedown() and stopping propagation in the inner one.
http://jsfiddle.net/v3DWf/18/
Try this:
$("#div1").focusin(function() {
$(this).css("border-color","#ff9900");
});
$("#mainDesign").mousedown(function(){
setTimeout(function(){
if (!$("#div1").is(":focus"))
$("#div1").css("border-color","#999999");
}, 100);
});
The timeout is necessary because the mousedown will fire before the div is blurred.
Well the problem is that you've nested the .mousedown() event within the .focusout() event.
So what is happening here is that when the focusout event is triggered, you are then attaching the .mousedown event to the mainDesign div. Let me re-iterate that again, the .mousedown event will NOT be attached until the focusout event has triggered.
Then once the .mousedown event is attached, the next time you mousedown in the mainDesign div, the event will fire which is why it is currently taking you two clicks.
So the easiest solution is to simply get rid of the .focusout event.
Is it possible to trigger a hoverIntent on an element.
I have tried $(elem).trigger('hoverIntent');, which didn't work.
Edit: Js Fiddle: http://jsfiddle.net/H2p6T/
Simply triggering any of the event types did nothing unless the hoverIntent had been triggered genuinely.
I took a look at the hoverIntent source and it expects two things: mouseenter and mousemove with pointer coordinates defined. So I triggered events with fake coordinates:
$('.foo').trigger({ type:"mouseenter", pageX:"123", pageY:"123" });
$('.foo').trigger({ type:"mousemove", pageX:"123", pageY:"123" });
The coordinates don't matter as long as they are close enough to each other to trigger hoverIntent.
I used the r7 version for this.
Have you tried
$(elem).trigger('hover');
or
$(elem).trigger('mouseover');
$(elem).trigger('mouseout');
or
$(elem).trigger('mouseenter');
$(elem).trigger('mouseleave');
hoverIntent is a plugin not an actual event so I believe you have to trigger an event that hoverIntent actually binds to your element
Here's an example of it working with the mouseenter/mouseleave
http://jsfiddle.net/H2p6T/3/
Can you do it like this?
$(elem).hoverIntent();
Ok that didn't work...
I had a play with it: http://jsfiddle.net/8CCTM/11/
hoverIntent will trigger on mousenter() but it will only do it after the hoverIntent element has been activated with the mouse.
I am trying to experiment on creating something where you can rate by no. of stars. However, after I click on the rating I want and the number of stars has been printed out, I can still click on the stars and change the value. How can I stop all events after I click?
This is the jsFiddle demo of my problem:
http://jsfiddle.net/3pMuy/
You could use .one [docs]. The event handler bound with this will only be executed once.
The flag suggestion is not to bad.
This will do the trick for you.
Not the nicest soulution but.. hey check it out!
http://jsfiddle.net/3pMuy/21/
Your code binds a jQuery event each time you hover a star, thats bad.
By the way, This Demo is a solution for your version with an added line:
$('ul li').unbind("click").unbind("mouseenter").unbind("mouseleave");
I suggest you to consider moving the click binding outside the hover event and use .one()