JavaScript - Strange Behavior With Intervals

i know there are pre-made scripts to do what i'm doing. i want to create this myself to learn.

i'm trying to create a list of section titles with arrows next to them, clicking on an arrow expands the section to read it's text, clicking on the arrow again collapses the section text. additionally, i would like an "expand all" and "collapse all" link and that's where my issue baffles me.

my js -
Code:

function expandAll() {
	var collapsedDivs = document.getElementsByClassName('collapsed');
	for (var i=0; i<collapsedDivs.length; i++) {
		var expandMe = collapsedDivs[i];
		expandMe.style.display = 'block';
		expandMe.addClassName('expanded');
		expandMe.removeClassName('collapsed');
		document.getElementById('arrow_'+i).innerHTML = '<img src="../media/hide.gif" />';
	}
}

my html -
Code:

<div style="float:left" id="arrow_0"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION ONE TITLE</div>
<div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section one text text text text text text text text text text text text text text text text text text text text text text </div>

<div style="float:left" id="arrow_1"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION TWO TITLE</div>
<div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section two text text text text text text text text text text text text text text text text text text text text text text </div>

<div style="float:left" id="arrow_2"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION THREE TITLE</div>
<div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section three text text text text text text text text text text text text text text text text text text text text text text </div>

<div style="float:left" id="arrow_3"><img src="../media/show.gif" /></div><div style="margin-left:20px; text-align:left; font-weight:bolder; font-size:14px">SECTION FOUR TITLE</div>
<div class="collapsed" style="margin-left:20px; margin-right:30px; text-align:left; display:none">Section four text text text text text text text text text text text text text text text text text text text text text text </div>

upon executing the function, the result is the text for sections one and three being expanded and the arrows for one and two being changed. why? what am i doing wrong?

I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one.

I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript.

I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas?

Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230.

I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks!

Hey guys,

I am new at JavaScript, but I have been able to piece together some code for a stopwatch. I have everything the way I want it in regards to the function and look of the stopwatch, but I want to be able to set timers so that the ss() function in the code below will go and stop automatically at intervals I can set.

I just can't seem to get there with this one and any help is greatly appreciated. Thank you for your time.

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
var t=[0, 0, 0, 0, 0, 0, 0, 1];

	document.onkeyup=function(event) {
    if((event.which && event.which === 32) || (event.keyCode && event.keyCode === 32)) 
    {
    ss()
    }
}
	function ss() 
	{
	t[t[2]]=(new Date()).valueOf();
	t[2]=1-t[2];
	if (0==t[2]) 
	{
		clearInterval(t[4]);
		t[3]+=t[1]-t[0];
		t[4]=t[1]=t[0]=0;
		disp();
	} 
	else 
	{
		t[4]=setInterval(disp, 43);
	}
	}

	function r() 
	{
	if (t[2]) ss();
	t[4]=t[3]=t[2]=t[1]=t[0]=0;
	disp();
	t[7]=1;
	}

	function disp() 
	{
	if (t[2]) t[1]=(new Date()).valueOf();
	t[6].value=format(t[3]+t[1]-t[0]);
	}

	function format(ms) 
	{
	var d=new Date(ms+t[5]).toString()
		.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
	var x=String(ms%1000);
	while (x.length<3) x='0'+x;
	d+='.'+x;
	return d;
	}

	function load() 
	{
	t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
	t[6]=document.getElementById("disp");
	disp();
	}

</script>
</head>
<body onload='load();'>
<div></div>
<input type="text" style="border: none" id="disp" readonly />
<style type="text/css">
#disp {
    font-size: 180px;
    text-align: center;
    font-family: Verdana;
}
</style>
</body>
<form>
</form>
</html>

Hi everyone
Im new here nice forum

Hope someone can help out with my problem
http://www.testingremote.ucoz.com/
When you click on anything other than home on the nav bar it messes up the
appear/fade behavior that I added with dreamweaver

any solutions ?
Please help !

Hi, I am trying to figure out how the get the featured area



at http://blueoceanportfolios.com to link to webpages rather than displaying it within the featured box on the left .

This area is using JS file to display the videos on content in the featured box when different items on the menu are clicked, here is the working example :

http://www.blueoceanportfolios.com/company/

Okay ,
The problem: Loading a new webpage rather than displaying the content at featured box at http://blueoceanportfolios.com

