Internet Explorer macht kein setInterval von Jochen, 20.02.2007 21:15

Internet Explorer macht kein setInterval

Jochen 20.02.2007 21:15

javascript

Moin!
Ich habe ein Problem mit dem Internet Explorer. Er will kein setInterval machen. Und zwar habe ich mehrere Funktionen. Die Hälfte der Funktionen ruft die anderen mit setInterval auf. Und da spielt der IE nicht mit. Woran liegt das? Ich habe für euch den kompletten Quellcode. Ich hoffe ihr könnt damit etwas anfangen. Es ist bei allen Funktionen das gleiche Problem. Der IE macht bei jedem setInterval Probleme. Warscheinlich reicht es schon, wenn man bei einer Funktion das Problem gefunden hat.
Hier die HTML-Datei:
#######################################################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
  
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
 <meta http-equiv="Content-Script-Type" content="text/javascript">  
  
 <style type="text/css">  
body{  
 font-family: Georgia, "Times New Roman", Times, serif;  
}  
h2{  
 border-bottom-style: dotted;  
 border-bottom-width: 1px;  
 border-bottom-color: #222222;  
 color: #222222;  
 padding-bottom: 0.2em;  
 margin-right: 5em;  
 font-size: 1.8em;  
}  
p#scrollHeight{  
 width: 300px;  
 text-align: justify;  
}  
div.text{  
 width: 200px;  
 margin-left: 8em;  
 background-color: #222222;  
 padding: 0 3px 0 3px;  
 color: #FFFFFF;  
 font-size: 0.8em;  
 overflow: hidden;  
}  
 </style>  
 <script type="text/javascript" src="test.js"></script>  
</head>  
  
<body>  
 <p>  
  Diese Funktionen funktionieren uneingeschränkt in folgenden Browsern:  
 </p>  
 <ul>  
  <li>Firefox 2.01</li>  
  <li>Opera 8.52</li>  
  <li>Netscape 7.1</li>  
  <li>Netscape 8.1</li>  
 </ul>  
 <h2>Ein Div ausklappen (height)</h2>  
 <p>  
  <a href="#" onclick="OpenBoxHeight('openBoxHeight', '225', 'px');return false">Komplett ausklappen</a> | <a href="#" onclick="OpenBoxHeight('openBoxHeight', '95', 'px');return false">Halb ausklappen</a>  
 </p>  
 <div style="height: 200px;">  
  <div id="openBoxHeight" class="text" style="display:none; height: 0px;">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
   sed do eiusmod tempor incididunt ut labore et dolore magna  
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
   ullamco laboris nisi ut aliquip ex ea commodo consequat.  
   Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit  
   anim id est laborum.  
  </div>  
 </div>  
 <h2 style="margin-top:3em;">Ein Div einklappen (height)</h2>  
 <p>  
  <a href="#" onclick="CloseBoxHeight('closeBoxHeight', '225', 'px');return false">Komplett einklappen</a> | <a href="#" onclick="CloseBoxHeightHalf('closeBoxHeight', '95', 'px');return false">Halb einklappen</a>  
 </p>  
  
 <div style="height: 230px;">  
  <div id="closeBoxHeight" class="text" style="display:block; height:225px;">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
   sed do eiusmod tempor incididunt ut labore et dolore magna  
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
   ullamco laboris nisi ut aliquip ex ea commodo consequat.  
   Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit  
   anim id est laborum.  
  </div>  
 </div>  
  
 <h2 style="margin-top:3em;">Ein Div einklappen (width)</h2>  
 <p>  
  <a href="#" onclick="CloseBoxWidth('slideWidthOpen', '200', 'px');return false">Komplett einklappen</a> |  
  <a href="#" onclick="CloseBoxWidthHalf('slideWidthOpen', '200', 'px');return false">Halb einklappen</a>  
 </p>  
  
 <div id="slideWidthOpen" class="text" style="display:block; height:225px; width:200px">  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  sed do eiusmod tempor incididunt ut labore et dolore magna  
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
  ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  Duis aute irure dolor in reprehenderit in voluptate velit esse  
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
  cupidatat non proident, sunt in culpa qui officia deserunt mollit  
  anim id est laborum.  
 </div>  
  
  
 <h2 style="margin-top:3em;">Ein Div einklappen (width und height)</h2>  
 <p>  
  <a href="#" onclick="CloseBoxComplete('slideCloseBoxComplete', '200', '225', 'px');return false">Komplett einklappen</a> |  
  <a href="#" onclick="CloseBoxHalf('slideCloseBoxComplete', '200', '225', 'px');return false">Halb einklappen</a>  
 </p>  
 <div style="height: 230px;">  
  <div id="slideCloseBoxComplete" class="text" style="display:block; height:225px; width:200px">  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
   sed do eiusmod tempor incididunt ut labore et dolore magna  
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
   ullamco laboris nisi ut aliquip ex ea commodo consequat.  
   Duis aute irure dolor in reprehenderit in voluptate velit esse  
   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
   cupidatat non proident, sunt in culpa qui officia deserunt mollit  
   anim id est laborum.  
  </div>  
 </div>  
