Results 1 to 3 of 3

Thread: Having trouble using multiple scripts on one page

  1. #1
    Join Date
    May 2009

    Having trouble using multiple scripts on one page


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

    Here is the page:


    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:

    <!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">
        <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>
    mouseOver script:

    	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) {
    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:

    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!


  2. #2
    Join Date
    May 2006
    Odenton, MD
    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.

    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);
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    May 2009
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center