ansaurus

Question

Answer 1

+3 A:

if you really want to hide something use

document.getElementById("MyDiv").style.display = "none";

Christian Smorra 2010-08-02 13:58:07

Nope still does not work, maybe because I am trying to hide it inside the HEAD tag?

Etienne 2010-08-02 13:59:46

so i guess you have written the code to execute in head tag before loading body tag. so make sure your body loads completely by writing the same code at the end of body tag

KoolKabin 2010-08-02 15:02:28

@Etienne: When you try to do something from the <head> tag, most of the time, the script runs even before the target element is rendered. This causes the script to cause no effect. Make sure you run it after the rendering is done. If you look at the code I wrote above, it works fine. This is so because, I call it after the target element is rendered.

Kangkan 2010-08-02 17:59:40

Answer 2

+4 A:

The code you provided works fine. There must be something else interfering. Test: http://jsbin.com/ilofi

Remember that document.getElementById("MyDiv") returns undefined if the element hasn't been loaded yet. Thus, document.getElementById("MyDiv") is undefined in the following case:

<script type="text/javascript">
alert(document.getElementById("MyDiv"));
</script>

<div id="MyDiv"></div>

But it's the element in the following case:

<div id="MyDiv"></div>

<script type="text/javascript">
alert(document.getElementById("MyDiv"));
</script>

Put scripts as close to the bottom of the page as possible for both this reason and for performance reasons.

strager 2010-08-02 14:00:45

Answer 3

A:

I tested with the following HTML:

<body>
<div id="MyDiv">
    <div class="fa_close"><a href="#" onclick="hFa()"><img src="fadead/close1.jpg" /></a></div>
    <h1><i>THIS WEEK'S</i></h1>
    <img src="fadead/special.jpg" alt="special" />
</div>
<input type="button" onClick="document.getElementById('MyDiv').style.visibility = 'hidden'; "/>
</body>

and it is working perfectly on my FF and IE8.

What is the browser you are using? Have you tried debugging?

Kangkan 2010-08-02 14:02:00

Answer 4

+1 A:

Why not give it a style with display:none? Since this JavaScript is running in the HEAD, you clearly intend to have it be the starting condition of the DIV, but I can't think of a good reason to do it with JS instead of good old HTML and CSS.

Adam Crossland 2010-08-02 14:02:18

Answer 5

+4 A:

You must make sure that your code runs after the browser has actually seen your markup. If you're trying to hide the element from a <script> block in the <head>, then the browser will not have seen the element yet so it won't find it.

Move your <script> block to the very end of the <body> and see what happens!

Pointy 2010-08-02 14:02:34

Answer 6

A:

you can always can try to use a framework like mootools or jquery this could help you a lot doing works like a lot more simple

mootools $("MyDiv").setStyle('display','none'); Demos: http://demos.mootools.net/

JQuery: $("#MyDiv").hide(); Demo http://api.jquery.com/hide/

if you want to view more http://www.ajaxrain.com

ErVeY 2010-08-02 14:12:45

ansaurus

tags:

views:

answers:

Can't hide my DIV with JavaScript

related questions