JavaScript - Problem Adding Javascript Function Calls During Onload Page Event

Hey, im having another problem with my JavaScript. I wanted to call 2 functions inline, but I can't seem to do it. So I have added the function (add_event_listeners) to the function (load_doc) that is usually called.

JavaScript debugger is saying: Code:

Uncaught TypeError: Cannot read property 'addEventListener' of null

JavaScript:
PHP Code:
//Get httpobject
function getHTTPObject() {
    var http = false;
    if (window.XMLHttpRequest) { 
        http = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return http;
}
//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
    if ( elm.addEventListener ) {
        elm.addEventListener( evt, fun, false );
    } else if ( elm.attachEvent ) {
        elm.attachEvent( 'on' + evt, fun );
    } else {
        elm [ 'on' + evt ] = fun;
    }
};

function load_doc(doc, parent) {
    add_event_listeners();
    document.getElementById(parent).innerHTML = "Fetching data...";
    var http = getHTTPObject();
    if (http != undefined) {
        http.onreadystatechange = function() { req_doc(doc, parent, http); };
        http.open("GET", doc, true);
        http.send("");    
    }
}
function req_doc(doc, parent, req) {
    if (req.readyState == 4) {//only if req is loaded
        if (req.status == 200) {//And if its okay
            document.getElementById(parent).innerHTML = req.responseText;
        } else {
            document.getElementById(parent).innerHTML = "Error fetching data: " + req.status + "\n" + req.statusText;
        }
    }
}

//Script used to hide elements. Usage: expand(element id)
function expand(elm) {
    var ex = document.getElementById(elm).style.display;
    if (ex == "none") {
        var obj = document.getElementById(elm);
        obj.style.display = "inline";
    } else if (ex == "inline") {
        var obj = document.getElementById(elm);
        obj.style.display = "none";
    }
}
function add_event_listeners() {
    addEvent(document.getElementById('username'), "click", check_database);
    addEvent(document.getElementById('email'), "click", check_database);
    addEvent(document.getElementById('password_2'), "blur", check_password);
}
var check_database = function() { check_database_existing(this); };
var check_password = function() { compare_fields(this); };

function check_database_existing(obj) {
    
}
function compare_fields(obj) {
    var field2 = obj.id.split("_");
    field2 = document.getElementById(field2[0]).value;
    if (obj.value == field2) { 
        if (obj.value.length >= 4) {
            document.getElementById("pass_status").style.color = "#00CC00";
            document.getElementById("pass_status").innerHTML = "OK!";
        } else {
            document.getElementById("pass_status").innerHTML = "Please must be between 5 - 14 characters long! ";
            document.getElementById("pass_status").style.color = "#FF0000";
        }
    } else {
        document.getElementById("pass_status").innerHTML = "Passwords do not match!";
        document.getElementById("pass_status").style.color = "#FF0000";    
    }
} 


HTML:
Code:

<div style="border-color:#090; border-width:1px; border-style:solid;">
<div class="login_button register_button" onClick="load_doc('pages/forms/login_form.php', 'login_form')">Back to login</div>
<h1>Register</h1>
    <h3>DrawSomething - WordGuesser</h3>
    <br />
	<form id="register" action="php/register.php" method="post">
		Username<br /><h4 id="username_status">(waiting)</h4><br /><input type="text" name="username" id="username" class="text login_field"><br />
        Email<br /><h4 id="email_status">(waiting)</h4><br /><input type="email" name="email" id="email" class="text login_field"><br />
        --<br />
        Password<br /><input type="password" name="password" id="password" class="text login_field"><br />
        Retype<br /><h4 id="pass_status">(waiting)</h4><br /><input type="r_password" id="password2" name="password" class="text login_field">
        <br />
		<input type="submit" value="Register" class="button green" />
	</form>
</div>

I have an aspx with javascript, and I used to call a script func whenever the page was loaded. Suddenly it doesn't work. I then tried to simplify things to
<body onload="alert('hello');"
and no alert is shown, nor do I get any error. How come the onload event doesn't fire? How do I fix it?

thanks in advance

Good morning guys.

I am new to Javascript and am trying to add some functionality to a website but have come across a problem when trying to utilise two seperate Javascript onloads events. I have a text scroller to display the latest news and I also have a javascript lightbox gallery.

