PDA

View Full Version : Javascript Layer Visibility

Cobain
03-09-2006, 05:11 PM
Hi, I haven't posted on these forums in awhile, but I'm hoping that someone can help me. I have searched the forums and didn't find really what I need, and even if I had, I don't know javascript. What I have so far, read below the code for what I need help with.
<code>

<html>
<head>
<title>drop down layer visibility test</title>
</head>



<body>
<br><br><br><br>
<div align="center">
<form action="/dropdown.html">

<select name="menu" ID="menu">
<option selected action="javascript:void(0)">Choose One...</option>
<option value="one" ID="one">Option One</option>
<option value="two" ID="two" >Option Two</option>
</select>

<input type="submit" value="Now Click Here">

</form>
</div>
<br><br>
<div id="one" style="position: absolute; z-index: 2; visibility: hidden; left: 10%; top: 50%; width: 80%; height: 50%;">
This Is Layer One.</div>

<div id="two" style="position: absolute; z-index: 2; visibility: hidden; left: 10%; top: 50%; width: 80%; height: 50%;">
This Is Layer Two</div>

</body>
</html>

</code>


What I want to do is when the user selects option one and hits the submit button, without reloading the page or anything, layer 'one' becomes visible, and likewise for option and layer 'two'. I don't know any javascript, but I know my HTML and CSS, but could not make this thing work, so I resorted to javascript. I know this can be done with frames, but I want to stay away from them. It would be cool to have it where the submit button was not neessary, when the user clicks an option the form processes it, but I don't by any means have to have that little trick. What I am hoping is that someone out there can do me a huge favor and write some short javascript thing on this page that processes the form and makes the correct layer visible. I really appreciate you even reading this, and would be extremely greatful if someone would be generous enough to write me a short script for this. Thanks much,

Cobain
aluminumpork
03-09-2006, 07:46 PM
Well, it's a pretty basic solution, try this:


<html>
<head>

<title>Show a Layer On Click</title>

<style type="text/css">

#layerOne {
position: absolute;
top: 100px;
left: 100px;
display: none;
background-color: black;
width: 100px;
height: 100px;
color: white;
}

</style>

<script type="text/javascript">

function showLayer(){
document.getElementById('layerOne').style.display = 'block';
}

</script>

</head>
<body>

<div id="layerOne">Hey Hey!</div>

<a href="#" onClick="showLayer();">Show the Layer!</a>

</body>
</html>


When you click the link, the layer shows. I've never used the visibility attribute in CSS, but I do know display works fine for this. When you click the link, you're simply telling Javascript to location the DIV by the Id of layerOne. It then sets the style attribute of display to block.

You can locate it as you wish using absolute positioning. Fun stuff!

Hope I helped.