SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I create a layer thats hidden in DHTML

    Hi folks,

    Im putting together an online form and wish to have little icons spread through out to offer context sensitive help using a hidden layer that will show itself when the icon is clicked.

    I've seen something similar on a Forum somewhere (I thought it was here) where you could click an icon beside a username in a thread and details about the person appeared under their name.

    I've got some code together but it doesnt work properly. The layer it creates although its invisible is still there and any text or tables placed underneath have alarge blank space where the hidden layer is.

    Any help on this would be great thanks.

    Here is my lame code at the moment.

    [VBS]<html>
    <head>

    <script language="JavaScript">
    <!--

    ns4 = (document.layers)? true:false
    ie4 = (document.all)? true:false

    function showhide(id) {
    if (ns4) {
    if (document.layers[id].visibility == "show") { document.layers[id].visibility = "hide" }
    else { document.layers[id].visibility = "show" }
    }

    else if (ie4) {
    if (document.all[id].style.visibility == "visible") document.all[id].style.visibility = "hidden"
    else document.all[id].style.visibility = "visible";
    }
    }

    //-->
    </SCRIPT>
    </HEAD>

    <BODY BGCOLOR="#FFFFFF">

    <A HREF="javascript:showhide('H1')">show</A>

    <DIV ID="H1" STYLE="visibility: hidden">

    HELLO

    </DIV>
    123
    </BODY>
    </HTML>[/VBS]

    And here is a link to my broken version of it online (with all the info and details around it), its a form but its not connected up yet.

    Many thanks.

    Rikki

    http://www.v-dm.com/test.htm

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Read this thread and see if it sheds any light...
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the code at home that I saw, and it was actually from Sitepoint forums as I previously thought! Any Ideas why they removed it ?

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    Read this thread and see if it sheds any light...
    Hi again.

    Here is my working code, thanks for your help.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    <!--
    
    function expandx(listID) {
            if (listID.style.display=="none") {
                    listID.style.display="";
            }
            else {
                    listID.style.display="none";
            }
    }
    
    //-->
    </script>
    </head>
    
    <body>
    
    <A HREF="javascript:expandx(H1);"> Show Help </a><BR>
    
    
    	<div id="H1" style="display:none">
    
    	Hidden text goes here, for example help text.
    
    	<BR>
    	</div>
    
    
    This is always displayed on the users screen.
    
    </body>
    </html>

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2002
    Location
    Scotland, UK
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL - Any ideas on how to get it to function under Netscape/Opera/Mozilla?

    Thanks


Bookmarks

Posting Permissions

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