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();
Related
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?
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!
I am trying to construct a wrapper for an element and I want to create a seamless integration for my wrapper. To achieve this, I want to propagate all events from one element to another, to create a mirror to say so.
Let's say I have #element-1 and #element-2. I give #element-1 a 'click' handler. The desired behaviour is that whenever a click occurs, either on #element-1 or #element-2, the handler should fire. Also, if #element-2 is assigned a different 'click' handler, both handlers should trigger.
Do not worry about infinite bubbling, I will find a mechanism to counter that. My question is how can I achieve this event mirroring for all possible events for these two elements, without writing all the event names (I'd also like to get custom events, so hard-coding the event names is not an option)?
I'm open to solutions that may not use jQuery, as long as it achieves what I described.
Suppose there are 10 anchor elements inside div ids #event-1, #event-2, ... #event-10. You can write the event handlers as below.
for(i=0;i<=10;i++) {
if ($(".event-"+i).find('a').length > 0) {
var g = $(".event-"+i).find('a');
g.click(function(){
/* Your code */
});
}
}
I have <div class="animate"> and in css:
div.animate:hover{
//do stuff
}
But would also like to invoke this via javascript.
Is it possible?
As described in Trigger css hover with JS this is not possible as-is (if you want it as described exactly at the time of the creation of this answer).
But the main goal is achievable by:
Setting a class hover (or whatever name) as well as the selector :hover in the CSS.
Calling .addClass("hover") to trigger CSS, and .trigger("hover") or .trigger("mouseenter") to trigger the JS.
Ensuring the mouseleave handler. or 2nd .hover() handler, clears the hover class if present.
Instead of doing it this way, I suggest you just add a class to the other tag. In jQuery it would be:
$(window).load(function() {
$('.trigger-animate').hover(function(){
$('.animate').addClass('hover');
});
}
I'd recommend using this method, because it handles both onMouseOver and onMouseOut (this way you can also remove the class when your mouse leaves $('.trigger-animate') if you so desired using this syntax:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
checking out the documentation
I am using a jQuery gallery plugin, the thumbs are all in an unordered list and the main image is to the right in a div.
The plugin adds the class "selected" to the li whose main image is currently being shown. As soon as the plugin moves on to the next image, the selected class is removed from the li and added to the next li.
I want to affect the li that currently has the class "selected" applied to it. I can't just do this:
$('li.selected').whateverRules();
because jQuery is applying the class dynamically, the class isn't there from the document ready state hence it doesn't work.
I also can't use .live() because I have no event to attach. So how can I work with this?
How can I affect the li which currently has a class of "selected" if this class was added dynamically?
There is no way to bind to an event when a CSS class has been changed. Perhaps you could modify the jquery plugin to trigger an event when the selected class has been added and bind to that?
Here is a link for trigger() if you feel adventurous. trigger()
Depending on how intensive your calls are you could always use an interval. It's not ideal, necessarily, but may do what you need:
var selectedInterval = setInterval(function () {
$('li.selected').whateverRules();
}, 100); // adjust timing to fit based on function complexity / timing.
I try to remember to store setInterval's return values into a variable in case they need to be cleared later. It's worth a shot, though not as clean as I'd like. If I were you I'd look into some event that fires when the gallery changes it's selection (there ought to be one, I'd imagine).
I guess you can attach the event to the controls of the gallery:
jQuery(function($){
$('a.next-image').mouseup(function(){
$('img.selected') ... // what you want.
});
});
I guess this a bit ugly but with no source is dificult solve in a clean way.