...

View Full Version : 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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum