By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,654 Members | 1,422 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,654 IT Pros & Developers. It's quick & easy.

IE Error setInterval. (?)

P: 1
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.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript">
  5. <!--
  6. menustatus = 'down';
  7. bouncecount = 10;
  8.  
  9. function AnimateMenu() {
  10.     //document.getElementById('menu').onClick = '';
  11.     ChangeHeight(0); 
  12.     menu = setInterval("ChangeHeight(1)", 30)
  13. }
  14.  
  15.  
  16. function GetMaxHeight(obj) {
  17.     contents = obj.childNodes;
  18.     contentnumber = contents.length;
  19.     maxheight = '';
  20.     for (i = 0; i < contentnumber; i++) {
  21.         currentnode = contents[i];
  22.         if (currentnode.nodeType == 1) {maxheight = maxheight*1 + parseInt(currentnode.style.height);}
  23.     }
  24.     return maxheight;
  25. }
  26.  
  27. function ToggleContents(obj) {
  28.     contents = obj.childNodes;
  29.     contentnumber = contents.length;
  30.     for (i = 1; i < contentnumber; i++) {
  31.         currentnode = contents[i]; 
  32.         if (currentnode.nodeType == 1 && menustatus == "down") {currentnode.style.visibility = 'hidden';}
  33.         else if (currentnode.nodeType == 1) {currentnode.style.visibility = 'visible';}
  34.     }
  35. }    
  36.  
  37. function ChangeHeight(repeat) {
  38.     container = document.getElementById('menu');
  39.     contents = container.childNodes;
  40.     contentnumber = contents.length;
  41.     button = container.firstChild.style;
  42.     for (i = 0; i < contentnumber; i++) {
  43.         if (contents[i].nodeType == 1) {minheight = parseInt(button.height); break;} 
  44.     }
  45.     if (menustatus == "up") {
  46.         height = parseInt(container.style.height);
  47.         maxheight = GetMaxHeight(container);
  48.         if (height < maxheight - 35) {newheight = height + 12}
  49.         else if (height < maxheight - 16) {newheight = height + 6}
  50.         else if (height < maxheight - 8) {newheight = height + 3}
  51.         else if (height < maxheight) {newheight = height + 1}
  52.         else if (height == maxheight) {
  53.             clearInterval(menu);
  54.             newheight = maxheight;
  55.             ToggleContents(container);
  56.             menustatus = "down";
  57.             button.cursor = 'url("Menu/Cursors/MenuUp.cur"), n-resize';
  58.             //container.onClick="AnimateMenu()";
  59.         }
  60.     }
  61.     else {
  62.         if (repeat == 0) {
  63.             ToggleContents(container); 
  64.             maxheight = GetMaxHeight(container); 
  65.             container.style.height = maxheight + "px";
  66.         }
  67.         height = parseInt(container.style.height);    
  68.         avail = height - minheight;        
  69.         if (avail > 100) {newheight = height - 12}        
  70.         else if (avail > 20) {newheight = height - 6}
  71.         else if (avail > 8) {newheight = height - 3}
  72.         else if (avail > 0) {newheight = height - 1}
  73.         else if (avail == 0) {
  74.             clearInterval(menu);
  75.             newheight = height;
  76.             menustatus = "up";
  77.             button.cursor = 'url("Menu/Cursors/MenuDown.cur"), n-resize';
  78.             //container.onClick="AnimateMenu()";
  79.         } 
  80.     }
  81.     container.style.height = newheight + "px";
  82.  
  83. }
  84.  
  85. -->
  86. </script>
  87.  
  88. <style type="text/css">
  89. #menu {
  90.     width:200px;
  91.     border:1px solid #000;
  92.     -moz-border-radius:10px;
  93. }
  94. #menu .first{
  95.     padding:0 2px;
  96.     margin:0;
  97.     border-bottom:1px solid #000;
  98.     cursor:url("Menu/Cursors/MenuUp.cur"), n-resize;
  99. }
  100. </style>
  101.  
  102. </head>
  103.  
  104. <body>
  105.  
  106. <div id="menu"><div id="1" class="first" style="height:20px;" onClick="AnimateMenu()"></div>
  107. <div id="2" style="height:20px;">hello world!</div>
  108. <div id="3" style="height:20px;">hello world!</div>
  109. <div id="4" style="height:20px;">hello world!</div>
  110. <div id="5" style="height:20px;">hello world!</div>
  111. <div id="6" style="height:20px;">hello world!</div>
  112. <div id="7" style="height:20px;">hello world!</div>
  113. <div id="8" style="height:20px;">hello world!</div>
  114. <div id="9" style="height:20px;">hello world!</div>
  115. </div>
  116. </body>
  117. </html>
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(menu)

...but IE's error messages points to

menu = setInterval("ChangeHeight(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.
Nov 13 '06 #1
Share this Question
Share on Google+
3 Replies


P: 1
I may be mistaken (and late) but I believe setInterval's second parameter is measured in milliseconds and instructs the browser to repeat the call to the first argument with that interval. Thus you are repeatedly calling ChangeHeight every 30 milliseconds. If that is correct then you're probably overwhelming the browser with work.
Feb 10 '07 #2

dmjpro
100+
P: 2,476
is it running on firfox ......

because i don't know about firfox ....

in ie the window.setInterval is like this .....

var inter1 = window.setInterval(fun_ref,30)
var fun_ref = funtion(){
//ur code
}

at a condition ... window.clearInterval(inter1);

plz send me the reply .....
i am online
Feb 12 '07 #3

acoder
Expert Mod 15k+
P: 16,027
setInterval is repeatedly called until it is stopped or the user exits the page.

See the following links:
http://developer.mozilla.org/en/docs...ow.setInterval
http://javascript.about.com/library/blstvsi.htm
Feb 12 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.