Tried solutions: linking to javascript functions like onclick="window.location="http://someplace.com";" etc but still the content loads up in the featured box ,
try clicking on 2) it displays http://www.codingforums.com rather than loading new page.

Any suggestions

I have been testing regex test string to match the following pattern
(- <any number with/without . decimal point>)
( -[#[.#]] )
here is the code that works the best:
Code:

var testStr = '99999+((-25.533) - 5)/99*(-25.533)';
var negValTestStr = new RegExp('\\(\-{1}[0-9]*\.?[0-9]*\\)', 'g');
var test = testStr.match(negValTestStr)
alert(test);

The question is: Why does it only work when the open and close
parenthesis are double escaped: '\\(' and '\\)'
When I use one backslash to escape, it will find -25.533, -5 and -25.533
With two backslashes for escape sequence: (-25.533), (-25.533)

Also, I have to escape the - to get just one -. If I do not escape the -,
-?; which should read - {0, 1} will match --# without escaping -

Thanks for thoughts on this
JK

Ok, so I wanted to use the following object to copy the contents of the Report array at index [file][entry].
Code:

  Selected = {
   fileIndex : file,
   entryIndex : entry,
   Entry : Report[file][entry]
   }

This was done so that the user may perform modifications to the entry without updating the entry until I have run validation on the input. Then I used
Code:

  if(valid)
   Report[Selected.fileIndex][Selected.entryIndex] = Selected.Entry

to finish up. I noticed that the Report array was getting the new input even when I didn't validate.

I used the following to view all the contents of the Report Array in real time

Code:

window.setInterval('SHOW_ARRAY();',200);
Report=[];
function SHOW_ARRAY(){
 HTML('ReportDebug','')	//Reset "ReportDebug" HTML element
 for(var t in Report){
  for(var y in Report[t]){
   for(var u in Report[t][y]){
    HTML('ReportDebug','<span style="position:relative ; border:2px solid black">'+Report[t][y][u]+'</span>',1) // last argument signifies to append HTML element
    }
   }
   HTML('ReportDebug','<br />',1)
  }
 }

And what I discovered was that whenever I stored values in Selected.Entry the Report array would update with those values!
This is my first attempt to create an object in this fashion, so my only guess is that Selected.Entry is not independent from Report[file][entry], but instead some kind of pointer... Where have I gone wrong, and how can I accomplish my goal?
Let me know if my code samples were too brief.

Since it is not clear to me where this post should fit in the forum, I'm just posting it here.

Is it possible to create a tracking code that would allow me to:

(1) a) Find out the identity of visitors to a certain website (a website unrelated to me and the visitors did not visit my website)
b) The identity of those who recently searched for a certain keywords
and/or...
(2) Find out what websites certain individuals have recently visited (or visiting in real-time)?

Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question.

I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance:

Code:

 <table>
    <tr>
        <td onmouseout="window.alert('you moused out of td');">
            <img src="image0.gif" style="height:50px; width:50px;" />
        </td>
    </tr>
</table>

In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element.
I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You.

Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right.

Hi guys! I'm having trouble deciphering the javascript on my webpage

www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads.

Here is the code:

Code:

