html - JavaScript Error for OnClick -
here html:
<%@ 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 id="contact-button"><a href="javascript:;" onmousedown="toggleslide('quickcontact');"> <span>contact</span></a> </li> </ul> <h3> contact us</h3> <div id="contact-form" style="display: none; overflow: hidden; height: 300px;"> <form id='freeform' method="post" action="http://webdev.com/"> <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> <p> please enter these letters: <br /> <img src="http://professional-painters.com/images/captchas/1297129344.1793.jpg" width="140" height="30" style="border: 0;" alt=" " /><br /> <input tabindex="5" class="field" type="text" name="captcha" size="20" maxlength="20" /></p> </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> here css:
#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; } #nav-contact { /*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; }
ok, smart of use jquery , yourself. it's not hard @ , js code short , easy.
first, need style contact form , menu looks same way when contact form expanded. i'm guessing can use code have. understand biggest problem javascript code.
make sure anchor tag has id: id="contact_button" , form wrapped within div id="contact-form"
so html needs like:
<ul> <li><a href="/link">menu 1</a></li> <li><a href="/link-2">item 2</a></li> <li><a href="/link-3">menuitem 3</a></li> <li><a id="contact-button" href="/contact-form">contact</a></li> </ul> <div id="contact-form"> <form action="#" method="post"> ... </form> </div> then, make contact form show, need put jquery on html page somewhere , need place following code within .js file or within tags:
$(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(); } } that's it. code send email using .net can maybe follow tutorial:
http://www.aspnettutorials.com/tutorials/email/email-aspnet2-vb.aspx
Comments
Post a Comment