jQuery hover functions stacking on top of eachother - javascript

I have rows in a table containing buttons that when clicked, change the hover function of the tr element they are contained in. I just noticed that when I set the hover function it doesn't actually rewrite over the previous hover function, it just stacks on top of it. So when the hover event fires it calls the most recently set hover function as well as any previous ones that have been set. How can I reset the hover function each time I set it instead of stacking them?

As Mohit Bhardwaj mentioned, the solution is to use the jQuery unbind method.
Note that simply calling $("#id").unbind("hover") will not work. It must be in the form of
$("#id").unbind('mouseenter').unbind('mouseleave')
or more simply
$("#id").unbind('mouseenter mouseleave');
How do I unbind "hover" in jQuery?

Related

Attaching multiple click events without having to repeat myself

Here is the fiddle.
Ignore the styling, that's not important.
Basically I needed to open the Fancybox with two links present, but I only want one gallery image. I figured that out easily enough. When the thumbnail is clicked it triggers the li anchor.
To keep the galleries separate I did unique classes for each ol.
The problem I have run into is I will be repeating myself.
I attempted to do a loop (commented out), but the logic is beyond my grasp.
What is the best way to attach a new click handler (I need to add 8 more) without repeating myself in my current fashion? I've also tried a function with a couple parameters, but I had trouble with the e.preventDefault().
I greatly appreciate any guidance, thanks!
This looks like a great use case to use jQuery's on() method. on() is a method that will allow you to establish a handler on an outer container that can listen to its children for click events. So, for example: if you specified a class of .js-listen on your lists, you could call on() like this:
$('.js-listen').on('click', 'other-selector', function(e){
// function logic with either $(this) or e.target goes here
}
This block would essentially look for all elements with .js-listen and then when something inside the element with the .js-listen class is clicked, the event will bubble up through the DOM and the event will be handled according to the element that was clicked. The second parameter I have 'other-selector' can be a class name, element, or ID. so you could essentially put something like img there and it would fire the event if the child element clicked was an <img> tag.
This prevents you from attaching a handler a million times, and one of the benefits of on() is that if elements are dynamically added to the container with the handler, you don't have to worry about attaching handlers to those elements, because again, they bubble up!
Hope this helps!

How toggle function works in jQuery?

Simple toggle function-
$('.simple').toggle(function () {
//-----------------
},
function () {
//------------------
});
});
The thing i am not getting about toggle function is-
when first function ends (toggle function(){}), then how it can toggle second function in code?
How toggle works actually?
"when first function ends (toggle function(){}), then how it can toggle second function in code?"
Without getting into the fine detail - which you can see for yourself in the jQuery.js file - the .toggle() function (removed in v1.9) works by binding a click handler to the specified element(s), storing a list of all of the functions that you pass as parameters, and remembering which function in the list should be executed next.
When you first click on the element in question this click handler calls your first function. When you click again it calls the next function in the list. When multiple clicks take it past the end of the list it goes back to the beginning.
This is how .toggle() works :
If a div is hidden using .hide() or using css (display:none), it will display that div. In opposite case, if div is being displayed on screen, it will hide it with display:none property.
Toggle hides and shows an element alternatively. The function inside toggle is called once the toggling is completed. If you want to use another toggle function you have to call that function inside the first function but you should mention the selector as well. May be this is what you are looking for
$('.simple').toggle(function(){
$('.simple').toggle();
});
In jQuery the toggle() method is used for two different purpose. Here is the details link of this method.http://api.jquery.com/?s=toggle one is for efeect and another is for bind two events at a time, which one is deprecated in version 1.8.
This was taken straight from the jQuery doc http://api.jquery.com/toggle-event/
Note: This method signature was deprecated in jQuery 1.8 and removed
in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed.
The function basically worked in conjunction with a click handler. Internally, the code would just simply need to run the handler associated with the 1st, 2nd, [nth], click according to how many clicks had been receieved by the element it was bound to.
I would recommend not using this function.

jquery bind() binding to unwanted elements

I have a ul, each li has a row of images, and I am trying to bind a function to each li so that on 'mouseenter' the row of images appears, and on 'mouseout' the row of images disappears...I call bind() on the div within each li based on a an #id, so that they work independently.
Everything is working, except that the bind function seems to be binding each discrete function to their respective div, and then to each subsequent li beneath it...not above, though...so as I move the mouse down through the lower list items(which are currently collapsed), the focused row of images flashes in and out...if I have one of the lower rows of images un-collapsed(only one can be un-collapsed at a time), and move the mouse up over the 'above' list items, this glitchy behavior does not occur...
$menu1 is the div within the first li...even with just this code (and the other four bind calls commented out) all four rows of images still trigger $menu1 to fade in and out..
here's the code:
$menu1.bind('mouseenter', function(){
$menu1.animate({'opacity':'1.0'});
}).bind('mouseleave', function(){
$menu1.animate({'opacity':'0.0'});
});
Ive been trying to sort this out for a couple days now, and my jquery/javascript skills are just not up to snuff it seems...thanks so much for any help.
i don't think that $menu1 is a correct identifier.
Do you mean $("#menu1")?

JQuery transition issue

I've got the following problem:
I have a set of LI elements that have to go from one state to another (two separate css classes) with a smooth transition. To do this, I'm using JQueryUI's Effect API (switchClass)
for every LI element, I've hooked two JQuery listeners: mouseover and mouseout, which change the state correspondingly. Clear enough. Now, I'm not of a JQuery expert, so I must be missing something pretty standard, but every time when I move the mouse out of the LI element BEFORE the transition has finished, the transition just kinda hangs midway, and the LI elem becomes irresponsive to further listening.
Please, help.
You can use .stop([clear queue],[jump to end]) to end the animation before the next one is called. Substitute true/false based on if you want to do that in your stop statement. Add it before the call, ie $('element').stop(true,true).animate({....
http://api.jquery.com/stop/

Hover Item with JQuery

Is there a way to hover an element using javascript?
I don't want to create another class, I just want to cause element to hover with javascript when my mouse pointer is not over that element.
For example I have 5 elements with the same class and I want to call hover on all of them when one of them is actually hovered.
I assume you mean the pseudo class :hover that you've associated with a link (for example). As you hover over that link, you want to invoke all other link's :hover styles.
Unfortunately, you can not invoke the :hover styles from jQuery, that requires that you actually move your mouse pointer over that element. You have to use classes and utilize jQuery's hover event.
You can achieve this by addressing all of the items in your collection at the same time in your hover event handlers
var items = $(".some-class-applied-to-many-different-items");
items.hover(function() {
// Mouseover state
items.addClass("blah"); // <- for example
},
function() {
// Mouseout state
items.removeClass("blah");
});
If I understand your question correctly, you've added a hover event using jQuery, and you'd like to trigger that event manually regardless of the mouse.
If I understood correctly, you want to call the mouseenter to trigger the mouseenter event.
If I've understood incorrectly, and you actually have a :hover CSS rule which you'd like to trigger using Javascript, that's not possible.
Instead, you should add a class name to the rule (eg, something:hover, something.FakeHover { ... }), and add that class name using jQuery. (eg, $(...).addClass('FakeHover')).
In jQuery, the trigger function allows you to trigger events (includingmouseover, I believe) on elements.
In straight JavaScript, if you’ve assigned a function to an element’s event handler, you can of course call that whenever you want. E.g.
function mouseoverHandler() {
// Do something
}
// Assign function to element’s event handler
document.getElementById('link1').onmouseover = mouseoverHandler
// Call that function
document.getElementById('link1').onmouseover();

Categories