How to hide a block of a web page with DIV

[dreaming of nascar]

I tried finding information about the visibility and can not get it to work. This is how I have my page...

<SCRIPT>
if(variable == 0){
document.write("<DIV STYLE='visibility:hidden; position:absolute;'>");
}

else{
document.write("<DIV STYLE='visibility:visible; position:absolute;'>");
}
</SCRIPT>

Lines of code that will be affected

</DIV>

The Lines of code that will be affected is always visible whether or not variable is equal to 0 or not. Does anyone know what is wrong with this code? I did make sure that the correct if statement was executing and that is working fine. I have not worked too much with <DIV> so I imagine that it is there somewhere. Thanks in advance!

D O N

[nuts_spices]

Hi,

There doesnt seem to be any problem with your code it works fine. I tried making variable=0 and its works. Try This

<SCRIPT>
variable = 0
if(variable == 0){
document.write("<DIV STYLE='visibility:hidden; position:absolute;'>");
}

else{
document.write("<DIV STYLE='visibility:visible; position:absolute;'>");
}
</SCRIPT>

Lines of code that will be affected

</DIV>

Then try making variable = 1

Your div tag is perfect.

anyways i guess why you were having a problem was that you werent asigning the variable any value.

If this is not what you want, could you please explain the whole situation like when do you want the div to be hidden that way it will be clearer. Like i need to know when "variable = 0".

Neetu

[Birdman]

I believe the problem lies in how you are passing the variable to the script. Apparently, the var is not passed because it always returns the "else" result, meaning that var didn't equal 0 OR DIDN'T EXIST. Try judt writing the var to the page.

[ShawnR]

Not that this is the problem, but this is the way I'd go:

<div id="my_div">
Lines of code that will be affected
</div>

<script type="text/javascript">
my_div = document.getElementById('my_div');
if(variable == 0){
my_div.style.visibility = "hidden";
} else {
my_div.style.visibility = "visible";
}
</script>

[ShawnR]

What was I thinking...

<div id="my_div">
Lines of code that will be affected
</div>
<script type="text/javascript">
my_div = document.getElementById('my_div');
my_div.style.visibility = variable == 0? "hidden" : "visible";
</script>

(It won't validate if the start tag gets written from within a bit of script and the end tag is hard-coded.)

[nuts_spices]

Hi,

Two problems:
1. This will not work getelementbyid. it doesnt work that way.
2.Where are you asgining the "variable". That means under what conditions do you want it to be zero and when are you asgining it to zero.

If could could give us the whole scenario as to what you want to do it will be easier.Just explain as to when you want to hide it and what should the conditions be.

[ShawnR]

"... This will not work getelementbyid. it doesnt work that way ...

Nothing wrong with the 'getElelmentById' as far as I can see. Should work fine on Netscape/Mozilla 6 Netscape/Mozilla 7, Opera 6 Opera 7, etc. You are right, though, that due to a bug in MS IE relating to variable scope, it won't work properly in IE. So, to make IE happy, and still work in the others, the following is better:

<div id="my_div">
Lines of code that will be affected
</div>

<script type="text/javascript">
var my_div = document.getElementById('my_div');
my_div.style.visibility = variable == 0? "hidden" : "visible";
</script>

I agree that the problem is related to how the variable is being set. That is what was meant by:

nuts_spices: "... i need to know when "variable = 0" ..."
Birdman: "... I believe the problem lies in how you are passing the variable to the script ..."
ShawnR: "... Not that this is the problem, but ..."

Shawn

[figment88]

I would guess that the problem has to do with variable scope. Make sure you declare the variable outside of all functions, so it will be global to every function.

[nuts_spices]

Ok i understood now what you are trying to do..

well this line

my_div.style.visibility=variable == 0? "hidden" : "visible";

You are first asgning the value ok my_div.style.visibility to "variable" but That is always 1 as it is visisble thats the reason why the else part works all the time.

anyways i still think this want work.

i have something in my mind but have to go now i'll try that out and if it works will post it..:)

[ShawnR]

Hi nuts_spices

I agree with you that 'variable' needs to be set correctly before the code is encountered. However, the rest of your post is not correct.

my_div.style.visibility=variable == 0? "hidden" : "visible";

is the same as:

my_div.style.visibility = (variable == 0? "hidden" : "visible");

The code

variable == 0? "hidden" : "visible"

is equivalent to:

{
___if (variable == 0) {
______return "hidden";
___} else {
______return "visible";
___}
}

so the line you are querying is equivalent to:

if (variable == 0) {
___my_div.style.visibility = "hidden";
} else {
___my_div.style.visibility = "visible";
}

It works. Normally I don't bother to actually go out and test snippets of code that I post, if the point of the post is just a helpful hint that I am 100% confident of. However, in this case your posts inspired me to a quick test. The result: It works exactly as it should, and as I indicated in a previous post, it works in NN 6, NN7, Moz, Opera 6, Opera 7 , IE 6. Didn't bother to test in others, but other than browsers which don't support DOM, such as NN4.7, this will work fine. I probably won't convince you, but for what it is worth: it is also good style!

The reason I recommend this method over the method in msg#2 is that the code in msg#2 won't validate. Furthermore, with the code in msg#2, browsers which don't have javascript or don't have it turned on (including Search engines) will see this:

Lines of code that will be affected

</DIV>

instead of

<div>
Lines of code that will be affected
</div>

To find out more about the "Conditional Operator" (LogicalORExpression? AssignmentExpression : AssignmentExpression), you can have a look at the ECMAScript Language Specification, downloadable from ftp.ecma.ch amongst other places. It is a fairly advanced specification to understand if you are new to javascript or programming, so an alternative slightly more accesible specification is at:
[devedge.netscape.com...]
or one of the many online introductory Javscript tutorials such as at webmonkey.

Before you post for the third time saying that you don't think it will work, just test it. Will save us all a bit of time.