javascript strange malfunction - php

Question

I have a website that consists of index.php and otherpage.php. Both of these pages use
include_once("header.inc")
header.inc implements a jscript file like this
<script type="text/javascript" src="script.js"></script>
the jscript file lets me use a nice looking dropdown menu.
the problem is that the menu only works properly on index.php, and not otherpage.php
What is really getting me is that on otherpage.php it's not that the menu doesnt work AT ALL, it just doesn't work partly. The menu will highlight but not dropdown.
You can see for yourself
index.php
otherpage.php
Is there something about sharing a jscript file between PHP pages that I should know?
Here are the relevant jscript contents for the menu:
var menu = function() {
var t = 15, z = 50, s = 6, a;
function dd(n) {
this.n = n;
this.h = [];
this.c = []
}
dd.prototype.init = function(p, c) {
a = c;
var w = document.getElementById(p), s = w.getElementsByTagName('ul'), l = s.length, i = 0;
for(i; i < l; i++) {
var h = s[i].parentNode;
this.h[i] = h;
this.c[i] = s[i];
h.onmouseover = new Function(this.n + '.st(' + i + ',true)');
h.onmouseout = new Function(this.n + '.st(' + i + ')');
}
}
dd.prototype.st = function(x, f) {
var c = this.c[x], h = this.h[x], p = h.getElementsByTagName('a')[0];
clearInterval(c.t);
c.style.overflow = 'hidden';
if(f) {
p.className += ' ' + a;
if(!c.mh) {
c.style.display = 'block';
c.style.height = '';
c.mh = c.offsetHeight;
c.style.height = 0
}
if(c.mh == c.offsetHeight) {
c.style.overflow = 'visible'
} else {
c.style.zIndex = z;
z++;
c.t = setInterval(function() {
sl(c, 1)
}, t)
}
} else {
p.className = p.className.replace(a, '');
c.t = setInterval(function() {
sl(c, -1)
}, t)
}
}
function sl(c, f) {
var h = c.offsetHeight;
if((h <= 0 && f != 1) || (h >= c.mh && f == 1)) {
if(f == 1) {
c.style.filter = '';
c.style.opacity = 1;
c.style.overflow = 'visible'
}
clearInterval(c.t);
return
}
var d = (f == 1) ? Math.ceil((c.mh - h) / s) : Math.ceil(h / s), o = h / c.mh;
c.style.opacity = o;
c.style.filter = 'alpha(opacity=' + (o * 100) + ')';
c.style.height = h + (d * f) + 'px'
}
return {
dd : dd
}
}();
Thanks for your time

Answer 1

On the index.php page you are forgetting
<script type="text/javascript">
var menu = new menu.dd("menu");
menu.init("menu", "menuhover");
</script>
Put it at the bottom of otherpage.php or put it in a footer.php to be included at the bottom of the page.

Answer 2

seem that the second page (not the index.php) does not have the
<script type="text/javascript">
var menu = new menu.dd("menu");
menu.init("menu", "menuhover");
</script>
so the menu isn't created.

Answer 3

index.php includes this code at the end of the page that initializes your menu:
<script type="text/javascript">
var menu = new menu.dd("menu");
menu.init("menu", "menuhover");
</script>
otherpage.php does not include that code so the code is never initialized and hooked up to your HTML.
Incidentally, you can debug this kind of issue yourself by putting a breakpoint in the .init() method in your code. In index.php you see that the breakpoint is hit and if you look at the calling stack, you can see where it is called from. If you put the same breakpoint in otherpage.php, you can see that it is not hit, thus never called.