Hi Karl,
Thank you so very much for your help....I am fairly new to JS and really
appreciate your help!
Brad Holloway
----- Original Message -----
From: Karl Swedberg
To: jQuery Discussion.
Sent: Wednesday, February 07, 2007 2:13 PM
Subject: Re: [jQuery] Please Help
Hi Bradley,
A few suggestions:
1. wrap the <a> and the following <div> in something like <div
id="view_hide_container"></div>
2. use .hover():
$("#view_hide_container").hover(function() {
$('div.view_hide').slideDown(250);
}, function() {
$('div.view_hide').slideUp(250);
});
3. put "return false" in a click handler instead of the .hover() method.
$('#view_hide').click(function() { return false;});
4. wrap it all in $(document).ready()
$(document).ready(function() {
$("#view_hide_container").hover(function() {
$('div.view_hide').slideDown(250);
}, function() {
$('div.view_hide').slideUp(250);
});
$('#view_hide').click(function() {return false; });
});
5. stick it in a separate file; then include it in the page's <head>, after
the include for jquery.js
Hope that helps.
cheers,
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 7, 2007, at 3:15 PM, Bradley Holloway wrote:
I am trying to keep the gray box open until the mouse is outside of that
box.....I want to be able to click the Test Link......Please help.....Thanks!!
My code is below:
<a href="javascript:void();" class="button_top_right" id="view_hide" >Show
/ Hide</a><br />
<div class="view_hide" style="display:none; width:159px; position:absolute;
background-color:#CCC; border:1px solid #000;">
<div style="height: 200px; ">
<p>This is what I want to be over you!!</p>
<p><a href="#">Test Link</a></p>
</div>
</div>
<table cellspacing="0" cellpadding="10" style="width: 159px; color: #FFF;
border:1px solid #000;">
<tr>
<td colspan="3" bgcolor="#333333">Link 1</td>
</tr>
<tr>
<td colspan="3" bgcolor="#333333">Link 2</td>
</tr>
<tr>
<td colspan="3" bgcolor="#333333">Link 3</td>
</tr>
<tr>
<td width="73" bgcolor="#333333">Link 4</td>
<td width="74" bgcolor="#333333"> </td>
<td width="74" bgcolor="#333333"> </td>
</tr>
</table>
<script type="text/javascript">
$
(
function ()
{
$("a#view_hide").mouseover(function
(){$("div.view_hide").slideDown("50");return false;});
$("a#view_hide").mouseout(function
(){$("div.view_hide").slideUp("50");return false;});
}
);
</script>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
------------------------------------------------------------------------------
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