jQuery.noConflict(); jQuery(document).ready(function(){

	//VAR SETUP
	var rightBg = jQuery('#rightBg'),
		boxStuff = jQuery('.boxStuff'),
		bgControls = jQuery("#bgControls"),
		nextImg = jQuery('#nextImg'),
		prevImg = jQuery('#prevImg'),
		blogNav = jQuery('#blogNav'),
		navBox = jQuery("#navBox"),
		navBoxa = jQuery("#navBox a"),
		navHeight = navBox.height(),
		firstImg = jQuery('.wrapperli:first-child'),
		lastImg = jQuery('.wrapperli:last-child'),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPhone = deviceAgent.match(/(iphone|ipod)/);
	
	//CLOSE FUNCTION
	function closeSesame(){
		jQuery('.activeBox').fadeOut(600,function(){
			navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
			jQuery(".activeNav").removeClass('activeNav');
			rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
			bgControls.fadeIn(600);
		}).removeClass('activeBox');
	}
	
	//OPEN FUNCTION
	function openSesame(){
		navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
		rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
			jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
			navBox.fadeIn(600);
		});
		bgControls.fadeOut(300);
	}
	
	//OPACITY STUFF
	rightBg.css({opacity:".85"});
	
	//REMOVE TITLE ATTRIBUTE
	jQuery("#dropmenu a").removeAttr("title");

	//MENU
	jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
	jQuery("#dropmenu li").hover(function(){
		jQuery(this).find('ul:first').show();
	},function(){
		jQuery(this).find('ul:first').hide();
	});
	jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>&rsaquo;</span>");
		
	//PRETTY PHOTO
	jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
	jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
	jQuery("a[rel^='prettyPhoto']").prettyPhoto({
		animation_speed: 'normal', // fast/slow/normal 
		opacity: 0.35, // Value betwee 0 and 1 
		show_title: false, // true/false 
		allow_resize: true, // true/false 
		overlay_gallery: false,
		counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2 
		//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square 
		hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto 
		modal: false // If set to true, only the close button will close the window 
	});	
		
	//WINDOW LOAD
	jQuery(window).load(function(){
		//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
		jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
		
		//LOAD MESH BG
		jQuery('#mesh').fadeIn(600);
		
		jQuery('#loading').fadeOut(600);
		
		//IF GALLERY PAGE
		if(jQuery('body').hasClass('page-template-page_gallery-php')){
			navBox.fadeIn(600);
			bgControls.fadeIn(600);
			jQuery(".wrapperli:first-child a").click();
		//IF NOT GALLERY PAGE
		} else { 
			openSesame();			
		}
	});
	
	//FADE CRUMBS IN/OUT ON SCROLL
	jQuery('#pageContent').scroll(function(){
		if(jQuery('#pageContent').scrollTop()>150){
			blogNav.fadeOut(300);
		} else {	
			blogNav.fadeIn(300);
		}
	});	

	//NAV BOX STUFF
	navBox.css({marginTop:"-"+navHeight/2+"px"});
	boxStuff.css({marginTop:"-"+navHeight/2+"px"});

	//NAV BUTTON CLICK
	navBoxa.click(function(){
		
		//VAR SETUP
		var thisBox = jQuery(this).attr('href');
			
		//IF ACTIVE LINK, CLOSE STUFF
		if(jQuery(this).hasClass('activeNav')){
			closeSesame();
			return false;
		
		//IF NOT ACTIVE LINK
		}else{
			
			//IF CONTENT OPEN
			if(navBox.hasClass("openNav")){
				navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
				jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
				jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
					jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
				});
			
			//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});
	
	//CLICKING GALLERY IMG
	jQuery(".wrapperli a").click(function(){
		
	if(iPhone){
		return false;	
	}else{
		//GET HREF
		var galleryHref = jQuery(this).attr('href'),
			galleryTitle = jQuery(this).attr('title'),
			imageInfo = jQuery('#imgInfo'),
			itemNumber = jQuery(this).parent().index() + 1;
			numberItems = jQuery('.wrapperli').length;
				
		//CHANGE TITLE INFO	
		if(galleryTitle){
			imageInfo.hide().html(galleryTitle + "&nbsp / &nbsp"+ itemNumber + " of " + numberItems).fadeIn(150);
		} else {
			imageInfo.hide();
		}
		
		//CHANGE CLASSES
		jQuery(".wrapperli").not(this).removeClass('activeImg');
		jQuery(this).parent().addClass('activeImg');
		
		//IF MENU OPEN, CLOSE IT
		if(navBox.hasClass("openNav")){ closeSesame(); }
		
		//CHANGE BACKGROUND
		jQuery.backstretch(galleryHref, {speed: 300});

		return false;
	}
	});
	
	//NEXT CONTROLS
	nextImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.next().length > 0){
				activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				firstImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	//PREV CONTROLS
	prevImg.click(function(){
		var activeImg = jQuery('.activeImg');
		if(activeImg.length > 0){
			if(activeImg.prev().length > 0){
				activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
			} else {
				activeImg.removeClass('activeImg');
				lastImg.addClass('activeImg').children().click();
			}
		} else {
			firstImg.addClass('activeImg').children().click();
		}
		return false;
	});
	
	// Keyboard shortcuts
    jQuery(document).keydown(function(e) {
    	var unicode = e.charCode ? e.charCode : e.keyCode;    	
        if (unicode == 39) { nextImg.click();} // right arrow
        else if (unicode == 37) {prevImg.click();} // left arrow
    });
    
});