</body>  
</html>

#######################################################################
Und hier die javascript-Datei:
#######################################################################

var i = 0;  
var a = 0;  
  
// Ein Div einklappen (height) ganz  
function CloseBoxHeight(box, height, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = height;  
 closeBoxHeight = window.setInterval(  
  function() {  
   slideHeightClose(box, height , me)  
   }, 20);  
}  
function slideHeightClose(box, height, me){  
 document.getElementById(box).style.height = i + me;  
 document.getElementById(box).style.display = "block";  
 i = i - 5;  
 if( i <= 0) {  
  window.clearInterval(closeBoxHeight);  
  document.getElementById(box).style.visibility = "hidden";  
 }  
}  
  
  
// Ein Div einklappen (height) halb  
function CloseBoxHeightHalf(box, height, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = 255;  
 closeBoxHeight = window.setInterval(  
  function() {  
   slideHeightCloseHalf(box, height , me)  
   }, 20);  
}  
function slideHeightCloseHalf(box, height, me){  
 document.getElementById(box).style.height = i + me;  
 document.getElementById(box).style.display = "block";  
 i = i - 5;  
 if( i <= 95) {  
  window.clearInterval(closeBoxHeight);  
 }  
}  
  
  
// Ein Div ausklappen (height) ganz und halb  
function OpenBoxHeight(box, height, me){  
 i = 0;  
 openBoxHeight = window.setInterval(  
  function() {  
   slideHeightOpen(box, height , me)  
   }, 20);  
}  
function slideHeightOpen(box, height, me){  
 document.getElementById(box).style.height = i + me;  
 document.getElementById(box).style.display = "block";  
 i = i + 5;  
 if( i >= height ){  
  window.clearInterval(openBoxHeight);  
  i = 0;  
 }  
}  
  
// Ein Div einklappen (width) ganz  
function CloseBoxWidth(box, width, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = width;  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxWidth(box, width , me)  
   }, 20);  
}  
function slideCloseBoxWidth(box, height, me){  
 document.getElementById(box).style.width = i + me;  
 i = i - 5;  
 if( i <= 0 ){  
  window.clearInterval(slideWidthOpen);  
  document.getElementById(box).style.visibility = "hidden";  
 }  
}  
  
// Ein Div einklappen (width) halb  
function CloseBoxWidthHalf(box, width, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = width;  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxWidthHalf(box, width, me)  
   }, 20);  
}  
function slideCloseBoxWidthHalf(box, height, me){  
 document.getElementById(box).style.width = i + me;  
 i = i - 5;  
 if( i <= 95 ){  
  window.clearInterval(slideWidthOpen);  
 }  
}  
  
  
// Ein Div einklappen (width und height) ganz  
function CloseBoxComplete(box, width, height, me){  
 i = width;  
 a = height;  
 document.getElementById(box).style.visibility = "visible";  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxComplete(box, width, height, me)  
   }, 20);  
}  
function slideCloseBoxComplete(box, width, height, me){  
 document.getElementById(box).style.width = i + me;  
 document.getElementById(box).style.height = a + me;  
 document.getElementById(box).style.visibility = "visible";  
 i = i - 5;  
 a = a - 5;  
 if( i <= 0 ){  
  window.clearInterval(slideWidthOpen);  
  document.getElementById(box).style.visibility = "hidden";  
 }  
}  
  
// Ein Div einklappen (width und height) halb  
function CloseBoxHalf(box, width, height, me){  
 document.getElementById(box).style.visibility = "visible";  
 i = width;  
 a = height;  
 slideWidthOpen = window.setInterval(  
  function() {  
   slideCloseBoxHalf(box, width, height, me)  
   }, 20);  
}  
function slideCloseBoxHalf(box, width, height, me){  
 document.getElementById(box).style.width = i + me;  
 document.getElementById(box).style.height = a + me;  
 i = i - 5;  
 a = a - 5.625;  
 if( i <= 100 ){  
  window.clearInterval(slideWidthOpen);  
 }  
}

#######################################################################

Vielen Dank für die Mühen, wenn ihr euch meinen Quellcode anschaut. Jochen

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Jochen: Internet Explorer macht kein setInterval

Beitrag lesen

Internet Explorer macht kein setInterval

Internet Explorer macht kein setInterval