Programming Forums - .style.visibility = 'visible';

Programming Forums (http://www.programmingforums.org/forumindex.php)

- JavaScript and Client-Side Browser Scripting (http://www.programmingforums.org/forum23.html)

- - .style.visibility = 'visible'; (http://www.programmingforums.org/showthread.php?t=14015)

paulchwd

Sep 21st, 2007 4:45 PM

.style.visibility = 'visible';

Hello This will not work:

     function help()

     {

           var xx;

           xx = document.getElementById('xx');

           xx.style.visibility = 'visible';

      }

but this will

     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

Re: .style.visibility = '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

Re: .style.visibility = 'visible';

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

big_k105

Nov 8th, 2007 1:13 PM

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>
<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>

Farflungfish

Nov 8th, 2007 4:28 PM

Re: .style.visibility = 'visible';

Quote:

Originally Posted by cscgal (Post 136486)

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:

.visible {
        display: block;
}
.hidden {
        display: none;
}

function toggle(DivId) {
  if (document.getElementById(DivId).className == "visible") {
     document.getElementById(DivId).className = "hidden";
  } else {
     document.getElementById(DivId).className = "visible";
  }
}

<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.

All times are GMT -5. The time now is 4:43 PM.