and I changed the open sesame to closed sesame here in the code

Code:

//IF CONTENT NOT OPEN
			} else {
				jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
				jQuery(thisBox).addClass('activeBox');
				openSesame();
			}
		}
	});

but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated!

Hi,

I used the code on the following example:
http://www.w3schools.com/php/php_ajax_livesearch.asp

Instead of xml I use mysql but it works the same way.


My problem is with this character '#' (shift 3 - on my keyboard, or otherwise known as 'sharp').

Some of the words in my database table contain this character but when I type it, it acts like nothing was typed.


Any idea on what to do to make this work like any other character?

Thanks

Hi!

I couldn't find any information about this topic in the internet and I really wonder, how come people do not discuss it anywhere?

Okay, jQuery works really great and offers many interesting effects, but what if you have JavaScript disabled? I mean I've browsed through several websites powered by jQuery with JS disabled and they doesn't work or behave weird. I know there aren't much people, who disable JS, but well I do want my page to be seen by all people in the end.

I managed to do it with slider on my page (however I want to use other jQuery effects), but, for example, http://www.flowplaye...ools/index.html doesn't provide any information about this. Try to disable JS and see that nothing works.

I can use <noscript></noscript> tag, but I have to make two main pages. And what if I want to view it on one page? What would you do?

Regards,
Aleks.

I am attempting to implement a Close icon which responds to mouseover, mouseup, mousedown, and mouseout. The problem is that the first DIV I display, using this code, works as intended, i.e. all the button states work. I can close and reopen the same DIV and everything is still fine. If I open a second DIV, which uses the reuse code below, the button states do not appear, although the DIV will close properly. If I step through the debugger all of the state images load properly but do not appear. Once I have tried to use the button in the second DIV, all of the DIV's fail to display the button states but close properly. Additionally all of the pages where this is used are generated using XMLHttpRequest(). The DIV's using this are generated when the site loads and then shown and hidden as needed with their contents being generated via XMLHttpRequest(). Anyone have any ideas?

The intent is to reuse the following in a number of DIV's:
Code:

rtn =  "<div id='closepanel' class='closepanel'><img src='images/closebutup.png' name='closebut' width='20px' height='20px' border='0px' onmouseover=\"swapbuttonstate('closebut','over')\" onmouseout=\"swapbuttonstate('closebut','out')\" onmousedown=\"swapbuttonstate('closebut','down')\" onmouseup=\"closePanel('"+this.msDivid+"')\" ></div>";

On startup I preload the images using :
Code:

if (document.images) {
	closebutup= new Image();
	closebutup.src="images/closebutup.png";
	closebutover= new Image();
	closebutover.src="images/closebutover.png";
	closebutdown=new Image();
	closebutdown.src="images/closebutdown.png";
}

The swapbuttonstate function is defined as:
Code:

function swapbuttonstate(buttonname, state) {
	switch(state) {
		case "over":
			if (document.images) {
				butover=eval(buttonname + "over.src");
					document[buttonname].src= butover;
			}
			break;
		case "out":
		case "up":
			if (document.images) {
				butup=eval(buttonname + "up.src");
					document[buttonname].src= butup;
			}
			break;
		case "down":
			if (document.images) {
				butdown=eval(buttonname + "down.src");
					document[buttonname].src= butdown;
			}
			break;
		}
}

and closePanel is defined as:
Code:

function closePanel(divid) {
	document.getElementById(divid).style.display='none';
}

Any help would be greatly appreciated.

The code below is supposed to cancel the default form behavior when it finds certain info missing. Currently, however, in spite of detecting missing info it allows the form submission to continue. Anyone see what wrong? Thanks.

Code:

var DOM = YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(init);
 
function init() {
	YAHOO.util.Event.addListener("contact_form", "submit", checkForm);
}
 
