Hi Spencer,
first of all let me ask you why you would want to use the hoverIntent
plugin for this particular use case. After all, the Hours and Location
buttons are clearly separated, so I don't see how a user could
accidentally open one of the menus. At least you should lower the
timeout, so that it doesn't take forever for the menu to open. As a
user who doesn't know about the hidden menu, I'd simply click and
wonder why nothing happens.
Besides that, I assume the problem is that your menu isn't nested
within the btn_hours div. So when the menu opens and you mouseover the
menu, a mouseout event is fired on the btn_hours div and another
mouseover event is fired on the menu-hours-down div. So after the
timeout, the menu closes again, but the other mouseover causes the
menu to be displayed again, which causes the appearing and
disappearing menu.
Try nesting like this:
<div id="btn_hours">
...
<div id="menu-hours-down" class="curvyCornersClassHoursBoxDown">
...
</div>
</div>
and use only the btn_hours selector
$("#btn_hours").hoverIntent({ ... });
> Also, can a hoverIntent event along with a click event be applied to
> the same element?
Sure!
$("#btn_hours").hoverIntent({ ... }).click(...);
However, the hoverIntent would still be in effect if a user clicks. If
you just use show(), the user wouldn't see that after clicking and
opening the menu, the hoverIntent function tries to open is again, as
the menu is already visible. But if you used some animation, it would
be run twice. So you might want to intercept that action if either
event (hover or click) has already performed the task, either by
adding some if clause or by using unbind().
> but from time to time I move the
> mouse over the drop down and it will collapse or collapse and reopen
> rapidly.
This is the same problem as described above.
> I've
> upped the z-index on the customer quotes elements and still can't get
> it to work properly. What am I missing? (I'm sure it's probably right
> in front of my face)
Try adding z-index to the "quote-pull-box" div instead. That should
affect the entire div.
Again, bind the hoverIntent only to one element, in your case "quote-
pull-box", which is the parent of all elements within that div.
I don't see why you have another <div style="position: relative;
width: 758px; height: 61px; margin: auto;"></div> around that div when
the css of quote-pull-box defines the same values again.
You seem to be using both tables and divs in the layout. That makes it
hard to read the source code and even harder to change things around.
You might want to try switch to css-based layout completely. As soon
as you clean up things there I'm sure you'll run into less trouble
with css-p elements.
Hope that helps,
Bernd
>
> I would really appreciate any help someone can provide, I've almost
> given up trying to get this issues resolved.
>
> Thank you in advance.