Both of these events work perfectly on their own but when I try to include both on one page only one of the events is executed.

My code is displayed below:

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
	<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
	<script type="text/javascript">
		$(function(){ 
		    $("ul#news-scroller").liScroll({travelocity: 0.04}); 
		}); 
</script>

</head>
<body onload="clickMenu('gallery'); initLightbox()">

If anyone could tell me where my mistake is I would be so grateful.

I know it is probably a really obvious mistake but being new to this I am unsure where to start looking.

Thanks in advance!

Mack

Greetings!

Im new in JS, I have two sets of codes and I searched that JS code will not
execute if there is two onload event at the same time. How can I get rid of these

here are my codes from

http://code.jquery.com/jquery-1.6.3.min.js
http://ajax.googleapis.com/ajax/libs.../jquery.min.js


Code:

else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);

and

Code:

else if(c.attachEvent){c.attachEvent("onreadystatechange",C),a.attachEvent("onload",e.ready);

Is it possible to combine the two? any help will be appreciated.

If I use a window opener to open a new window, is there a way to detect that the new window is finished loading before carrying out some other directive in the opener window? Can I access the remote window's onload event from the opener window? I need to know that the website has loaded before moving to the next page. something like:

remoteWindow.onload = goToPage(url);

Is this even possible?

Is it possible to capture function calls?

for example:

alert('hello world');

is there a way to capture this function call.

Why do i want to do this:

1. i need a way to test if a function exist before it is called, so i dont get undefined errors etc.

2. try/catch only works on sections of code, i need a global solutions.(can i capture functions calls on remotely loaded scripts, like google analytics etc )

Hi, I've been playing around trying to recreate the way in which jQuery chains it's functions for it's "select" then "do" behaviour.

Note: I don't want to chain functions with jQuery, I want to chain them like jQuery.

So based on the jQuery code what I have so far is (doesn't work in IE):

Code:

var x = function(string) {
    return new x.fn.init(string);
};

x.fn = x.prototype = {

    message: '',

    init: function(string) {
        x.fn.message = string;
    },

    log: function() {
       console.log(x.fn.message);    
    }
};

x.fn.init.prototype = x.fn;

var start = function() {    
    x('hello world').log();
};

document.addEventListener('DOMContentLoaded', start, false);

The code works but when I watch '$' in jQuery "fn" & "prototype" show up as being "jQuery()" but in my code when I watch "x": "fn" and "prototype" are both shown as objects containing "message", "init" and "log" and in both cases "init" contains "prototype" which contains my three functions again and the nesting continues seemingly infinitely...

I'm clearly missing something here. What are they doing in differently in jQuery to prevent this endless nesting loop?

Hello everyone,
If I type the name, and I check and Gender Scholar, my button will

appear
What I am looking to:
Check my buttons, and when I start typing the name, the button

Submit appear, st if I delete the text, the Submit button

disappear

Here's the script:


Code:

<head>
  <script type="text/javascript" src="jquery.validate.js"></script>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  function check_required(){
	
	//alert(document.getElementById('rdo_boursier_oui').checked);
	//alert(document.getElementById('txt_lastname').value != "");
	if((document.getElementById('rdo_boursier_oui').checked == true 

|| document.getElementById('rdo_boursier_non').checked == true) &&

(document.getElementById('rdo_sexe_eleve_m').checked == true || 

document.getElementById('rdo_sexe_eleve_f').checked == true)
	
&&	(document.getElementById('txt_lastname').value != "" )

	
	)
 	{
		document.getElementById

('submit_etape2').style.display='block';
	}else{
		document.getElementById

('submit_etape2').style.display='none';
	}
  }
  </script>
  </head>
  
  
  <form action="#" method="post" id="commentForm">
   	<input class="submit" type="submit" name="submit_etape2" 

id="submit_etape2" value="" style="display:none;"/>
  				
			<p class="p_float">
				<label for="lastname">Votre nom<span 

class="required_red">*</span></label>
				<input type="text" name="txt_lastname" 

id="txt_lastname" value="" class="required" minlength="3" 
               
                onchange="check_required();"
                 />
			</p>
			
			
			<p class="p_float rdo">
				<label for="boursier">Boursier<span 

class="required_red">*</span></label>
			
				<input type="radio" name="rdo_boursier" 

id="rdo_boursier_oui" value="" class="rdo_sexe_eleve snd_inscription 

required" onclick="check_required();"/>Oui
				<input type="radio" name="rdo_boursier" 

id="rdo_boursier_non" value="" class="rdo_sexe_eleve snd_inscription 

required" onclick="check_required();"/>Non
			</p>
			
			<p class="p_float rdo">
				<label for="sexe">Sexe<span 

class="required_red">*</span></label>
				<input type="radio" 

name="rdo_sexe_eleve" id="rdo_sexe_eleve_m" class="rdo_sexe_eleve 

snd_inscription required" onclick="check_required();" value="">M
				<input type="radio" 

name="rdo_sexe_eleve" id="rdo_sexe_eleve_f" class="rdo_sexe_eleve 

snd_inscription required" onclick="check_required();" value="">F
			</p>
			
            
  
  </form>

Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event.

It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it.

I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event.

Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch.

I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled).

Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)?