function checkForm() {
	var fName = DOM.get('f_name');
	var lName = DOM.get('l_name');
	
	if (fName.value == "") {
		DOM.get('f_name_error').innerHTML = "This field is required!";
		fName.focus();
		 return false;  
	}

Hello All,

Below is my code, I am needing to get to where the label name will match the behavior that my field currently does. If nothing is entered the field is changed to a red background. If it is focused it goes back to white. I am needing the font color of the label to match color of the field and match the same behavior.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab06 - Form Validation</title>
<script type="text/javascript" charset="utf-8">



	function passcheck(){
		var pw1 = document.forms[ 0 ].password.value;
		var pw2 = document.forms[ 0 ].passcomf.value;
		
		if ( pw1 != pw2 ) {
			alert ("You did not enter the same new password twice. Please re-enter your password.");
			return false;
		}else{
			return true;
		}
	}


	function validate( ) {
		var errors = new Array( );
		
		for( var i = 0; i < document.forms[ 0 ].elements.length ; i++ ){
			
			if( document.forms[ 0 ].elements[ i ].type == "text" ) {
				if( document.forms[ 0 ].elements[ i ].value == "" ){
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");
					
					document.forms[ 0 ].elements[ i ].className = "in_error";
					
					
					
				}
				
			
			}
		
			if( document.forms[ 0 ].elements[ i ].type == "select-one") {
				if(document.forms[ 0 ].elements[ i ].selectedIndex == 0 ) {
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
						
					document.forms[ 0 ].elements[ i ].className = "in_error";
				}
		 }
		 
		 	if( document.forms[ 0 ].elements[ i ].type == "select-one") {
				if(document.forms[ 0 ].elements[ i ].selectedIndex == 2 ) {
					errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
						
					document.forms[ 0 ].elements[ i ].className = "in_error";
				}
		 }
		 

			




	}
		if( errors.length == 0 ) {
			return true;
		} else {
			clear_errors( );
			show_errors( errors );
			
			return false;
		}
		

	}
	

	
	function clear_errors( ){
		var div = document.getElementById( "errors" );
		while( div.hasChildNodes( ) ){
			div.removeChild( div.firstChild );
		}
	}
	
	function show_errors ( errors ) {
		var div = document.getElementById( "errors" );
		for( var i = 0; i < errors.length; i++ ){
			var error = document.createTextNode( errors[ i ] );
			var p = document.createElement( "p" );
			p.appendChild( error );
			div.appendChild( p );
		}
	}
	

	window.onload = function( ) {
		document.forms[ 0 ].onsubmit = validate;
		
	}



</script>


<style type="text/css" media="screen">
	#errors {
		color: #F00;
	}
	.in_error {
		background-color: #F00;
	}
	input:focus {
		background-color: #FFF;
	}
	select:focus {
		background-color: #FFF;
	}
</style>

</head>

<body>

	<h1>Form Validation</h1>
    
    <div id="errors"></div>
    
    <form action="" method="post" onsubmit="return passcheck()">
    	 <p>
        	<label for="firstname" id="labelfirstname">First name:</label>
            <input type="text" name="First name" value="" id="firstname" />
        </p>
         <p>
        	<label for="lastname" id="labellastname">Last name:</label>
            <input type="text" name="Last name" value="" id="lastname"/>
        </p>
         <p>
        	<label for="middlei" id="labelmiddlei">Middle initial:</label>
            <input type="text" name="Middle initial" value="" id="middlei"/>
        </p>
         <p>
        	<label for="address" id="labeladdress">Street address:</label>
            <input type="text" name="Street address" value="" id="address"/>
        </p>
         <p>
        	<label for="city" id="labelcity">City:</label>
            <input type="text" name="City" value="" id="city"/>
        </p>
         <p>
        	<label for="State" id="labelstate">State:</label>
            <input type="text" name="State" value="" id="state"/>
        </p>
         <p>
        	<label for="zipcode" id="idzipcode">Zipcode:</label>
            <input type="text" name="Zipcode" value="" id="zipcode"/>
        </p>
         <p>
        	<label for="username" id="labelusername">Username:</label>
            <input type="text" name="Username" value="" id="username"/>
        </p>
         <p>
        	<label for="password" id="labelpassword">Password:</label>
            <input type="text" name="Password" value="" id="password"/>
        </p>
         <p>
        	<label for="passcomf" id="labelpasscomf">Password comfirmation:</label>
            <input type="text" name="Password comfirmation" value="" id="passcomf"/>
        </p>
         <p>
        	<label for="agreement" id="labelagreement">User Agreement</label>
            <select name="User Agreement" id="agreement">
            	<option></option>
                <option>Yes, I agree!</option>
                <option>No, I do not agree!</option>
                </select>
        </p>
		<p><input type="submit" value="Register &rarr;" onclick="return passcheck(); return true;"/></p>
        </form>
</body>
</html>