Hello. My name is Josh, from the UK. I'm 16, and having a spot of bother with some javascript I've been working on over the past few days, that gives a sliding menu.
Bit of a beast I'm afraid. The problem I'm having is that when I run this page in IE, the script will not stop - I'm guessing something has gone wrong with
clearInterval(m enu)
...but IE's error messages points to
menu = setInterval("Ch angeHeight(1)", 30)
I'm at a loss what to do. My debugger in IE isn't working. All works perfectly in Firefox.
Except, re-clicking on the button whilst the menu is mid-slide screws things - in FireFox, everything gets out of sync, and in IE movement gets faster and faster every time you click. Great fun (for the first and perhaps second time) but a pain in the ar$e. I've tried to get rid of the button's OnClick property, and reinstate it once everything has stopped, but this didn't seem to work. (Those lines commented out).
Any help would be much appreciated,
Josh Pencheon
Cambridge,
England.
Code:
<html>
<head>
<script type="text/javascript">
<!--
menustatus = 'down';
bouncecount = 10;
function AnimateMenu() {
//document.getElementById('menu').onClick = '';
ChangeHeight(0);
menu = setInterval("ChangeHeight(1)", 30)
}
function GetMaxHeight(obj) {
contents = obj.childNodes;
contentnumber = contents.length;
maxheight = '';
for (i = 0; i < contentnumber; i++) {
currentnode = contents[i];
if (currentnode.nodeType == 1) {maxheight = maxheight*1 + parseInt(currentnode.style.height);}
}
return maxheight;
}
function ToggleContents(obj) {
contents = obj.childNodes;
contentnumber = contents.length;
for (i = 1; i < contentnumber; i++) {
currentnode = contents[i];
if (currentnode.nodeType == 1 && menustatus == "down") {currentnode.style.visibility = 'hidden';}
else if (currentnode.nodeType == 1) {currentnode.style.visibility = 'visible';}
}
}
function ChangeHeight(repeat) {
container = document.getElementById('menu');
contents = container.childNodes;
contentnumber = contents.length;
button = container.firstChild.style;
for (i = 0; i < contentnumber; i++) {
if (contents[i].nodeType == 1) {minheight = parseInt(button.height); break;}
}
if (menustatus == "up") {
height = parseInt(container.style.height);
maxheight = GetMaxHeight(container);
if (height < maxheight - 35) {newheight = height + 12}
else if (height < maxheight - 16) {newheight = height + 6}
else if (height < maxheight - 8) {newheight = height + 3}
else if (height < maxheight) {newheight = height + 1}
else if (height == maxheight) {
clearInterval(menu);
newheight = maxheight;
ToggleContents(container);
menustatus = "down";
button.cursor = 'url("Menu/Cursors/MenuUp.cur"), n-resize';
//container.onClick="AnimateMenu()";
}
}
else {
if (repeat == 0) {
ToggleContents(container);
maxheight = GetMaxHeight(container);
container.style.height = maxheight + "px";
}
height = parseInt(container.style.height);
avail = height - minheight;
if (avail > 100) {newheight = height - 12}
else if (avail > 20) {newheight = height - 6}
else if (avail > 8) {newheight = height - 3}
else if (avail > 0) {newheight = height - 1}
else if (avail == 0) {
clearInterval(menu);
newheight = height;
menustatus = "up";
button.cursor = 'url("Menu/Cursors/MenuDown.cur"), n-resize';
//container.onClick="AnimateMenu()";
}
}
container.style.height = newheight + "px";
}
-->
</script>
<style type="text/css">
#menu {
width:200px;
border:1px solid #000;
-moz-border-radius:10px;
}
#menu .first{
padding:0 2px;
margin:0;
border-bottom:1px solid #000;
cursor:url("Menu/Cursors/MenuUp.cur"), n-resize;
}
</style>
</head>
<body>
<div id="menu"><div id="1" class="first" style="height:20px;" onClick="AnimateMenu()"></div>
<div id="2" style="height:20px;">hello world!</div>
<div id="3" style="height:20px;">hello world!</div>
<div id="4" style="height:20px;">hello world!</div>
<div id="5" style="height:20px;">hello world!</div>
<div id="6" style="height:20px;">hello world!</div>
<div id="7" style="height:20px;">hello world!</div>
<div id="8" style="height:20px;">hello world!</div>
<div id="9" style="height:20px;">hello world!</div>
</div>
</body>
</html>
clearInterval(m enu)
...but IE's error messages points to
menu = setInterval("Ch angeHeight(1)", 30)
I'm at a loss what to do. My debugger in IE isn't working. All works perfectly in Firefox.
Except, re-clicking on the button whilst the menu is mid-slide screws things - in FireFox, everything gets out of sync, and in IE movement gets faster and faster every time you click. Great fun (for the first and perhaps second time) but a pain in the ar$e. I've tried to get rid of the button's OnClick property, and reinstate it once everything has stopped, but this didn't seem to work. (Those lines commented out).
Any help would be much appreciated,
Josh Pencheon
Cambridge,
England.
Comment