...

View Full Version : Div visibility...



mooncricket11
08-15-2005, 11:22 PM
Hello, I have a div menu that I want to show and hide when a link is pressed... I came up with this:


function test(what) {
var obj=document.getElementById(what).style;
if (obj.visibility=='visible') {
obj.visibility='hidden';
} else
obj.visibility='visible'
}

Only problem with it is that it takes two clicks to start working...
So then tryed doing this:


var start_trigger=null;
function test(what) {
var obj=document.getElementById(what).style;
if (start_trigger==null) { obj.visibility='visible'; start_trigger='1'; }
else
if (obj.visibility=='visible') { obj.visibility='hidden'; }
else { obj.visibility='visible'; }
}

It works fine but I would prefer to not use a var to store the first thing...

Any insight to why the first code dosen't work and a resolution to not using a var as a trigger in the second would be appreciated.

Thanks

mlse
08-16-2005, 12:23 AM
How about changing the logical test in your if slightly?

Something like:



function test(what)
{
var obj = document.getElementById(what).style;

if (obj.visibility != 'hidden') {
obj.visibility = 'hidden';
} else {
obj.visibility = 'visible';
}
}


I haven't tried it so it might not work ... I think it should though!

mlse
08-16-2005, 10:15 AM
Yes, it does work:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Flip-Flop</title>

<style type="text/css">
body {
text-align:center
}

div {
margin: 100px;
font-size:20px;
font-family:sans-serif
}
</style>

<script language="javascript" type="text/javascript">
function test(what)
{
var obj = document.getElementById(what).style;

if (obj.visibility != 'hidden') {
obj.visibility = 'hidden';
} else {
obj.visibility = 'visible';
}
}
</script>

</head>

<body>
<div onclick="test('flip-flop');">&gt;&gt; Click Me &lt;&lt;</div>

<div id="flip-flop">
This should appear and disappear
</div>

</body>
</html>

Kor
08-16-2005, 10:26 AM
the explanation is quite simple

the codition
if(obj.style.visibility=='visible')

woun't work unless there is a local written style within your tag
<div id="flip-flop" style="visibility:visible">
or you have previousely set the style visibility using dynamic on-the-fly DHTML methods.

attributes' values are not implicit in javascript. If an object is visible that not means by default that it has style visibility:visible... ;)

Kor
08-16-2005, 10:31 AM
in fact the condition should be

if(!obj.style.visibility||obj.style.visibility=='visible')

mooncricket11
08-16-2005, 07:27 PM
How about changing the logical test in your if slightly?

Something like:



if (obj.visibility != 'visible') {


I haven't tried it so it might not work ... I think it should though!

Hmm.. this seemed to work... but I feel like I've tried it before with no success... thankyou..

And I liked your explination Kor but the visibility is still set in a style sheet and not in the tag its self... If it were true mlse's example wouldent have worked for me...?

Thanks again for the help...

Kor
08-17-2005, 09:19 AM
And I liked your explination Kor but the visibility is still set in a style sheet and not in the tag its self...


No. It is not the same thing. If the CSS attribute is set in an embeded/external code, it is to be retreived in another way:

see also:
http://www.quirksmode.org/dom/getstyles.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum