JavaScript - Window.onload Adding 2 Functions

Hei,

On my website , I have certain things that happen in the function window.onload. I need them to happen only the first time when the user acceses the page . Do you have any idea how to do this?

Thanks

Hi everyone,

I am at the last leg of getting my code to run. I have a window.onload function, but right now it is working only when I fill in all the field in the drop down list, hit a refresh and then hit submit button. What changes should I implement in the code?

The code after the window.onload function runs as follows:

Code:

window.onload = function() {
   age = 0;
   groom_age = getvalues();

   caste = 0;
   groom_caste = getvalues_1();

   profession = 0;
   groom_profession = getvalues_2();

   bachelor = 0;
   groom_bachelor = getvalues_3();
  
   master = 0;
   groom_master = getvalues_4();

   doc = 0;
   groom_doc = getvalues_5();

   country = 0;
   groom_country = getvalues_6();
 
   color = 0;
   groom_color = getvalues_7();

   height = 0;
   groom_height = getvalues_8();

   marriage = 0;
   groom_marriage = getvalues_9();

   father = 0;
   groom_father = getvalues_10();


switch(groom_age)

{
case "23" : age = 1.6;
break;

case "24" : age = 1.2;
break;

case "25" : age = 1.7;
break;

case "26" : age = 1.8;
break;

case "27" : age = 1.9;
break;

case "28" : age = 1.75;
break;

case "29" : age = 1.7;
break;

case "30" : age = 1.4;
break;

case "31-35" : age = 1.8;
break;

case "36-40" : age = 1.9;
break;

case "41-45" : age = 1.75;
break;

case "46-50" : age = 1.7;
break;

case "51+" : age = 1.4;
break;

default: age = 1;
}

switch(groom_caste)

{ 

case "Brahmin" : caste = 1.6;
break;

case "Bania" : caste = 1.2;
break;

case "Kayastha" : caste = 1.6;
break;

case "Kshatriya" : caste = 2.0;
break;

case "Dalit" : caste = 1.8;
break;

case "Maravar" : caste = 1.6;
break;

case "Mudaliar" : caste = 2.0;
break;

case "Jat" : caste = 1.8;
break;

case "Labanas" : caste = 1.6;
break;

case "Rajput" : caste = 1.6;
break;

default : caste = 1;

}

switch(groom_profession)

{

case "Engineer" : profession = 1.6;
break;

case "Doctor" : profession = 1.2;
break;

case "Lawyer" : profession = 1.65;
break;

case "CA" : profession = 1.7;
break;

case "IAS" : profession = 2.0;
break;

case "Family Business" : profession = 1.5;
break;

case "Engineer + MBA" : profession = 1.95;
break;

case "None of the above" : profession = 1.95;
break;

default: profession = 1;

}

switch(groom_bachelor)

{

case "BTech/BE/BS" : bachelor = 1.6;
break;

case "MBBS" : bachelor = 1.2;
break;

case "BA" : bachelor = 1.1;
break;

case "B.Com" : bachelor = 1.4;
break;

case "BSc" : bachelor = 1.9;
break;

case "BBA" : bachelor = 1.1;
break;

case "Diploma" : bachelor = 1.4;
break;

case "Certification Course" : bachelor = 1.4;
break;

default: bachelor = 1;

}

switch(groom_master)

{

case "MS" : master = 1.6;
break;

case "MBA" : master = 1.2;
break;

case "MHA" : master = 1.4;
break;

case "MTech" : master = 1.4;
break;

case "M.Ed" : master = 1.4;
break;

case "No Master degree" : master = 1.4;
break;

default: master = 1;

}

switch(groom_doc)

{

case "Doctor of Philosophy (Phd)" : doc = 1.6;
break;

case "Doctor of Medicine (MD)" : doc = 1.2;
break;

case "No Doctorate Degree" : doc = 1.4;
break;

default: doc = 1;

}

switch(groom_country)

{

case "India" : country = 1.6;
break;

case "USA" : country = 1.2;
break;

case "Any European Country" : country = 1.7;
break;

case "Australia" : country = 1.7;
break;

case "Canada" : country = 1.7;
break;

case "Any Country more developed than India" : country = 1.7;
break;

case "Any Country less developed than India" : country = 1.2;
break;

default: country = 1;

}

switch(groom_color)

{

case "Fairy White" : color = 1.6;
break;

case "Black" : color= 1.2;
break;

case "Wheatish (Almost White. Would need some Fair n Lovely)" : color= 1.4;
break;

case "Brown": color= 1.4;
break;

case "White": color= 1.9;
break;

case "Pitch Black (Not visible on a moonless night)" : color= 0.6;
break;

default: color = 1;

}

switch(groom_height)

{

case 'Less than 5\'4"' : height = 1.6;
break;

case '5\'4"' : height = 1.2;
break;

case '5\'5"' : height = 0.8;
break;

case '5\'6"' : height = 1.0;
break;

case '5\'7"' : height = 1.4;
break;

case '5\'8"' : height = 1.5;
break;

case '5\'9"' : height = 1.6;
break;

case '5\'10"' : height = 1.7;
break;

case '5\'11"' : height = 1.8;
break;

case '6' : height = 1.85;
break;

case '6\'1"' : height = 1.9;
break;

case 'Greater than 6\'1"' : height = 1.8;
break;

default: height = 1;

}

switch(groom_marriage)

{

case "0" : marriage = 1.6;
break;

case "1" : marriage = 1.2;
break;

case "2" : marriage = 0.4;
break;

case "More than 2" : marriage = 0.2;
break;

default: marriage  = 1;

}

switch(groom_father)

{

case "Doctor" : father= 1.6;
break;

case "IAS" : father = 1.2;
break;

case "Engineer" : father= 1.7;
break;

case "Lawyer" : father= 1.65;
break;

case "CA" : father= 1.8;
break;

case "Engineer + MBA" : father= 1.9;
break;

case "Family Business"  : father= 1.2;
break;

default : father = 1;

}

};

function processOrder() {

var total = age + caste + bachelor + master + doc + color + profession + father + marriage + height + country;

var pageNumber = Math.floor((20 - total) / 2 + 1);
// pageNumber = 6;
// alert(pageNumber);

window.open ("Page " + pageNumber + ".html");

}

</script>

<center> <INPUT TYPE="button" VALUE="Calculate" onClick="processOrder()">

</center>

I would really appreciate any kind of help. Thanks a lot!

I am something of a javascript noob - I write mostly PHP and don't do a lot in javascript.

Anyway, I Googled what I wanted to do and found an example that uses window.onload = function() { ... whatever ... } which seems to work fine, but the brower's error console tells me that the use of captureEvents (which I presume includes window.onload()) is deprecated and that I should use addEventListener instead.

I've had a look on google for examples of addEventListener for the equivalent of document.onload and although I understand the difference and I see how both mechanisms work, I'm struggling to understand why one is better than the other?

Please enlighten me!

The site i am building uses a large content slider as its main navigation. There is an absolutely positioned header on the page, and the slider sits underneath. This all works perfectly once i am linking (to named anchors) within the same page

However when an external pages links to one of the anchors, the top of the slider content is hidden underneath the header - the user need to scroll down to get the content to start below the header.

Long story short, I have used the following to force the browser to scroll to the top of the page when it loads:

<script type="text/javascript">
window.onload = function(){ window.scrollTo(0,0); }
</script>

This doesnt load until everything else on the page has loaded though, is there a way to force the browser to scroll to the top BEFORE everything else loads? Or better yet not to scroll at all but to make sure the window is positioned at (0,0) automatically when it loads?

Also, this doesnt seem to be working at all in IE

Thanks in advance!

Hello,

I have a bit of javascript that automatically loads Shadowbox on load.

It works perfectly in Firefox, Chrome but NOT IE.

If I put a standard link to open Shadowbox does work in IE, so it's not the shadowbox, it's definitely the window.onload bit which isn't working.

Here is my code.

Code:

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<!--this bit is for a link to open the Shadowbox from a link elsewhere on the page -->
<script type="text/javascript">
Shadowbox.init({players:['swf']});
</script>

<script type="text/javascript">
           window.onload = function() {
                 Shadowbox.open({
                           content: 'flash/flash002.swf',
                           player:  "swf",
                           title:   'Open Shadowbox',
                           width:   1200,
                           height:  800,
                           
                 });
				

           };

      </script>

