Hi Rick,
You might want to attach one .hover() method to the UL instead of the
LIs and have that one slide the other element down and up. Then,
attach another .hover() to the LIs so that you can have different
content displayed depending on which one is being hovered.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 13, 2008, at 6:10 PM, Rick Faircloth wrote:
Thanks, Karl... that's working better.
However, now, if I run the mouse over several menu items
at once, the menu-detail div goes up and down quite a few
times before it stops! It acts like it's wacko! :o)
Do I need to work in the "hoverIntent" plug-in or is there
some core function that will allow the hover to wait until
the mouse "settles" on a menu item for a moment?
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On Behalf Of Karl
Swedberg
Sent: Sunday, January 13, 2008 5:35 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Attempts failing to cause div to slide up,
slide down
Hey Rick,
Sounds like you want to use the .hover() method. It takes two
arguments -- one for mouseover and one for mouseout:
.hover(function() {
// Stuff to do when the mouse enters the element;
}, function() {
// Stuff to do when the mouse leaves the element;
});
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 13, 2008, at 3:40 PM, Rick Faircloth wrote:
Hi, Karl.. thanks for the reply.
Sigh... I guess it painfully obvious that I just haven't gotten
this "chaining" thing down. I can't quite figure out what
pertains to what. But even *I* should have caught the fact that
the "a" selectors weren't in any of the referenced div's... duh.
Now, I've got this:
$(document).ready(function() {
$('div.image-wrapper').find('div.menu-details').hide();
$('div.menu').find('a').mouseover(function() {
var answer = $('div.menu-details');
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
I added a new first line of the function to initially hide the
'menu-
details' div.
Works fine.
However, my mouseover function is a little dysfunctional, to put it
mildly.
The first time I mouse over a menu item the div slides in... yay!
However, the next
menu item I mouseover causes the div to slideup. That makes sense
according to the
code above. How would I add a "mouseout" function to cause the div
to slideup when
I mouseout from the menu item?
Should be code have an added "mouseout" function or additional "if"
clauses?
Thanks for the help!
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-
[EMAIL PROTECTED] On Behalf Of Karl
Swedberg
Sent: Sunday, January 13, 2008 10:21 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Attempts failing to cause div to slide up,
slide down
Hey Rick,
It looks like you're trying to bind the mouseover to links inside
div.image-wrapper, but when I looked at your DOM, I didn't see any
links there. That's probably why it's not working for you. ;-)
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 13, 2008, at 8:55 AM, Rick Faircloth wrote:
Hi, all.
I've made several attempts to figure out how to
cause a div to slide up and slide down when a menu item
is moused-over but so far, all attempts have failed.
I can get the div to hide upon initialization of the page,
but the slide is non-responsive.
My jQuery has been tried like this:
$(document).ready(function() {
$('div.image-wrapper').find('div.menu-
details').hide().end().find('a').mouseover(function() {
var answer = $('div.menu-details');
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
and like this:
$(document).ready(function() {
$('div.image-wrapper').find('div.menu-
details').hide().end().find('a').mouseover(function() {
toggle('div.menu-details');
});
});
but neither variation has worked.
The menu is a routine <ul><li><a href="." construct.
Anyone see any errors and perhaps have another way to go about
this?
I'm trying at this point just to get a single, blank div to
respond
to the jQuery,
however, eventually, the content in the div will be based upon the
menu item moused-over.
The url to view my attempts is http://c21ar.wsm-dev.com.
The goal is to make something with HTML and jQuery which emulates
the functionality for the to menu
at this site: http://www.AtlantaFalcons.com
Thanks for any assistance and thoughts!
Rick
