Hi
I have the following javascript rolldown. When I leave Doctyoe in the code, it works fine with Internet Explorer but it doesn't work with Firefox. When I erase the Doctype, it works smoothly in firefox but not in IE. Can somebody tell me how can I make my rolldown compatible with both browsers. Is it a Doctype issue or I can fix it by changing my Divs syntax.
Thanks
Faraz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<script language="javascript">
slideSpeed = 20;
function toggle(elementId)
{
obj = document.getElementById(el
ementId);
while(obj.nextSibling && (obj.className != 'menu')) obj =
obj.nextSibling;
obj.speed = -1 * obj.speed;
if(obj.slideTimer) return; //Already moving
var x = slider.length;
slider[x] = obj;
slide(x);
}
function initMenus()
{
if(!document.getElementsBy
TagName) return;
slider = new Array();
var divs = document.getElementsByTagN
ame('div')
;
for(var x=0; x<divs.length; x++) {
divs[x].originalHeight = parseInt(divs[x].style.hei
ght);
if(divs[x].className == 'menu') divs[x].speed = -1;
}
for(var x=0; x<divs.length; x++) {
// Hide the Menu DIV's
if(divs[x].className == 'menu'){
divs[x].style.height = '1px';
divs[x].style.display = 'none';
}
// Also, Hide buttons associated with the DIV's
if(divs[x].className == 'hiddenButton'){
divs[x].style.display = 'none';
}
}
}
function slide(x)
{
var obj = slider[x];
if(obj.style.display != 'block') obj.style.display = 'block';
var height = obj.offsetHeight + obj.speed * slideSpeed;
var targetHeight = obj.originalHeight;
if(height > targetHeight)
{
obj.style.height = targetHeight + 'px';
obj.slideTimer = false;
// Show the Button Too
document.getElementById(ob
j.id+'Butt
on').style
.display = 'block';
return;
}
if(height <= 1)
{
obj.style.height = '1px';
obj.style.display = 'none';
// Hide the Button Too
document.getElementById(ob
j.id+'Butt
on').style
.display = 'none';
obj.slideTimer = false;
return;
}
obj.style.height = height + 'px';
obj.slideTimer = setTimeout('slide(' + x + ');', 40);
}
</script>
</head>
<body onload="initMenus();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="5px"><img src="image/spacer.gif" alt="" width="5" height="10"></td>
<td><div style="float: left; height: 17px;"><a href="javascript:toggle('p
hysicianLo
gin');" class="leftmenu">Physician
Login</a></div><div align="right" id="physicianLoginButton" class="hiddenButton"><inpu
t type="image" src="image/go.gif"/></div>
<div id="physicianLogin" class="menu" style="height: 85px">
<br>
username: <br><input type="text" name="username" class="menuInput"/>
password: <br><input type="password" name="password" class="menuInput"/>
</div>
</td>
</tr>
</table>
</body>
</html>
Start Free Trial
