PDA

View Full Version : my overlay box works in Firefox, but fails in IE8



jasonc310771
03-13-2011, 04:32 PM
Getting error in IE 8, but works ok in Firefox.

The page should show an overlay box with text in it, but this only works in Firefox but not IE can anyone see why this may be?

The error I get is...

Message: Object doesn't support this property or method
Line: 26
Char: 29
Code: 0

line 26 is..
helpContent = document.getElementById('helpContent');






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#helpOverlay { background-color: #ccffcc; display: none; margin-left: 40px; position: absolute; width: 400px; height: 200px; visibility: visible }
#helpContainer{ color: black; background-color: #0ff; text-align: center; position: absolute; width: 100%; overflow: visible; visibility: visible; display: block }
</style>
<script type="text/javascript">//<![CDATA[
function hideHelpContent() {
document.getElementById('helpOverlay').style.display = 'none';
var helpContent = document.getElementById('helpContent');
helpContent.innerHTML = '';
}

function showHelpContent(layer) {
var xmlhttp;
if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
if(xmlhttp.responseText == ''){ //document.getElementById('passengerID').value='0';
//document.getElementById('results').style.display='none';
} else { helpIconId = document.getElementById(layer); //alert(layer);
helpContent = document.getElementById('helpContent'); // line 26
helpContent.innerHTML = '';
// Move the help container!
the_left = ds_getleft(helpIconId);
the_top = ds_gettop(helpIconId); // + helpContent.offsetHeight;
//alert(the_left + ' ' + the_top);
helpContainer = document.getElementById('helpContainer');
helpContainer.style.left = the_left + 'px';
helpContainer.style.top = the_top + 'px';
helpContent.innerHTML = xmlhttp.responseText;
document.getElementById('helpOverlay').style.display = 'block';
}
}
}
xmlhttp.open("GET","getHelpText.php?name="+layer,true); xmlhttp.send();
}




// Get the left and the top of the element.
function ds_getleft(el) {
var tmp = el.offsetLeft;
el = el.offsetParent
while(el) {
tmp += el.offsetLeft;
el = el.offsetParent;
}
return tmp;
}
function ds_gettop(el) {
var tmp = el.offsetTop;
el = el.offsetParent
while(el) {
tmp += el.offsetTop;
el = el.offsetParent;
}
return tmp;
}



//]]></script>
</head>
<body>

<div id="helpContainer"><div id="helpOverlay"><a href="#" onclick="hideHelpContent();" style="float: right;">close</a><div id="helpContent"></div></div></div>
<br />
<br />
<br />
<br />
<br />
<br />
<img id="helpA" alt="" onclick="showHelpContent('helpA')" src="../images/newsimage39.gif">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img id="helpB" alt="" onclick="showHelpContent('helpB')" src="../images/newsimage39.gif">

</body>
</html>