javascript not loading on page

Question

I have created a very simple page at this point and am adding a menu that using javascript to display a submenu. I can't get the javascript to load and I am not getting any errors using Firebug. I have stripped my page down to pretty much bare content except for the javascript, but it still won't load. The CSS associated with the menu does load. I didn't write the javascript, but have a basic concept of how it works.

Here is the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>The Journal</title>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <link href="http://celt.miamioh.edu/ject/images/favicon.png" rel="shortcut icon">

    <script src="http://celt.miamioh.edu/newject/menuscript.js" language="javascript" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
</head>
<body>


<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<a href="Link 1" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target="http://celt.miamioh.edu/newject/about.php"><img src="buttons/button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><a href="Link 2" onmouseover="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onmouseout="setOutImg('2','');overSub=false;setTimeout('hideSubMenu(\'submenu2\')',delay);" target="http://celt.miamioh.edu/newject/archive.php"><img src="buttons/button2up.png" border="0" id="button2" vspace="1" hspace="1"></a><a href="Link 3" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target="http://celt.miamioh.edu/journals/subscription/subscriptionpage.php"><img src="buttons/button3up.png" border="0" id="button3" vspace="1" hspace="1"></a><br>
</td></tr></table>

<p>Test page for javascript functionality.</p>

</body>
</html>

and here is he js:

subInfo[2] = new Array();
subInfo[3] = new Array();


//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
subInfo[1][1] = new Array("Overview","http://celt.miamioh.edu/newject/about.php","");
subInfo[1][2] = new Array("Free Sample Issue","http://celt.miamioh.edu/newject/issue.php?v=19&n=1","");
subInfo[1][3] = new Array("Editorial Board/Staff","http://celt.miamioh.edu/newject/staff.php","");
subInfo[1][4] = new Array("Manuscript Submission","http://celt.miamioh.edu/newject/submission.php","");

subInfo[2][1] = new Array("Current Issue","http://celt.miamioh.edu/newject/issue.php?v=25&n=2","");
subInfo[2][2] = new Array("Issue Archive","http://celt.miamioh.edu/newject/archive.php","");
subInfo[2][3] = new Array("Special Issue Archive","http://celt.miamioh.edu/newject/special.php","");
subInfo[2][4] = new Array("Search Archive","http://celt.miamioh.edu/newject/search.php","");

subInfo[3][1] = new Array("Journal Subscription","http://celt.miamioh.edu/journals/subscription/subscriptionpage.php","");
subInfo[3][2] = new Array("Order Back Issue","http://celt.miamioh.edu/newject/order_backissues.php","");
subInfo[3][3] = new Array("Order Individual Articles","http://celt.miamioh.edu/newject/order_articles.php","");


//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
var xSubOffset = 9;
var ySubOffset = 34;



//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( x=0; x<totalButtons; x++) {
    // SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
    if ( subInfo[x+1].length < 1 ) { 
        document.write('<div id="submenu' + (x+1) + '">');
    // SET DIV FOR BUTTONS WITH SUBMENU
    } else {
        document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');
        document.write('onMouseOver="overSub=true;');
        document.write('setOverImg(\'' + (x+1) + '\',\'\');"');
        document.write('onMouseOut="overSub=false;');
        document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');
        document.write('setOutImg(\'' + (x+1) + '\',\'\');">');


        document.write('<ul>');
        for ( k=0; k<subInfo[x+1].length-1; k++ ) {
            document.write('<li>');
            document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');
            document.write('target="' + subInfo[x+1][k+1][2] + '">');
            document.write( subInfo[x+1][k+1][0] + '</a>');
            document.write('</li>');
        }
        document.write('</ul>');
    }
    document.write('</div>');
}





//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
    for ( x=0; x<totalButtons; x++ ) {
        buttonUp = new Image();
        buttonUp.src = buttonFolder + upSources[x];
        buttonOver = new Image();
        buttonOver.src = buttonFolder + overSources[x];
    }
}

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
    document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
    document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}



//*** SUB MENU FUNCTIONS ***//
// GET ELEMENT ID MULTI BROWSER
function getElement(id) {
    return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null; 
}

// GET X COORDINATE
function getRealLeft(id) { 
    var el = getElement(id);
    if (el) { 
        xPos = el.offsetLeft;
        tempEl = el.offsetParent;
        while (tempEl != null) {
            xPos += tempEl.offsetLeft;
            tempEl = tempEl.offsetParent;
        } 
        return xPos;
    } 
} 

// GET Y COORDINATE
function getRealTop(id) {
    var el = getElement(id);
    if (el) { 
        yPos = el.offsetTop;
        tempEl = el.offsetParent;
        while (tempEl != null) {
            yPos += tempEl.offsetTop;
            tempEl = tempEl.offsetParent;
        }
        return yPos;
    }
}

// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
    var el = getElement(objectID);
    el.style.left = x;
    el.style.top = y;
}

// MOVE SUBMENU TO CORRESPONDING BUTTON
function showSubMenu(subID, buttonID) {
    hideAllSubMenus();
    butX = getRealLeft(buttonID);
    butY = getRealTop(buttonID);
    moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
}

// HIDE ALL SUB MENUS
function hideAllSubMenus() {
    for ( x=0; x<totalButtons; x++) {
        moveObjectTo("submenu" + (x+1) + "",-500, -500 );
    }
}

// HIDE ONE SUB MENU
function hideSubMenu(subID) {
    if ( overSub == false ) {
        moveObjectTo(subID,-500, -500);
    }
}



//preload();

Any help on what is wrong or even how I can further troubleshoot it myself to find out what is wrong would be appreciated.

Well, if you input "celt.edu/newject/menuscript.js" into a browser, you'll see that it's not loading, so... — pkExec
– pkExec, Commented Aug 20, 2014 at 20:41
On top of that, if you're overhauling, you should really consider bringing this up to date with modern event listeners. — BReal14
– BReal14, Commented Aug 20, 2014 at 20:43

Dave · Accepted Answer · 2014-08-20 21:47:45Z

1

I created a copy of your file at JSBin here and can verify that the javascript does indeed run.

I also noticed you have code commented out at the bottom //preload(); and perhaps this is what you are expecting to execute?

If you still are not getting the expected results try adding a debugger; statement and running in Firebug and the code should break on the line you added that code.

answered Aug 20, 2014 at 21:47

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertifiedGeek · Accepted Answer · 2014-08-20 20:43:00Z

0

Your src link is incorrect, to match the URLs in the js file it should be

http://celt.miamioh.edu/newject/menuscript.js

answered Aug 20, 2014 at 20:43

CertifiedGeek

1371 silver badge13 bronze badges

2 Comments

learning_curve Over a year ago

Thanks, but that is not it. I was editing the URLs for another reason. In my source files they all match. Still no joy.

CertifiedGeek Over a year ago

when I tried your code the js is missing references for buttonFolder, upSources, and overSources. Are you defining these somewhere? Otherwise, it does load and try to execute but gets hungup on the main button functions since it doesn't know what those variables are.

Collectives™ on Stack Overflow

javascript not loading on page

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related