|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 5th, 2008, 02:58 PM
|
||||
|
||||
|
I Learned Something Interesting About visibility and javascript.
So I had this div.
Code:
<div id="someDiv">Test</div> Which was being hidden via a style sheet Code:
#someDiv { visibility:hidden; }
And I had this javascript which hid and displayed the div. Code:
function invertVisibility ( htmlObject )
{
if (htmlObject.style.visibility == 'hidden')
{
htmlObject.style.visibility = 'visible';
}
else if (htmlObject.style.visibility == 'visible')
{
htmlObject.style.visibility = 'hidden';
}
}
Naturally, I needed something to activate this code, so I put a link on my page. Code:
<a href="#" onclick="invertVisibility(document.getElementById('someDiv')); return false;">Show Div</a>
<div id="someDiv"><a href="#" onclick="invertVisibility(document.getElementById('someDiv'));return false;">Close This Div</div>
Now, upon loading the page, everything seemed to be in order. The div was hidden from view, but upon clicking on the the 'Show Div' the first time nothing happened; HOWEVER, clicking on the link a second time did, indeed show the div (and closing the div worked as well). I discovered that the value of htmlObject.style.visibility was empty upon loading (despite the fact that the browser was hiding the div). The only work around I have is to set the default visibility inline. Code:
<a href="#" onclick="invertVisibility(document.getElementById('someDiv')); return false;">Show Div</a>
<div id="someDiv" style="visibility:hidden;"><a href="#" onclick="invertVisibility(document.getElementById('someDiv'));return false;">Close This Div</div>
This is a really lame work around. Anyone know a better solution?
|
|
#2
May 5th, 2008, 03:42 PM
|
||||
|
||||
|
The style object/property of elements only reflects what is set in one of its properties or the style attribute of that element. To see the computed values of the properties, you need to use another method.
getStyle Function http://www.quirksmode.org/dom/getstyles.html http://www.robertnyman.com/2006/04/...-of-an-element/ http://www.codehouse.com/javascript..._current_style/
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions IE7: the generation 7 browser new in a world of generation 8 browsers. Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
|
|
#3
May 5th, 2008, 03:58 PM
|
||||
|
||||
|
Hi there Tundra,
Quote:
Well, you could try it like this... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#mylink {
color:#000;
}
#someDiv {
margin-top:10px;
visibility:hidden;
}
</style>
<script type="text/javascript">
var obj;
window.onload=function() {
obj=document.getElementById('someDiv')
document.getElementById('mylink').onclick=function() {
this.firstChild.nodeValue=(this.firstChild.nodeValue=='Hide Div')?'Show Div':'Hide Div';
invertVisibility(obj);
return false;
}
}
function invertVisibility(htmlObject){
htmlObject.style.visibility=(htmlObject.style.visibility=='visible')?'hidden':'visible';
}
</script>
</head>
<body>
<div>
<a id="mylink" href="#">Show Div</a>
</div>
<div id="someDiv">Test</div>
</body>
</html>
coothead Last edited by Kravvitz : May 5th, 2008 at 04:00 PM. Reason: fixed bbcode
|
|
#4
May 6th, 2008, 06:09 AM
|
||||
|
||||
|
Quote:
Although that solves the problem for elements that are initially hidden, on elements that start out visible the problem remains. The answer lies in Kravvitz's links.
|
|
| Viewing: Dev Shed Forums > Web Design > JavaScript Development > I Learned Something Interesting About visibility and javascript. |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
