Forum Moderators: open
I have created a simple 20 line file to show what I am doing. and will be very appreciative if someone can point out what am I doing wrong? Or what is wrong with this piece of code?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.myAlert{
position:absolute;
left:50%;
width:500px;
margin-top:50px;
margin-left:-266px;
padding:15px;
border:5px solid #cc0000;
background-color:#fafae6;
}
</style>
<script language='javascript' type='text/javascript'>
function roohAlert(duration, msg)
{
var abox = document.getElementById('alertBox') ;
alert (abox) ;
abox.style.innerHTML = msg ;
abox.style.display = 'block' ;
abox.style.visibilty = 'visible' ;
//setTimeout("abox.style.visibilty='hidden'; abox.style.display = 'none'", duration) ;
}
</script>
</head>
<body>
<div id='alertBox' class='myAlert' align='center' style='z-index:9999; display:none; visibility:hidden'>
Happy Highlighting
</div>
<a href="#" onclick="javascript:roohAlert(5000, 'Hello world')">Click to see my alert window</a>
</body>
</html>
should be
abox.innerHTML = msg ;
There is no need to switch both display and visibilty.
Assume the alert is for debug, probably better to alert some property of abox than abox itself.
Did you try it in your browser? I have tried locally in both IE & FF
if removing this don't work, try without initial display:none; visibility:hidden' to check rest of the code.
abox.style.visibility = 'visible' ;
Thank you! Thank you! Thank you!
I stared at this code for an hour and didn't see it - definitely needed those second pair of eyes. Appreciate your help, thanks again! :)
