css - JavaScript or JQuery Problem Div doesnt toggle -
i think im missing pieces this. im new javascript , jquery, , tried before, solution doesnt work either.
i need sort-of drop down navigation effect similar on site: professional-painters.com click "quick contact"
for reason contact isnt toggling.
<%@ page language="c#" autoeventwireup="true" codebehind="webform2.aspx.cs" inherits="davincisapp1.webform2" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="~/styles/stylesheet1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script> <%--<script type="text/javascript" src="scripts/motion.js"></script>--%> <script type="text/javascript"> $(document).ready(function(){ /* make sure contact form hidden when page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides contact form down , shows */ $('div#contact-form').slidedown(); }, function () { /* hides again */ $('div#contact-form').slideup(); } } );</script> </head> <body> <div id="nav"> <div id="navigation-primary"> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">menuitem 3</a></li> <li><a id="contact-button" href="#">contact</a></li> </ul> <div id="contact-form"> <form action="#" method="post"> <div class='hiddenfields'> <input type="hidden" name="act" value="20" /> <input type="hidden" name="uri" value="index" /> <input type="hidden" name="xid" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" /> <input type="hidden" name="status" value="open" /> <input type="hidden" name="return" value="consultation/thank_you" /> <input type="hidden" name="redirect_on_duplicate" value="" /> <input type="hidden" name="ret" value="http://professional-painters.com/" /> <input type="hidden" name="form_name" value="quick" /> <input type="hidden" name="id" value="freeform" /> <input type="hidden" name="params_id" value="136390" /> <input type="hidden" name="site_id" value="1" /> </div> <fieldset style="padding: 7px;"> <table id="quickcontact-in"> <tr> <td> <input tabindex="1" class="field" type="text" name="name" value="name" onfocus="if (this.value == 'name') this.value = '';" onblur="if (this.value == '') this.value = 'name';" /> </td> </tr> <tr> <td> <input tabindex="2" class="field" type="text" name="email" value="email address" onfocus="if (this.value == 'email address') this.value = '';" onblur="if (this.value == '') this.value = 'email address';" /> </td> </tr> <tr> <td> <input tabindex="3" class="field" type="text" name="phone1" value="phone (optional)" onfocus="if (this.value == 'phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'phone';" /> </td> </tr> <tr> <td> <textarea tabindex="4" class="txtfield" cols="4" rows="4" name="comments">questions or comments</textarea> </td> </tr> <tr> <td> <div id="submit"> <input tabindex="6" type="submit" name="submit" value="send request" /> </div> <p class="tiny" align="right"> <a href="javascript:;" onmousedown="toggleslide('quickcontact');">close</a></p> </td> </tr> </table> </fieldset> </form> </div> </div> </div> </body> </html> #navigation-primary { /*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533f;*/ background-color: red; left: 0; position: absolute; top: 46px; z-index: 1; } #nav { height: 34px; width: 878px; } #contact-button { /*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/ background-color: green; width: 109px; } #quickcontact { background: none repeat scroll 0 0 #666449; border-left: 2px solid #3d352b; color: #ffffff; padding: 10px; position: absolute; right: 0; text-align: left; top: 75px; width: 245px; z-index: 1000; } #quickcontact-in { color: #ffffff; } #quickcontact fieldset { border: medium none; } #quickcontact-in .field { background: none repeat scroll 0 0 #fefbd5; border: 2px solid #fff1bd; color: #666666; padding: 2px; width: 190px; } #quickcontact-in .txtfield { background: none repeat scroll 0 0 #fefbd5; border: 2px solid #fff1bd; color: #666666; display: block; float: left; font: 1em "lucida sans unicode",verdana,arial,helvetica,sans-serif; height: 90px; margin: 5px 0 7px; outline: medium none; padding: 2px; width: 190px; }
Comments
Post a Comment