Code:

/*-----------------------------------------------------------------------------------*/
// Show Hide Posts
/*-----------------------------------------------------------------------------------*/

### Function: Enqueue JavaScripts
add_action('wp_enqueue_scripts', 'showhide_scripts');
function showhide_scripts() {
	wp_enqueue_script('jquery');
}


### Function: Short Code For Inserting Show/Hide Into Post
add_shortcode('showhide', 'showhide_shortcode');
function showhide_shortcode($atts, $content = null) {
	// Variables
	$post_id = get_the_id();
	
	// Extract ShortCode Attributes
	extract(shortcode_atts(array(
		'type' => 'show',
		'more_text' => __('View Full Post'),
		'less_text' => __('Close Post'), 
		'hidden' => 'yes'
	), $atts));
	

	// Determine Whether To Show Or Hide Content
	$hidden_css = 'display: none;';
	if($hidden == 'no') {
		$hidden_css = 'display: block;';
		$type = 'hide';
		$tmp_text = $more_text;
		$more_text = $less_text;
		$less_text = $tmp_text;
	}

	// Format HTML Output
	$output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>';	
	$output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>';
	
	
	return $output;
}


### Function: Add JavaScript To Footer
add_action('wp_footer', 'showhide_footer');
function showhide_footer() {
	echo '<script type="text/javascript">'."\n";
	echo '/* <![CDATA[ */'."\n";
	echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n";
	echo '/* ]]> */'."\n";
	echo '</script>'."\n";
}

Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative..

Code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("commpopup");
	if(ele.style.display == "block") {
    	ele.style.display = "none";
  	}
	else {
		ele.style.display = "block";
	}
} 
</script>

<div class="togglecomment">
     <div class="popup" id="commpopup">
          <div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
     </div>
     <div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
</div>

Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script></script>
  <title>Javascript</title>
  <style type="text/css">
div
{
font-family: Georgia
}
  </style>
</head>
<body>
<script type="text/javascript">
function changetext()
{
var textchange2 = "~Home~" ;
var id = document.getElementById("A");
id.innerHTML=textchange2;
}
</script>
<div id="A" onmouseover="changetext();">Home</div>
</body>
</html>

Is there a way to make 2 functions load at the same time using window.onload? I have to seperate functions which rotate images, then another that rotates text.

Functions:

showQuote()
iAnimate()

Hi, firstly I apologise if the title of this thread isn't quite accurate. I'm sure you've all heard it before but I am a complete newbie to Javascript so again: apologies if this is boring and tiresome to even read, let alone help with!

I have been asked to make some changes to a form that uses Javascript for the form validation. There is a 'function' that contains the variables of the various form fields and then further code to raise 'alerts' if one of the fields on the form hasn't been filled in. My problem is that for some reason I am unable to add an extra variable to this code after the field of 'County' (this will hopefully make sense when you see the code / link...) and I am stumped as to why. I am able to add variables for all of the other required fields except for 'Postcode' after 'County'. This is the case for both forms. The link is he http://samdelara.co.uk/previews/banq...ation-form.htm and the code I am trying edit is below:

