How can i align spacing between form inputs, labels, text area and the received data from php. Which may have multiple lines of data to display. How can i achieve the auto arrangement of next elements if something is added in the middle.?
Here is the code: (How can to make auto arrangement? is there a better way achieving it than the below code? )
li{text-decoration:none; list-style-type:none; }
.left{ position:relative; left:100px;}
.right{ position:relative; left:200px;}
textarea{ position:relative; width:200px; height:70px; }
<html>
<body>
<br><br>
<form>
<ul>
<label class="left">Status:</label><li class="right"><textarea name="status"></textarea></li><br><br>
<label class="left">First name:</label><li class="right"><input type="text" name="firstname"></li><br><br>
<label class="left">Last name:</label><li class="right"><input type="text" name="lastname"></li><br><br>
<label class="left">Address:</label><li class="right"><textarea name="address"></textarea></li><br><br>
<label class="left">Address 2:</label><li class="right"><textarea name="address2"></textarea></li>
</ul>
</form>
</body>
</html>
You could solve just using CSS flexbox.
display: flex for each li, some flex-basis for each label (in this case 25% and add a class for each input (such as textarea, etc) with flex: 1.
document.querySelector('#add').addEventListener('click', function() {
var elem = document.createElement('li');
elem.innerHTML = '<label>Lorem Ipsum</label><input type="text" class="field" />';
document.querySelector('#list').appendChild(elem);
})
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
margin-bottom: .5em;
}
label {
flex: 0 0 25%;
text-align: right;
padding-right: 1em;
align-self: center;
}
.field {
flex: 1;
}
<ul id=list>
<li>
<label for=status>Status:</label>
<textarea class="field" id=status name="status"></textarea>
</li>
<li>
<label for=firstname>First name:</label>
<input class="field" id=firstname type="text" name="firstname">
</li>
<li>
<label for=lastname>Last name:</label>
<input class="field" id=lastname type="text" name="lastname">
</li>
<li>
<label for=address>Address:</label>
<textarea class="field" id="address" name="address"></textarea>
</li>
<li>
<label for=address2>Address 2:</label>
<textarea class="field" id="address2" name="address2"></textarea>
</li>
</ul>
<button id=add>Add</button>
Also added a for="..." attribute to have the right behaviour when click on a label (will focus on the related input).
Related
I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>
It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});
I have a bunch of forms and to toggle between those forms works just fine. However I think I did my steps backwards.
Ideally, I only want to see my 'generating customer calculations' <a> tag on page load. When I click on it I want to then see the 'calculators' link beneath the first one, and then when I click on that, that's when I want see all form titles.
I am not sure if I need to rearrange my HTML in terms of how my <ul> elements are ordered or what. I have hit a bit of a wall.
$(".calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
$(".calc-nav li:first a").click();
$(".calcs1").hide();
function toggleForms(id) {
$(".forms form").hide();
$(".forms #" + id).show();
}
/* form {
margin-left: 10px;
}
ul {
padding-left: 0;
}
.calc {
background-color: rgb(246, 246, 246);
color: black;
padding: 10px 0px 10px 10px;
border-bottom: 1px solid #dedede;
text-align: left;
font-size: 15px;
line-height: 24px;
cursor: pointer;
list-style-type: none;
margin-bottom: -.1px;
}
.link {
display: block;
color: black;
}
.focus {
color: #005aaa;
}
.title {
background-color: rgb(0, 90, 170);
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
margin-bottom: 0px;
}
.calculatorList {
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
list-style-type: none;
cursor: pointer;
}
p {
padding-top: 10px;
margin-bottom: 0px;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-4">
<ul class="calculatorList">
<li>
<a class="link">Generating Customer Caclulations</a>
</li>
</ul>
<ul>
<li>
<a class="link" data-id="cacls1">Calculators</a>
</li>
</ul>
<ul class="calc-nav">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
<div class="col-md-8 forms">
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<p>Calculator which determines the lifetime value of a customer</p>
<p>The average dollar amount of a client's reorder: </p>
<input value="" type="text" class='num1' placeholder="$50.00" />
<p> How many times per year does an average client buy from you? </p>
<input value="" type="text" class='num2' placeholder="12" />
<p> On average, how many years does a client continue doing business with you? </p>
<input value="" type="text" class='num3' placeholder="6" />
<p>Customer Lifetime Value: </p>
<input value="" type="text" class='total' placeholder="$3000.00" readonly/>
</form>
<form id="form2">
<h3>Breakeven Analysis Calculator</h3>
<p> Calculator which determines your breakeven analysis</p>
<p> Customer Lifetime Value: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Gross Margin Percentage: </p>
<input value="" type="text" class='num2' placeholder="60.00%" />
<p> Marin Per Customer: </p>
<input value="" type="text" class='total1' placeholder="$1800.00" readonly/>
<p> Monthly Advertising Spend: </p>
<input value="" type="text" class='num3' placeholder="$2000.00" />
<p> Number of Customers to breakeven:
<p>
<input value="" type="text" class='total2' placeholder="1.11" readonly/>
</form>
<form id="form3">
<h3>Total Audience Calculator</h3>
<p>Calculator which determines your total audience</p>
<p> Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Average Number of people per residence: </p>
<input value="" type="text" class='num2' placeholder="4.25" />
<p> Total potential audience </p>
<input value="" type="text" class='total' placeholder="212,500" readonly/>
</form>
<form id="form4">
<h3>Number of Offers</h3>
<p>Calculator which determines your total number of offers</p>
<p>Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Number of Coupons: </p>
<input value="" type="text" class='num2' placeholder="6" />
<p> Total number of coupons </p>
<input value="" type="text" class='total' placeholder="300,000" readonly/>
</form>
<form id="form5">
<h3>Margin Calculator</h3>
<p>Calculator which determines your margins</p>
<p>Revenue: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Cost of Goods Sold: </p>
<input value="" type="text" class='num2' placeholder="$2250.00" />
<p> Margin: </p>
<input value="" type="text" class='total1' readonly placeholder="750.00" readonly/>
<p> Margin Percentage: </p>
<input value="" type="text" class='total2' readonly placeholder="25%.00" readonly/>
</form>
</div>
</div>
To save space I have put this in a fiddle: https://jsfiddle.net/so4y0nb2/15/
I've updated the jsFiddle based on your comment.
This time I took a lot more liberty with what you had and tried to put it together a way I might approach it. It's far from perfect and leaves a lot to be desired, but it should be of some help.
HTML:
<div class="row">
<div class="col-md-4">
<!-- I removed the <ul> and instead created a standalone <a>, I wasn't sure what purpose have everything in a <ul> served -->
Generating Customer Caclulations
<!-- Same container for calculators but I changed the <p> Calculators into an <a> -->
<div id="calc-nav-container">
Calculators
<ul id="calc-nav" class="calculatorList">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
</div>
<!-- the forms start here... -->
</div>
CSS:
#calc-nav-container,
#forms,
#forms form,
#calc-nav {
display: none;
}
#calc-nav-container.open,
#forms.open,
#forms form.open,
#calc-nav.open {
display: block;
}
jQuery:
$(document).ready(function(){
// Instead of hiding elements on document ready, I set the them to display none in CSS
// Prevent default behavior of anchors with #
$("a[href='#']").on('click', function(e){
e.preventDefault();
})
})
// When 'Generating Customer Calculations' is clicked
$('#gen-cust-calc').on('click', function(){
// Show both the calculator container and the first button
$('#calc-nav-container, #calc-button').toggleClass('open');
});
// When 'Calculators' is clicked
$('#calc-button').on('click', function(){
$('#calc-nav, #forms').toggleClass('open');
});
// Handle click for calculators
$("#calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
// I like to use classes instead of the .show() or .hide() methods because I don't like the inline styles they add
function toggleForms(id) {
// Remove any open class
$('#forms form').removeClass('open');
// Toggle open on the clicked form
$('#' + id).toggleClass('open');
}
I have three fields and one next button. I have to display each field one by one after clicking on next button. Means I have to display only one field at a time.
For example. First text box displaying with next button after clicked on next button then display a second text box with next button same on third one but this time no next button. It will display submit button. Would you help me out in this?
.steps{
max-width:500px;
height:auto;
margin:0 auto;
padding:70px 0;
background:#ffffff;
border:1px solid #e1e8f2;
position:relative;
text-align:center;
}
label
{
display: block;
}
.field-set
{
text-align: left;
}
<div class="steps">
<p class="form_title">Please Fill The field Bellow</p>
<form action="#" method="post" autocomplete="off">
<div class="field-set">
<label>name</label>
<input type="text" id="name" name="name" placeholder="Enter You Name"/>
</div>
<div class="field-set">
<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter You Email"/>
</div>
<div class="field-set">
<label>mobile</label>
<input type="text" id="mob" name="mob" placeholder="Enter Your mobile no"/>
</div>
<div class="field-set">
<input type="submit" name="next" value="next" id="click_next">
</div>
</form>
</div>
Try something like
var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
e.preventDefault()
$(".field-set").eq((countshow - 1)).hide();
if (count > countshow) {
$(".field-set").eq(countshow).show();
countshow++;
} else {
$("form").unbind("submit").submit();
}
})
I've also changed some of your css.
.field-set {
text-align: left;
display: none;
}
.field-set:first-of-type,
.field-set:last-of-type {
display: block;
}
var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
e.preventDefault()
$(".field-set").eq((countshow - 1)).hide();
if (count > countshow) {
$(".field-set").eq(countshow).show();
if ((count - 1) == countshow) {$(this).val("sumbit")}
} else {
$("form").unbind("submit").submit();
}
countshow++;
})
.steps {
max-width: 500px;
height: auto;
margin: 0 auto;
padding: 70px 0;
background: #ffffff;
border: 1px solid #e1e8f2;
position: relative;
text-align: center;
}
label {
display: block;
}
.field-set {
text-align: left;
display: none;
}
.field-set:first-of-type,
.field-set:last-of-type {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- start Form Steps -->
<div class="steps">
<p class="form_title">Please Fill The field Bellow</p>
<form action="#" method="post" autocomplete="off">
<div class="field-set">
<label>name</label>
<input type="text" id="name" name="name" placeholder="Enter You Name" />
</div>
<div class="field-set">
<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter You Email" />
</div>
<div class="field-set">
<label>mobile</label>
<input type="text" id="mob" name="mob" placeholder="Enter Your mobile no" />
</div>
<div class="field-set">
<input type="submit" name="next" value="next" id="click_next">
</div>
</form>
</div>
<!-- End Form Steps -->
Try something like this:
$(document).ready(function(){
var step = 1;
$('#btn').click(function(){
if( step < 5 )
{
$('.txt').eq(step - 1).hide();
$('.txt').eq(step).show();
step++;
}
else
{ /*Submit the form here*/ }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="txt" placeholder="1">
<input class="txt" style="display:none;" placeholder="2">
<input class="txt" style="display:none;" placeholder="3"><input class="txt" style="display:none;" placeholder="4">
<input class="txt" style="display:none;" placeholder="5">
<input type="button" value="Next" id="btn">
I have few div elements and inside every div one checkbox.
On click this div I want to check/uncheck checkbox and add class like active or checked. Have some code if you have any idea.
<div class="filter">
<div id="select_10">
<input type="checkbox" name="what" />
visible1
</div>
<div id="select_91">
<input type="checkbox" name="ever" />
visible2
</div>
<div id="select_101">
<input type="checkbox" name="whatever" />
visible3
</div>
</div>
using this code:
$(document).on("click", "div.filter div", function (event) {
var target = $(event.target);
var id = $(this)attr('id');
if (target.is('div#'+id+' input:checkbox')) {
return;
}
var checkbox = $(this).find("input[type='checkbox']");
checkbox.prop("checked", !checkbox.is(':checked'));
});
$(this)attr('id'); should have a . like in
$(this).attr('id');
That's it.
Why using DIV and JS when we have <label> for that purpose!
.filter label {
cursor: pointer;
display: block;
background: #eee;
margin:5px; padding: 10px;
}
<div class="filter">
<label id="select_10">
<input type="checkbox" name="what" />
visible1
</label>
<label id="select_91">
<input type="checkbox" name="ever" />
visible2
</label >
<label id="select_101">
<input type="checkbox" name="whatever" />
visible3
</label >
</div>
all you need. Style label as you would for your DIV by just adding eventually display: block;
Or you can even move the inputs before the label and style the complete LABEL elements in pure CSS:
.filter input{
position: absolute;
visibility: hidden;
}
.filter label {
cursor: pointer;
display: block;
margin:5px; padding: 10px;
background: #eee;
}
.filter input:checked + label{
background: #cf5;
}
.filter label:before{content: "\2610";}
.filter input:checked + label:before{content: "\2611";}
<div class="filter">
<input id="ckb_10" type="checkbox" name="what" />
<label for="ckb_10">
what
</label>
<input id="ckb_91" type="checkbox" name="foo" />
<label for="ckb_91">
foo
</label>
</div>
Here is the 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 the contact form is hidden when the page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides the contact form down and shows it */ $('div#contact-form').slideDown(); }, function () { /* hides it 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">
Close</p>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the 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 a {
/*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 a {
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, I this it would be smart of you to use jquery and do it yourself. It's not that hard at all and the JS code is very short and easy.
First, you need to style the contact form and the menu so it looks the same way as it does when the contact form is expanded. I'm guessing you can actually use the code you already have. But I understand your biggest problem is with the javascript code.
Make sure that the anchor tag has the id: id="contact_button" and that the form is wrapped within a div with the id="contact-form"
So the HTML needs to be something like:
<ul>
<li>Menu 1</li>
<li>item 2</li>
<li>Menuitem 3</li>
<li><a id="contact-button" href="/contact-form">Contact</a></li>
</ul>
<div id="contact-form">
<form action="#" method="post">
...
</form>
</div>
Then, to make the contact form show, you need to put jquery on your html page somewhere and you need to place the following code within another .js file or within tags:
$(document).ready(function(){
/* make sure the contact form is hidden when the page loads: */
$('div#contact-form').hide();
$('a#contact-button').toggle(function(){
/* slides the contact form down and shows it */
$('div#contact-form').slideDown();
}, function () {
/* hides it again */
$('div#contact-form').slideUp();
}
}
That's it. As for the code to actually send the email using .net you can maybe follow this tutorial:
http://www.aspnettutorials.com/tutorials/email/email-aspnet2-vb.aspx
I've not tried this, so I'm not certain about it, but it's probably right:
sfHover is defined thusly:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
Take a close look at this line:
document.getElementById("nav")
It's looking for an element with an id of nav - in your "prototype HTML", you do not have an element with that id.
You don't appear to have any need for sfHover in your "prototype HTML", so you should just get rid of the entire function. If you do need it, you need to change nav into an id you actually have in your HTML (or change an id in your HTML to nav).