Display/Hide layer with radio button

Discussion in 'HTML & Website Design' started by Agent47, Sep 24, 2006.

0
  1. #1
    I would like to unhide a layer <div> on my page when a radio button is selected. When the radio button is not selected, the layer should not be visible. Any ideas how will I be able to achieve that?
     
    Agent47, Sep 24, 2006 IP
  2. Zipp425

    Zipp425 Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    here you go... It works better in Firefox than IE, but it works. test it out for yourself...

    
<script type="text/javascript">
var div = 'off';
function toggle_div(){
if(div != 'on'){
document.getElementById('examplediv').style.display = 'block';
div = 'on';
} else{
document.getElementById('examplediv').style.display = 'none';
div = 'off';
}
}
</script>
<div id="examplediv" style="width:300px;border:1px solid #eeeeee; display:none;">
this is the test div
</div>
<label>
<input name="radiobutton" onmousedown="toggle_div();" type="radio" value="radiobutton" />
turn on div</label>
    Code (markup):
     
    Zipp425, Sep 25, 2006 IP
  3. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #3
    This is a good try, Zipp425, and it would work, except for the threat of human error. If someone clicks the radio button, but releases the mouse while not positioned on it, the variable will switch, but the button will not be "pressed." This is actually a fairly common occurence, and you know you gotta plan for human error ;)

    Your best bet is to test for whether the radio button is checked, giving a short delay before checking to ensure the browser recognizes the change before initiating the script (I've found sometimes a script can get killed by browser lag). Try this out: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script type="text/javascript">
		function delay() {
			setTimeout('toggle()','200');
		}
		function toggle() {
			if (document.getElementById('switchme').checked === true) {
				document.getElementById('whatev').style.display = "block"
			} else {
				document.getElementById('whatev').style.display = "none"
			}
		}
	</script>
	<style type="text/css">
		#whatev { display:none }
	</style>
</head>

<body>

<p onmouseup="delay();"><input type="radio" name="switchme" id="switchme" /> Show<br />
<input type="radio" name="switchme" checked="checked" /> Hide</p>

<div id="whatev">
	<p>Content.</p>
	<p>Content.</p>
	<p>Content.</p>
	<p>Content.</p>
	<p>Content.</p>
</div>

</body>
</html>
    Code (markup):
     
    the_pm, Sep 26, 2006 IP
  4. Zipp425

    Zipp425 Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    sweet thanks for the correction
     
    Zipp425, Sep 26, 2006 IP