JavaScript help with popup div

DevonL

05-14-2009, 03:48 PM

Alright I'm trying to create a small pop up div table to describe something ... yet it's not working, at all. This is the JavaScript I have at the moment:

function showHelp(id) {
document.getElementById("tb_top").innerHTML = "<b>" + title[id];
document.getElementById("tb_mid").innerHTML = texts[id];
document.getElementById("tb_bot").innerHTML = "<a href=javascript:hideHelp()>Close</a>";

s = document.getElementById("help_layer");
w = document.body.clientWidth;
h = document.body.clientHeight;
s.style.pixelLeft = (w - s.clientWidth) / 2;
s.style.pixelTop = ((h - s.clientHeight) / 2) + document.body.scrollTop;
s.style.visibility = "visible";
}
function hideHelp() {
document.getElementById("help_layer").style.visibility = "hidden";
}

title[1] = "Time Test 1";
text[1] = "This is just some random text";

And this is the HTML for the div:

<div id=help_layer style="position:absolute; z-index:20; visibility:hidden; top:0px; left:0px;">
<table bgcolor=white width=250 border=2 cellpadding=5 cellspacing=1>
<tr><td id=tb_top bgcolor=#79A6D0><b></b></td></tr>
<tr><td id=tb_mid></td></tr>
<tr><td id=tb_bot></td></tr>
</table></div>

The div however is actually showing up at the bottom of the screen and when clicking on the link: (<a href=javascript:showHelp(1)>?</a>) it simply does nothing. Any help or insight? Thanks

abduraooft

05-14-2009, 03:53 PM

Validate your markup (http://validator.w3.org/#validate_by_input) first and fox all errors in it. You need to enclose all your attribute values with double quotes, like
<td id="tb_top">

Also, make use of firebug (http://getfirebug.com), which a good tool to debug your code in FF

DevonL

05-14-2009, 04:03 PM

<div id="help_layer" style="position:absolute; z-index:20; visibility:hidden; top:0px; left:0px;">
<table bgcolor="white" width="250" border="2" cellpadding="5" cellspacing="1">
<tr><td id="tb_top" bgcolor="#79A6D0"><b></b></td></tr>
<tr><td id="tb_mid"></td></tr>
<tr><td id="tb_bot"></td></tr>
</table></div>

It's been validated and the only error it sees is because of it not recognizing the CSS. Any insight as to why it's showing at the bottom of the page, and simply not popping up as needed?

adios

05-14-2009, 10:25 PM

<!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</title>
<style type="text/css">
</style>
<script type = "text/javascript">

var title = ['title 1','title 2'];
var texts = ['text 1','text 2'];

function showHelp(id) {
document.getElementById("tb_top").innerHTML = "<b>" + title[id];
document.getElementById("tb_mid").innerHTML = texts[id];
document.getElementById("tb_bot").innerHTML = "<a href='#null' onclick='hideHelp()'>Close</a>";

s = document.getElementById("help_layer");
w = document.body.clientWidth;
h = document.documentElement.clientHeight;
s.style.left = (w - s.clientWidth) / 2 + 'px';
s.style.top = ((h - s.clientHeight) / 2) + document.body.scrollHeight + 'px';
s.style.visibility = "visible";
}
function hideHelp() {
document.getElementById("help_layer").style.visibility = "hidden";
}

</script>
</head>
<body>
<a href="#null" onclick="showHelp(1);return false;">show</a>
<a href="#null" onclick="hideHelp(1);return false;">hide</a>
<div id="help_layer" style="position:absolute; z-index:20; visibility:hidden; top:0px; left:0px;">
<table bgcolor="white" width="250" border="2" cellpadding="5" cellspacing="1">
<tr><td id="tb_top" bgcolor="#79A6D0"><b></b></td></tr>
<tr><td id="tb_mid"></td></tr>
<tr><td id="tb_bot"></td></tr>
</table></div>
</body>
</html>

documentElement. (http://home.cogeco.ca/~ve3ll/jstutor6.htm)