Having trouble using multiple scripts on one page

**scottfennell** · 05-16-2009 10:14 PM

Hi,

I am trying to feature a select-and-go navigation script and also a mouseOver script on the same page.

Here is the page:

http://www.scottfennell.com/mof/index1.php

Expected behavior:
You roll your mouse over the small photos to see a blown-up version. You select a recent project from the drop down menu to go to that project's page.

Actual behavior:
Whichever script I call second in the head of my html page gets executed. Whichever one I call first does not.

HTML head section:

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" xml:lang="en" lang="en">
<head>
    <title>Matter of Fact Maintenance</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="mofstyle.css" />
    <script type="text/javascript" src="scriptprojects.js"></script>
    <script type="text/javascript" src="selectandgo.js"></script>
    
</head>

mouseOver script:

Code:

	window.onload = rolloverInit;

function rolloverInit() {
	for (var i=0; i<document.links.length; i++) {
		var linkObj = document.links[i];
		if (linkObj.className) {
			var imgObj = document.getElementById(linkObj.className);
			if (imgObj) {
				setupRollover(linkObj,imgObj);
			}
		}
	}
}

function setupRollover(thisLink,textImage) {
	thisLink.imgToChange = textImage;
	thisLink.onmouseover = rollOver;	
	
	thisLink.outImage = new Image();
	thisLink.outImage.src = textImage.src;

	thisLink.overImage = new Image();
	thisLink.overImage.src = thisLink.id + "b.jpg";
}

function rollOver() {
	this.imgToChange.src = this.overImage.src;
}

seclect-and-go script:

Code:

window.onload = initForm;
window.onunload = function() {};

function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}

function jumpPage() {
var newLoc = document.getElementById("newLocation");
var newPage = newLoc.options[newLoc.selectedIndex].value;

if (newPage!= "") {
window.location = newPage;
}
}

My theory: Both functions are called with the window.onload event, and the first one gets forgotten about when the second one is encountered.

I am very much a novice and don't really know what my alternative is.

Thank you!

Scott

**ZeroKilled** · 05-17-2009 12:36 AM

you have located where is the problem! whichever script come second will overwrite the handler registered on event onload by the first script. to solve it, you can use a somewhat more advanced model for registering event. this model get rid about the overwriting thing. however, the problem is that one of the main browser (MSIE) use a somewhat different model than standard specify. thankfully, with a try/catch you can get rid of it.

Code:

try{ // always try standard first;
addEventListener('load', initForm, false);
addEventListener('load', rolloverInit, false);
} catch(e){ // so far MSIE browser is the only one that doesn't use addEventListener;
attachEvent('onload', initForm);
attachEvent('onload', rolloverInit);
}

**scottfennell** · 05-19-2009 12:14 PM

I cut and pasted your code at the top of both of my scripts, and now they both work together, as intended. Problem solved!

Thread: Having trouble using multiple scripts on one page

Thread Tools

Display

Having trouble using multiple scripts on one page

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions