Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

paulchwd · Sep 21st, 2007, 4:45 PM

Hello This will not work:

     function help()
     {
           var xx;
           xx = document.getElementById('xx');
           xx.style.visibility = 'visible';
      }

but this will

(Toggle Plain Text)

     function help()
     {
           var xx;
           xx = document.getElementById('xx');
           xx.style.visibility = 'hidden';
      }

The label (xx) is set to visible=false in visual studio..could this by why

Farflungfish · Nov 8th, 2007, 7:43 AM

 javascript Syntax (Toggle Plain Text) 
function toggle(DivId) {
  if (document.getElementById(DivId).className == "visible") {
     document.getElementById(DivId).className = "hidden";
  } else {
     document.getElementById(DivId).className = "visible";
  }
}
function toggle(DivId) {
  if (document.getElementById(DivId).className == "visible") {
     document.getElementById(DivId).className = "hidden";
  } else {
     document.getElementById(DivId).className = "visible";
  }
}

Created css styles with display.block: false / true; names visible/hidden.
works with everything not just divs

sorry if im completely off topic

cscgal · Nov 8th, 2007, 12:12 PM

There is no such thing as display:hidden. Your choices are display:block or display:none.

big_k105 · Nov 8th, 2007, 1:13 PM

@dani: He isn't using the display attribute, he is using the visibility attribute of style which does contain hidden and visible.

@paulchwd: I am not sure what is wrong, but from the looks of it, it is exactly what I did below and it works for me. http://www.kylekonline.com/test/visible.html <= if you want to see it working.

 html Syntax (Toggle Plain Text) 
<html>
<head>
	<title>Test Javascript</title>
	<script type="text/javascript" language="javascript">
	function showFirst()
	{
		var xx;
		xx = document.getElementById('xx');
		xx.style.visibility = 'visible';
	}
 
	function hideFirst()
	{
		var xx;
		xx = document.getElementById('xx');
		xx.style.visibility = 'hidden';
	}
 
	function showSecond()
	{
		var yy;
		yy = document.getElementById('yy');
		yy.style.display = 'block';
	}
 
	function hideSecond()
	{
		var yy;
		yy = document.getElementById('yy');
		yy.style.display = 'none';
	}
	</script>
</head>
<body>
<a href="javascript:;" onClick="showFirst()">Show First Div</a><br />
<a href="javascript:;" onClick="hideFirst()">Hide First Div</a><br />
<div id="xx">This is the first div called xx</div>
 
<br /><br />
 
<a href="javascript:;" onClick="showSecond()">Show Second Div</a><br />
<a href="javascript:;" onClick="hideSecond()">Hide Second Div</a><br />
<div id="yy">This is the second div called yy</div>
</body>
</html>
<html>
<head>
	<title>Test Javascript</title>
	<script type="text/javascript" language="javascript">
	function showFirst()
	{
		var xx;
		xx = document.getElementById('xx');
		xx.style.visibility = 'visible';
	}
	
	function hideFirst()
	{
		var xx;
		xx = document.getElementById('xx');
		xx.style.visibility = 'hidden';
	}

	function showSecond()
	{
		var yy;
		yy = document.getElementById('yy');
		yy.style.display = 'block';
	}

	function hideSecond()
	{
		var yy;
		yy = document.getElementById('yy');
		yy.style.display = 'none';
	}
	</script>
</head>
<body>
<a href="javascript<b></b>:;" onClick="showFirst()">Show First Div</a><br />
<a href="javascript<b></b>:;" onClick="hideFirst()">Hide First Div</a><br />
<div id="xx">This is the first div called xx</div>

<br /><br />

<a href="javascript<b></b>:;" onClick="showSecond()">Show Second Div</a><br />
<a href="javascript<b></b>:;" onClick="hideSecond()">Hide Second Div</a><br />
<div id="yy">This is the second div called yy</div>
</body>
</html>

Farflungfish · Nov 8th, 2007, 4:28 PM

Quote:

Originally Posted by cscgal

There is no such thing as display:hidden. Your choices are display:block or display:none.

sorry couldn't be bothered looking it up, i actually substituted block/none for true/false - the hidden/display is for the class names in the css.

though ill use hidden/visible for this css:

 css Syntax (Toggle Plain Text) 
.visible {
	display: block;
}
.hidden {
	display: none;
}
.visible {
	display: block;
}
.hidden {
	display: none;
}

 javascript Syntax (Toggle Plain Text) 
function toggle(DivId) {
  if (document.getElementById(DivId).className == "visible") {
     document.getElementById(DivId).className = "hidden";
  } else {
     document.getElementById(DivId).className = "visible";
  }
}
function toggle(DivId) {
  if (document.getElementById(DivId).className == "visible") {
     document.getElementById(DivId).className = "hidden";
  } else {
     document.getElementById(DivId).className = "visible";
  }
}

 html Syntax (Toggle Plain Text) 
<a href="#nothing" onclick="toggle('divid')"> Clicky clicky</a>
 
<div id='divid' class='hidden'>woot woot hide me show me</div>
<a href="#nothing" onclick="toggle('divid')"> Clicky clicky</a>

<div id='divid' class='hidden'>woot woot hide me show me</div>

Also using display:block/display:none means that IE won't substitute a hidden div with space, instead it will render nothing until told to.

Sep 21st, 2007, 4:45 PM	#1
paulchwd Hobbyist Programmer Join Date: Mar 2005 Posts: 139 Rep Power: 4	.style.visibility = 'visible'; Hello This will not work: (Toggle Plain Text) function help() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'visible'; } function help() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'visible'; } but this will (Toggle Plain Text) function help() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'hidden'; } function help() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'hidden'; } The label (xx) is set to visible=false in visual studio..could this by why

Nov 8th, 2007, 7:43 AM	#2
Farflungfish Newbie Join Date: Nov 2007 Posts: 6 Rep Power: 0	Re: .style.visibility = 'visible'; javascript Syntax (Toggle Plain Text) function toggle(DivId) { if (document.getElementById(DivId).className == "visible") { document.getElementById(DivId).className = "hidden"; } else { document.getElementById(DivId).className = "visible"; } } function toggle(DivId) { if (document.getElementById(DivId).className == "visible") { document.getElementById(DivId).className = "hidden"; } else { document.getElementById(DivId).className = "visible"; } } Created css styles with display.block: false / true; names visible/hidden. works with everything not just divs sorry if im completely off topic

Nov 8th, 2007, 12:12 PM	#3
cscgal Hobbyist Programmer Join Date: Oct 2007 Location: New York Posts: 161 Rep Power: 10	Re: .style.visibility = 'visible'; There is no such thing as display:hidden. Your choices are display:block or display:none. __________________ DaniWeb IT Discussion Community Everything Information Technology related all in one convenient interactive online publication and community

Nov 8th, 2007, 1:13 PM	#4
big_k105 PFO Founder Join Date: Mar 2004 Location: Fargo, ND Posts: 1,613 Rep Power: 10	Re: .style.visibility = 'visible'; @dani: He isn't using the display attribute, he is using the visibility attribute of style which does contain hidden and visible. @paulchwd: I am not sure what is wrong, but from the looks of it, it is exactly what I did below and it works for me. http://www.kylekonline.com/test/visible.html <= if you want to see it working. html Syntax (Toggle Plain Text) <html> <head> <title>Test Javascript</title> <script type="text/javascript" language="javascript"> function showFirst() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'visible'; } function hideFirst() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'hidden'; } function showSecond() { var yy; yy = document.getElementById('yy'); yy.style.display = 'block'; } function hideSecond() { var yy; yy = document.getElementById('yy'); yy.style.display = 'none'; } </script> </head> <body> <a href="javascript:;" onClick="showFirst()">Show First Div</a><br /> <a href="javascript:;" onClick="hideFirst()">Hide First Div</a><br /> <div id="xx">This is the first div called xx</div> <br /><br /> <a href="javascript:;" onClick="showSecond()">Show Second Div</a><br /> <a href="javascript:;" onClick="hideSecond()">Hide Second Div</a><br /> <div id="yy">This is the second div called yy</div> </body> </html> <html> <head> <title>Test Javascript</title> <script type="text/javascript" language="javascript"> function showFirst() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'visible'; } function hideFirst() { var xx; xx = document.getElementById('xx'); xx.style.visibility = 'hidden'; } function showSecond() { var yy; yy = document.getElementById('yy'); yy.style.display = 'block'; } function hideSecond() { var yy; yy = document.getElementById('yy'); yy.style.display = 'none'; } </script> </head> <body> <a href="javascript<b></b>:;" onClick="showFirst()">Show First Div</a><br /> <a href="javascript<b></b>:;" onClick="hideFirst()">Hide First Div</a><br /> <div id="xx">This is the first div called xx</div> <br /><br /> <a href="javascript<b></b>:;" onClick="showSecond()">Show Second Div</a><br /> <a href="javascript<b></b>:;" onClick="hideSecond()">Hide Second Div</a><br /> <div id="yy">This is the second div called yy</div> </body> </html> __________________ BIG K aka Kyle Programming Forums Kyle K Online Please do not PM or email me programming questions. Post them in the forums instead.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Rectangle in EAST is partially visible	susam_pal	Java	0	Sep 30th, 2005 12:44 AM