Hiding the contents of DIV

Question

I have a DIV with a script as shown below

<div style="text-align:center">
                <script type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/t/a?url=www.mysite.com'&gt;&lt;/script&gt;
</div>

What I want is that the users should not be able to see this div on the site, but the script should be executed as in the normal way. Please suggest!

Answer 1

I am not sure what it is you are including with that Javascript call, but if you want to hide the contents of this DIV just add this to the style declaration: display: none;

Check out the CSS display documentation.

EDIT: The SCRIPT inside the DIV tag will still get loaded, which I believe is the desired effect.

Answer 2

Just change your style to

<div style="text-align:center; display: none;">
                <script type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/t/a?url=www.mysite.com'&gt;&lt;/script&gt;
</div>

Answer 3

When you want to make an element hidden from the user, set the css proper "display: none;"

Answer 4

You have to style your div with this code:

<div style="text-align:center; display: none; visibility: hidden;">
  <!-- other code -->
</div>

This is the way the mozilla team works, if I remember well.

Answer 5

If the JavaScript generates html code that you don't want to be visible you can write some specific styles to make these auto generated elements hidden without making your outer div hidden. Eg if the JavaScript generates a div and fills it with content then you could do something like this:

The HTML:

div id="hideinside">
                <script type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/t/a?url=www.mysite.com'&gt;&lt;/script&gt;
</div>

The CSS:

#hideinside div {
    display:none; /* hides all divs inside your outer div */
}

Answer 6

Give your div a meaningful name.

<div class="hidden">
</div>

The in the CSS add the

.hidden {
    display: none;
}

Answer 7

div.hidden {
   position: absolute;
   left: 10000px;
}