function checkAvailibility()
{
// re-calculate...
calculate ();
if ( isName() && isAddress1() && isTown() && isCounty() && isPostcode() && isYourEmail() && isFuncDate() && somethingToQuoteFor() && isYourEmailValid() ) {
document.ordersummary.emailQuote.value = "No";
setValue();
return true;
}
else
{
return false;
}
}


function isName() { if (document.ordersummary.Name.value=="") { alert ("\n Please Enter Your Name")
document.ordersummary.Name.focus(); return false; } return true; }
function isAddress1() { if (document.ordersummary.Address1.value=="") { alert ("\n Please Enter Your Address")
document.ordersummary.Address1.focus(); return false; } return true; }
function isTown() { if (document.ordersummary.Town.value=="") { alert ("\n Please Enter Your Town")
document.ordersummary.Town.focus(); return false; } return true; }
function isCounty() { if (document.ordersummary.County.value=="") { alert ("\n Please Enter Your County")
document.ordersummary.County.focus(); return false; } return true; }
function isPostcode() { if (document.ordersummary.Postcode.value=="") { alert ("\n Please Enter Your Postcode")
document.ordersummary.Postcode.focus(); return false; } return true; }
function isYourEmail() { if (document.ordersummary.YourEmail.value=="") { alert ("\n Please Enter Your Email")
document.ordersummary.YourEmail.focus(); return false; } return true; }
function isFuncDate() { if (document.ordersummary.FuncDate.value=="") { alert ("\n Please Enter Your Function Date")
document.ordersummary.FuncDate.focus(); return false; } return true; }
function isemailonly() { if (document.ordersummary.emailonly.value=="") { alert ("\n Please Enter Your Email Address")
document.ordersummary.emailonly.focus(); return false; } return true; }

Any help with this would be very much appreciated and once again, I apologise for my distinct lack of knowledge in this area!

Sam

Hi,

I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one.

I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something.

Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included.

If I'm not making myself clear, please let me know and I will try to explain it better

Thanks
walkie


index.htm
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>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>

<body>
	<div id="leftSide">
    	<!--Site Title-->
    	<div id="title">
        	<!--Main Title-->
        	<h1><span></span>Identity</h1>
            <!--Caption/Sub Title-->
            <span class="titleSubText">the portfolio of john smith</span>
        </div>
        <div id="arrowWrapper"><div id="arrow"></div></div>
    	<div id="buttonsWrapper">
        
        	<!--About Button-->
        	<div id="aboutButtonWrapper">
            	<div class="navButton" id="aboutButton"></div>
                <div class="navCaption" id="aboutCaption">
                	<!--About Button: Label-->
                	<span class="navCaptionText">about</span><br />
                    <!--About Button: Sub-Label-->
                	<span class="navSubCaptionText">who I am</span>
                </div>
            </div>
            
        	<!--Portfolio Button-->
        	<div id="portfolioButtonWrapper">
            	<div class="navButton" id="portfolioButton"></div>
                <div class="navCaption" id="portfolioCaption">
                    <!--Portfolio Button: Label-->
                	<span class="navCaptionText">portfolio</span><br />
                    <!--Portfolio Button: Sub-Label-->
                	<span class="navSubCaptionText">my work</span>  
                </div>
			</div>
            
        	<!--Services Button-->
        	<div id="servicesButtonWrapper">
            	<div class="navButton" id="servicesButton"></div>
                <div class="navCaption" id="servicesCaption">
                	<!--Services Button: Label-->
                	<span class="navCaptionText">services</span><br />
                    <!--Services Button: Sub-Label-->
                	<span class="navSubCaptionText">what I do</span>                  
                </div>
            </div>
            
        	<!--Contact Button-->
        	<div id="contactButtonWrapper">
            	<div class="navButton" id="contactButton"></div>
                <div class="navCaption" id="contactCaption">
                	<!--Contact Button: Label-->
                	<span class="navCaptionText">contact</span><br />
                    <!--Contact Button: Sub-Label-->
                	<span class="navSubCaptionText">get in touch</span>                  
                </div>
            </div>
            
        </div>
    </div>
    
    <div id="contentPanelWrapper">
		<div id="contentPanelEdge"></div>
        
        
        <!--Wrapper That Contains 'About' Content-->
        <div class="content" id="aboutContent">
        	<!--Title-->
        	<div class="contentTitle">about</div>
            <!--Body Text-->
            <div id="aboutText">
            	<h3>Who I Am</h3><br />
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
            	dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
            	Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
            	sagittis id neque.</p><br />
                <p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
            	pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Portfolio' Content-->
        <div class="content" id="portfolioContent">
        	<!--Title-->
        	<div class="contentTitle">portfolio</div>
            <!--Image Slider-->
            <div id="portfolioSlider">
            	<div id="sliderToolbar">
                	<div class="sliderButton" id="prevButton"></div>
                    <div class="sliderButton" id="nextButton"></div>
                </div>
            	<div id="imageWrapper">
            		<ul id="imgList">
						<!--Portfolio Images Go Here (See Documentation)-->
            			<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
                	</ul>
                </div>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Services' Content-->
        <div class="content" id="servicesContent">
        	<!--Title-->
	  		<div class="contentTitle">services</div>
            <!--Service 1 Column-->
            <div class="serviceColumn" id="serviceColumn1">
            	<h3>Identity Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 2 Column-->
            <div class="serviceColumn" id="serviceColumn2">
            	<h3>Web Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 3 Column-->
            <div class="serviceColumn" id="serviceColumn3">
            	<h3>Icon + UI Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
       	    </div>
		</div>
        
        
        <!--Wrapper That Contains 'Contact' Content-->
		<div class="content" id="contactContent">
        	<!--Title-->
  		<div class="contentTitle">contact</div> 
      		<div id="contactFormWrapper">
            	<!--Contact Form-->
       	  		<form id="contact" method="post" action="mail.php">
           	  		<input type="text" id="name" name="name" value="name" />
              		<input type="text" id="email" name="email" value="email" /><br /><br />
              		<textarea id="message" name="message" rows="" cols="">message</textarea>
              		<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
          		</form>
                <div id="successMessage"></div>
      		</div>
  	    </div>
        
        
	</div>
        
