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