This DOES work though, so I know it's not the Shadowbox with the issue

Code:

<a href="flash/flash002.swf" rel="shadowbox;height=800px;width=1200px">Open Shadowbox</a>

Really appreciate your help!

Nicola

Hi,
I am learning Javascript and place the script tag in the head of my document and the code doesnt work as it loads the page. I understand that the window.onload function must call the function when the page has loaded but i cant seem to get it to work, I have wrapped my changeImage function in the onload function and it still doesnt work. where am i going wrong?
I would like the script tag in the head of the document and understand how to use the window.onload function with my changeImage function. Thank you.
Code:

window.onload = function () {
	changeImage();
}

	var myImage = document.getElementById("image");
	
	var imageArray = ["images/leaf.jpg","images/sky.jpg","images/tree.jpg"];
	
	var imageIndex = 0;

		function changeImage() {
			myImage.setAttribute("src", imageArray[imageIndex]);
			imageIndex++;
			if (imageIndex >= imageArray.length) {
				imageIndex = 0;
			}
		}// changeImage ... end
		
		setInterval(changeImage, 3000);

I wrapped the whole of the code in the function but then in the console it doesnt do the setInterval it just stops at that break point.

Hi

I've got a javascript that searches for a Youtube video. This script gets called by a window.onload action. The function actually works just fine, but IE (not in FF) still throws me an "Not Implemented" error at my window.onload action.

the code is this:
Code:

window.onload = GetYoutubeVideo('Alice Cooper Poison');

Find it he http://www.muzikum.eu/en/123-3496-44...son-lyric.html

I can't seem to get rid of it. Can anyone explain me why it's triggered? Even as the code does get executed it's still annoying me.

thanks in advance

Walter

I don't get to use javascript as much as I would like, but I am having a problem with a page so I stripped out all the extras and got down to just the part I am having a problem with and I think this should fill the div with the id testingdiv when the page loads but it doesn't. Any help would be appreciated.

Code:

<script type="text/javascript">

	function getClientList(listtype) {
	  document.getElementById('testingdiv').innerHTML = listtype;
	}

	window.onload = getClientList('own');

</script>
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<input type="hidden" name="hidden" id="hidden" value="99" />
	<title>untitled</title>
	
</head>

<body>
<div id="testingdiv"></div>

</body>
</html>

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>Untitled Document</title>
<script>
window.onload = function(){h = parseInt(document.getElementById(  "div1"  ).style.height);}

var t;

function addHeight(openAccordionID){
	clearInterval(t);
	document.getElementById(openAccordionID).style.height = h+"px";
	h+=1;
	t = setInterval("addHeight('"+openAccordionID+"')",10);
	for(var x=1; x<h; x++)
	if(h%(x*100)==0){clearInterval(t);}
	}

</script>

</head>
<body>

<div id="div1" onclick="addHeight(this.id)" style="width: 200px; height: 20px; background-color: yellow;">Increase Height</div>

</body>
</html>

How can I still use the parameter "openAccordionID" in the blue-highlighted part? I tried, but it failed.

I found this beautiful fade-in/fade-out jQuery pop-up bubble and all I need to know is how to make the bubble animate on window.onload.

If there's a better pop-up bubble than this that someone knows of offhand, that'd be great too. I haven't tested this one out and am a little wary about potential problems that the non-animated part of the bubble may or may not present.

All I want to have happen is, when you visit the site, a div automatically fades in and stays near the top of the page for a minute to guide viewers to a specific area of the site, and then fades out.

Thanks for any help!! Much 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?

Hi,

In our static few page website, when user open the home page, I want to open one "prompt" kind of window with my own input fields:
e.g.
One Simple Text Line
One anchor link to external link
One Text Box to input product key
Ok Button
Cancel Button.

I want this "prompt" kind of window compulsory to attend. Means user will not be able to access the page without responding this window.

According to user button pressed "OK" or "Cancel", I want to display the corresponding text in the home page.

In short, it will be close to the "window.prompt" but customized and compulsory to respond.

Thanks,

I have the following javascript function:

[ function addNewWindowEvent(evType, fn)
{
if (window.addEventListener)
{
this.addEventListener("load", fn, false);
return true;
}
else if (window.attachEvent)
{
var onload = "onload"
this.attachEvent(onload, fn);
return true;
}
else
{
return false;
}
} ]