</body>
</html>

javascript.js
Code:

numImages=0;
currentImage=1;
currentPanel="none";

$(document).ready(function(){		
						   
	// Initializes FancyBox Lightbox
	$("a.sliderImage").fancybox({
		'zoomSpeedIn':200, 
		'zoomSpeedOut':200, 
		'overlayShow':true,
		'padding':4
	});
	
	SelectButton("none");
	$("#arrow").fadeOut(0);
	
	if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
		$("input").css({"height":13});
		$("#name").css({"width":155});
	};
	
	$("#title").click(function(){
		ShowPanel("none");
	});
						   
	// Handles Formatting the Portfolio Slider
	$("#imgList").children().each(function(){
		numImages++;									   
	});
	$("#imageWrapper").css({"width":(numImages*541)});
	
	// Handles Function of the Portfolio Slider
	$("#prevButton").click(function(){
		if (currentImage==1){
			currentImage=numImages;
		} else {
			currentImage--;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
	$("#nextButton").click(function(){
		if (currentImage==numImages){
			currentImage=1;
		} else {
			currentImage++;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
		
	// Handles Rollover and Click For the Nav Buttons
	$("#aboutButton").mouseenter(function(){
		SelectButton("about");
	});
	$("#portfolioButton").mouseenter(function(){
		SelectButton("portfolio");
	});
	$("#servicesButton").mouseenter(function(){
		SelectButton("services");
	});
	$("#contactButton").mouseenter(function(){
		SelectButton("contact");
	});
	$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
		SelectButton("none");
	});
	$("#aboutButton").click(function(){
		ShowPanel("about");								 
	});
	$("#portfolioButton").click(function(){
		ShowPanel("portfolio");								 
	});
	$("#servicesButton").click(function(){
		ShowPanel("services");								 
	});
	$("#contactButton").click(function(){
		ShowPanel("contact");								 
	});
	
	// Handles Contact Form Behavior	
	$("#name").focus(function(){
		$("#name").css({"background-color":"#FFFFFF"});
		if ($("#name").val()=="name"){
			$("#name").val("");
			$("#name").css({"color":"#444444"});
		};
	});
	$("#name").blur(function(){
		if ($("#name").val()==""){
			$("#name").val("name");
			$("#name").css({"color":"#888888"});
			$("#name").css({"background-color":"#ffdddd"});
		};
	});
	$("#email").focus(function(){
		$("#email").css({"background-color":"#FFFFFF"});
		if ($("#email").val()=="email"){
			$("#email").val("");
			$("#email").css({"color":"#444444"});
		};
	});
	$("#email").blur(function(){
		if ($("#email").val()==""){
			$("#email").val("email");
			$("#email").css({"color":"#888888"});
			$("#email").css({"background-color":"#ffdddd"});
		};
		if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
			$("#email").css({"background-color":"#ffdddd"});
		};
	});
	$("#message").focus(function(){
		$("#message").css({"background-color":"#FFFFFF"});
		if ($("#message").val()=="message"){
			$("#message").val("");
			$("#message").css({"color":"#444444"});
		};
	});
	$("#message").blur(function(){
		if ($("#message").val()==""){
			$("#message").val("message");
			$("#message").css({"color":"#888888"});
			$("#message").css({"background-color":"#ffdddd"});
		};
	});
	$("#submit").mousedown(function(){
		$("#submit").attr({"src":"images/sendButtonSel.png"});
	});
	$("#submit").mouseup(function(){
		$("#submit").attr({"src":"images/sendButton.png"});	
	});
	$("#submit").mouseout(function(){
		$("#submit").attr({"src":"images/sendButton.png"});								
	});
	$("#name,#email,#message").keyup(function(){
		if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
			EnableSubmitButton();
		} else {
			DisableSubmitButton();
		};
	});
	$("#submit").click(function(){
		DisableSubmitButton();
		var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
		$.ajax({  
			type: "POST",  
			url: "mail.php",  
			data: dataString,  
			success: function() {  
				ResetForm();
				$("#successMessage").fadeIn(10);
				setTimeout('$("#successMessage").fadeOut(1000);',2000);
			}
		});
		return false; 
	});

});

function EnableSubmitButton(){
	$("#submit").attr({"disabled":""});
	$("#submit").attr({"src":"images/sendButton.png"});
};

function DisableSubmitButton(){
	$("#submit").attr({"disabled":"disabled"});
	$("#submit").attr({"src":"images/sendButtonDis.png"});
};

function ResetForm(){
	DisableSubmitButton();
	$("#name, #email, #message").css({"background-color":"#FFFFFF"});
	$("#name, #email, #message").css({"color":"#888888"});
	$("#name").val("name");
	$("#email").val("email");
	$("#message").val("message");
};

function ShowPanel(panel){
	currentPanel=panel;
	SelectButton(panel);
	$(".content").fadeOut(250);
		switch(panel){
			case "none":
				$("#contentPanelWrapper").animate({"left":"100%"},500);
				$("#arrow").fadeOut(50)
			break;
			case "about":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#aboutContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "portfolio":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#portfolioContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "services":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#servicesContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "contact":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#contactContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
			break;
		};
};

function SelectButton(button){
	if (currentPanel!="about"){
		$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
		$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#aboutButton").css({"background-position":"0px 0px"});
	};
	if (currentPanel!="portfolio"){
		$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
		$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#portfolioButton").css({"background-position":"0px -64px"});
	};
	if (currentPanel!="services"){
		$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
		$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#servicesButton").css({"background-position":"0px -128px"});
	};
	if (currentPanel!="contact"){
		$("#contactCaption").animate({"left":50},{queue:false, duration:250});
		$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#contactButton").css({"background-position":"0px -192px"});
	};
	switch(button){
		case "none":
		break;
		case "about":
			$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
			$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#aboutButton").css({"background-position":"65px 0px"});
		break;
		case "portfolio":
			$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
			$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#portfolioButton").css({"background-position":"65px -64px"});
		break;
		case "services":
			$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
			$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#servicesButton").css({"background-position":"65px -128px"});
		break;
		case "contact":
			$("#contactCaption").animate({"left":70},{queue:false, duration:250});
			$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#contactButton").css({"background-position":"65px -192px"});
		break;
	};

};