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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layer doesnt work

    I'm trying out my layer which should work, but when I click a link I'm getting the error something aint defined. I cant figure out what im doing wrong here.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
    <html lang=us-en>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


    <SCRIPT LANGUAGE="JavaScript">
    function ShowLayer(id, action){
    if (type=="IE") eval("document.all." + id + ".style.visibility='" + action + "'");
    if (type=="NN") eval("document." + id + ".visibility='" + action + "'");
    if (type=="MO" || type=="OP")
    eval("document.getElementById('" + id + "').style.visibility='" + action + "'");
    }
    </script>

    </head>
    <body>

    <form name="document">
    <a href="javascript:ShowLayer('Layer7','hidden')">Hide picture</a>
    <a href="javascript:ShowLayer('Layer7','visible')">Show picture</a>
    <div id="Layer7" style="position:absolute; left:400px; top:248px; width:200px; height:115px; z-index:7; visibility:hidden"><img src="images/1.jpg"></div>
    </form>

    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Where is type being defined at? Your javascript methods are old. eval shouldn't be used in this situation and all modern browsers support document.getElementById. Try it like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #Layer7 {
    position:absolute;
    left:400px;
    top:248px;
    width:200px;
    height:115px;
    z-index:7;
    }
    </style>
    <script type="text/javascript">
    function ShowLayer(what){
    document.getElementById(what).style.display = (document.getElementById(what).style.display == "none") ? "block" : "none";
    }
    onload = function()
    {
    	document.getElementById('Layer7').style.display = 'none';
    }
    </script>
    </head>
    <body>
    <form name="document">
    <a href="#" onclick="ShowLayer('Layer7');return false">Hide picture/Show picture</a>
    <div id="Layer7"><img src="images/1.jpg"></div>
    </form>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I get the picture.

    Can you provide me with a selection box example, and lets say 3 layers ?
    I've been trying for hours, but can't seem to get it right.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You mean like if a user selects first option layer 1 is shown, if a user selects 2nd option layer 2 is shown, and so forth? Do you want only one layer visible at a time?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, you got the idea.. Thanks so far

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .boxes {
    position:absolute;
    left:200px;
    top:200px;
    width:200px;
    height:200px;
    }
    #box1 {
    background-color:#F00;
    color:#000;
    }
    #box2 {
    background-color:#00F;
    color:#000;
    }
    #box3 {
    background-color:#FF0;
    color:#000;
    }
    </style>
    <script type="text/javascript">
    function ShowLayer(what)
    {
    	var num = 4; // Number of boxes you have + 1
    	if(document.forms[0].showbox.options[document.forms[0].showbox.options.selectedIndex].value != "none")
    	{
    		for(var i = 1; i < num; i++)
    		{
    			document.getElementById('box'+i.toString()).style.display = "none";
    		}
    		document.getElementById(what).style.display = 'block';
    	}
    	
    }
    onload = function()
    {
    	document.getElementById('box1').style.display = 'none';
    	document.getElementById('box2').style.display = 'none';
    	document.getElementById('box3').style.display = 'none';
    }
    </script>
    </head>
    <body>
    <form name="document">
    <select id="showbox" name="showbox" onchange="ShowLayer(this.options[this.options.selectedIndex].value)">
    <option value="none">Select an item</option>
    <option value="box1">Box 1</option>
    <option value="box2">Box 2</option>
    <option value="box3">Box 3</option>
    </select>
    <div id="box1" class="boxes">Box 1</div>
    <div id="box2" class="boxes">Box 2</div>
    <div id="box3" class="boxes">Box 3</div>
    </form>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Apr 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks _Aerospace_Eng_ I nominated you as helpfull member


  •  

    Posting Permissions

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