which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this:

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no]

and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks.

henryv

Hi everyone,

I am working on an assignment and require a little bit of assistance.

I have a form (an order form) where I am required to validate the required entries - I have managed to do this with the textbox field no problems. Where I am coming unstuck is with the following items.

homePhone - numbers only and max 10 numbers for validation
postCode - same as above
email validation of @ and .

How do I validate comboboxs so that if nothing is selected an alert shows?

If the "other address" radiobutton is checked how do I have the text boxes only validate on check?

How do I validate the textarea when "do you want a card message" is ticked?

I have been working on this for the past week and a bit and have done a fair amount of research and tried to implement various pieces of code I have found with no luck.

I have removed some of the select objects to cut down on the amount of code.

I am not expecting anyone to write my assignment for me, just wanting assistance to help me learn and become more proficient in JS

Regards

BP

Code:

<html>
<head>
<title>Online Order Form</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="author" content="Jeremy Porteous">
<script type="text/javascript">

<!--
function validate(){
var form=document.getElementById("orderForm");
var Name=form["fullName"].value;
var fullName_err=document.getElementById("fullName_err");
var address=form["address"].value;
var address_err=document.getElementById("address_err");
var location=form["location"].value;
var location_err=document.getElementById("location_err");
var postcode=form["postcode"].value;
var postcode_err=document.getElementById("postcode_err");
var homePhone=form["homePhone"].value;
var homephone_err=document.getElementById("homePhone_err");
var email=form["email"].value;
var email_err=document.getElementById("email_err");
var checkbox=form["card"].value;
var street=form["street"].value;
var street_err=document.getElementById("street_err");
var otherLocation=form["otherLocation"].value;
var otherLocation_err=document.getElementById("otherLocation_err");
var otherPostcode=form["otherPostcode"].value;
var otherPostcode_err=document.getElementById("otherPostcode_err");


if(Name==""){
fullName_err.innerHTML="Please enter your Full Name";
}else{
fullName_err.innerHTML="";
}
if(address==""){
address_err.innerHTML="Please enter your Street Address";
}else{
address_err.innerHTML="";
}
if(location==""){
location_err.innerHTML="Please enter your Surburb/Town";
}else{
location_err.innerHTML="";
}
if(postcode==""){
postcode_err.innerHTML="Please enter your Postcode";
}else{
postcode_err.innerHTML="";
}
if(homePhone==""){
homePhone_err.innerHTML="Please enter your Phone Number";
}else{
homePhone_err.innerHTML="";
}
if(email==""){
email_err.innerHTML="Please enter a valid Email";
}else{
email_err.innerHTML="";
}

if(street==""){
street_err.innerHTML="Please enter Street Address";
}else{
street_err.innerHTML="";
}
if(otherLocation==""){
otherLocation_err.innerHTML="Please enter Suburb/Town";
}else{
otherLocation_err.innterHTML="";
}
if(otherPostcode==""){
otherPostcode_err.innerHTML="Please enter Postcode";
}else{
otherPostcode_err.innerHTML="";
} 
 
if(Name=="" || address=="" || location=="" || postcode=="" || homePhone=="" || email=="" || street=="" || otherLocation=="" || otherPostcode=="") {
alert("Please Check form and fill in form data correctly");
return false;
}else{
return true;
}
}
-->

</script>

<h2>Joes Online Order Form</h2>
<h5>* denotes a required field</h5>
<h3><u>Your Details</u></h3>

<form id="orderForm" name="orderForm" method="post" action="" onsubmit="javascript:return validate()">
<!-- The form user is required to fill in some personal information * is a required field -->
<!-- Input fields will be validated  -->
 
<h4>*Name: 
<label><input type="text" id="fullName" size="35"></label>
<label id="fullName_err" style="color:#FF0000; font-style:italic;"></label></h4>
<h4>* Address: 
<label><input type="text" id="address" size="30"></label>
<label id="address_err" style="color:#FF0000; font-style:italic;"></label>
	* Suburb/Town:
<label><input type="text" id="location" size="30"></label>
<label id="location_err" style="color:#FF0000; font-style:italic;"></label></h4>
 <!-- The input field for "state" is a dropdown combo box -->
<h4>* State:
<select name="homeState" size="0">
<option value="State">Select your State</option>
<option value="ACT">ACT</option> 
<option value="NSW">NSW</option> 
</select>
<label id="homeState_err" style="color:#FF0000; font-style:italic;"></label>
* Postcode:
<label><input type="text" id="postcode" maxlength="4" size="4"></label>
<label id="postcode_err" style="color:#FF0000; font-style:italic;"></label></h4>
<h4>* Home Phone:
<label><input type="text" id="homePhone" maxlength="10" size="10"></label>
<label id="homePhone_err" style="color:#FF0000; font-style:italic;"></label></h4>
<h5>Work Phone:
<input type="text" id="workPhone" maxlength="10" size="10">
Fax:
<input type="text" id="Fax" maxlength="10" size="10"></h5>
<h4>* Email:
<label><input type="text" id="email" size="30"></label>
<label id="email_err" style="color:#FF0000; font-style:italic;"></label></h4>
<!-- The input fields for "type" and "expDate" are dropdown combo boxes -->
<h4><em>Credit Card Details</em></h4>
<h4>* Type:
<select name="creditCard" size="0">
<option value="creditCard">Select your Credit Card</option> 
<option value="visa">Visa</option>
<option value="mastercard">Master Card</option>
</select>
* Exp Date:
<select name="expMonth" size="0">
<option value="Jan">Jan</option> 
<option value="Feb">Feb</option> 
<option value="Mar">Mar</option>
</select>
<select name="expYear" size="0">
<option value="2012">2012</option> 
<option value="2013">2013</option> 
<option value="2014">2014</option>
</select></h4>
  <!-- Using the combo boxes the user can select type of basket and qty -->
<h4><em>Purchase Details</em></h4>
<h4>* Basket Type:
<select name="basketType" size="0">
<option value="Select a Basket">Select a Basket</option> 
<option value="1A">1A</option> 
<option value="1B">1B</option>
 </select>
&nbsp;
* Qty:
<select name="quantity" size="0">
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option>
</select></h4>
<h4><b>* Deliver To:</b></h4>
<!-- Radio buttons are mutually exclusive -->
<h4><input type="radio" id="homeDel" name="delAddress" value="homeAddress" checked> Home Address</h4>
<h4><input type="radio" id="otherDel" name="delAddress" value="otherAddress"> Other Address</h4>
<!-- the following is for the "Other Address option" -->
<h3><u>Other Address Details</u></h3>
<h4>* Street:
<label><input type="text" id="street" size="30"></label>
<label id="street_err" style="color:#FF0000; font-style:italic;"></label>
<!-- The input field for "state" is a dropdown combo box -->
* Suburb/Town:
<label><input type="text" id="otherLocation" size="30" ></label>
<label id="otherLocation_err" style="color:#FF0000; font-style:italic;"></label></h4>
<h4>* State:
<select name="state" size="0">
<option value="State">Select the State</option> 
<option value="ACT">ACT</option>
<option value="NSW">NSW</option> 	
</select>
* Postcode:
<input type="text" id="otherPostcode" maxlength="4" size="4">
<label id="otherPostcode_err" style="color:#FF0000; font-style:italic;"></label></h4>
<h4><em><b>* Date Delivery Required</b></em>
<select name="delDay" size="0">
<option value="01">01</option> 
<option value="02">02</option> 
<option value="03">03</option> 
<option value="04">04</option> 
</select>
<select name="delMonth" size="0">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option> <option value="Mar">Mar</option> <option value="Apr">Apr</option>
</select>
<select name="delYear" size="0">
 <option value="2012">2012</option>
</select></h4>
<h5>Would you like to include a card? <input type="checkbox" id="card">
<label id="card_err" style="color:#FF0000; font-style:italic;"></label></h5>
<!-- Text box message will only be submitted if checkbox is ticked -->
<p>Leave a personal message for the card<br>
<textarea name="text" id="cardMessage" rows="5" cols="28"> Enter your message here</textarea></p>
<p>***Click on <b>Submit</b> when complete or <b>Clear Form</b> to reset form***</p>
<input type="submit" id="submit" value="Submit"> 
<input type="reset" value="Clear Form" onClick="reset">
</form>
</body>
</html>