homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

hover over nav makes form appear
hover over nav makes form appear

5+ Year Member

Msg#: 4488139 posted 10:39 pm on Aug 24, 2012 (gmt 0)

Ok I am having difficulty with this.

I have a regular navigation with ul li a tags. The last li element has another ul li inside it which contains a div and a form. This is all set to display none. Using jquery I have the form show up when you hover over the last element. The problem is that it only fades out when you move all the way down below the form, its as if the form is taking up the width of the content area. but the form has a set width on it (200px). So Im really puzzled.

Does anyone have a working solution for something like this? Here is my code

<ul id="nav" class="sf-menu">
<li><a href="/" class="first"><img src="/img/nav-star.png" width="19" height="20" alt="Home" /></a></li>
<li><a href="/education/">Education</a></li>
<li><a href="/designers/">Designers</a></li>
<li><a href="/diamond-finder/">Diamond Finder</a></li>
<li><a class="last" href="/diamond-deals/">Diamond Deals</a></li>
<li id="appointmentsLi"><a class="last" href="/appointments/">Appointments</a>
<ul style="display:none;" id="aForm">
<div id="appointment">
<form id="form2" name="form2" method="post" action="">

<p>NAME<span id="fNameEr" class="dNone errorMsg"></span></p>
<input value="" name="fName" id="fName" type="text" class="field" />

<p>EMAIL<span id="fEmailEr" class="dNone errorMsg"></span></p>
<input value="" name="fEmail" id="fEmail" type="text" class="field" />

<p>PHONE<span id="fPhoneEr" class="dNone errorMsg"></span></p>
<input value="" name="fPhone" id="fPhone" type="text" class="field" />

<p>BEST TIME TO REACH YOU</p><span id="fTimeEr" class="dNone errorMsg"></span>
<select name="fTime" class="field-time">
<option selected="selected" value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
<option value="Any">Any</option>

<input name="submit" type="submit" class="buttonstyle" value="SUBMIT" />
<span class="dNone" id="loaderImg"><img id="loadImg" src="/img/ajax-loader.gif" /></span>
</div><!-- appointment -->



WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 4488139 posted 12:18 am on Aug 25, 2012 (gmt 0)

Where's the code? Also, you could use browser developer tools to inspect and element (with Chrome, for example, right click where the form is showing and choose Inspect Element). This might give you an idea of what styles are applied.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved