Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript help with popup div

    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:
    Code:
    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:
    Code:
    <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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Validate your markup first and fox all errors in it. You need to enclose all your attribute values with double quotes, like
    Code:
    <td id="tb_top">
    Also, make use of firebug, which a good tool to debug your code in FF
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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</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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •