I'm currently making an addon for a site, but I stumbled upon a problem:
my addon needs to simulate clicking a div, but the div only appears if you're hovering over another div. I tried
$("#id-1").trigger("mouseover");
$("#id-2").click();
but it doesn't really work because the box instantly dissapears again.
is there any way I can do this?
thanks in advance!
edit: $("#id-2") isn't just made invisible, its no longer there in the elements, they're using some code to delete it and put it back in place when you hover over $("#id-1")
If you have access to the CSS file you can use a hover class to do this, assuming they are siblings (could be modified to work with parent-child relationship) and and that they use display:block and display:hidden to hide/show the hidden element
/* CSS */
elemOne:hover ~ div, .hover ~ div { display:block; } // Applies on hover or if
// hover class
/* jQuery */
$('elemOne').addClass('hover'); // Initialize the hover state
$('elemTwo').trigger('click'); // Click the now-showing element
$('elemOne').removeClass('hover'); // Remove the hover state
Demo
Related
I am having a serious problem using .delegate in jQuery 1.11
I have a sidebar called ".local-filters" which opens when I click #consult-filter.
After that, the hidden sidebar from the right appears (named .local-filter) (toggles a class called .active) and ".overlay" (100% height and width div) makes a black background with class ".active"
I used this to make that happen. Also, I want to click on .overlay (black background) and toggle the overlay class to make it visual disappear.
$(document).delegate('#consult-filter, .overlay, .cerrar filtros','click',function(){
$(".local-filters").toggleClass('active');
$("body").toggleClass('menu-active');
return false;
});
I read a lot of articles and read something about bubble spreading, but I don't know actually what is happening.
Everything is working correctly, but I don't know why in the second click I made to this element, it automatically refreshes the entire page.
Any ideas?
I have a hover event set on an element that use's jQuery UI's position function to show a div right underneath it, with the "out" set to hide that div.
The problem is, subsequent hovers position that div further and further on each hover.
Example: http://jsfiddle.net/Shpigford/8ZkgJ/
Hover over the red box, then hover over it again and you'll see the blue box quickly get positioned further and further to the right.
Same thing happens if I change to a click event. Seems like something odd is happening with positioning when I hide the div and then try to show it again.
Instead of position({...}).show(), use show().position({...}). The reason is that positon won't work when the element is invisible. You can find the following note at http://api.jqueryui.com/position/:
jQuery UI does not support positioning hidden elements
Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?
Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/
You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});
Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.
You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.
One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.
You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.
I have a horizontal nav bar that is an unordered list with anchor tags. It currently uses jQuery's hover (mouseover and mouseout) to show drop-down navigation in each LI.
How can I make it so instead of triggering the drop-down when hoving over the LI it will be triggered when mousing over the anchor tag? When I changed it to the anchor the drop-down always disappears when mousing down over top of it, but it works fine when I set the LI to as the target for the hover() (I guess because all of the drop-down code is wrapped in the LI so the cursor is still hovering over the LI).
I need to set it up this way due to the design, so there isn't any way to change it. I need the hover() to be triggered just from the anchor and not the LI.
You could change the class of the LI by the hover code for the anchor. Change it back when you move off the LI.
The problem you're having, if I understand correctly, is that the dropdown closes before you get your mouse to it. This is probably because there's a gap between the anchor tag and the dropdown menu.
So how about, you change the opener to the a-tag, but then you add a little timer that keeps the dropdown list opened for one or more seconds even if you mouse out? Such an addition is nice to have later anyway, gets irritating if you accidentally mouse out of a navbar and have to go back because it closed.
Edit: Also, yes, JSFiddle it.
Try putting a span tag inside your anchor:
<a href='#'><span>test</span></a>
a span {
display: block;
}
I am trying to animate my accordion headers to simulate a ribbon dragged on to the wrapper on hover, and on hover out its dragged out of the wrapper.
Now if you check this first jsFiddle everything works fine, but when I try to animate the width of the h2 the ribbon bit outside of the wrapper disappears for a second and returns when the width animation is done. Check this jsFiddle to see the problem.
Am I doing this wrong? Is there a way to animate both the h2 and the span at the exact same time?
H2 gets an 'overflow:hidden' while animating, that's why your ribbon disappears. It seems that jQuery does this automagically, when animating a width.
What you could do is to use a different animation library like emile, or to animate an emtpy property set and use the step callback of $.fn.animate to set the width.
Or you can modify your css that an overflow hidden on the H2 does not affect you.