ansaurus

Question

Hide span (or div) until javascript completes

Answer 1

+1 A:

Keep the span hidden by default:

<span id="Logo" style="display:none;"></span>

Then add a piece of JavaScript to show it later:

document.getElementById('Logo').style.display = 'inline';

The best way to ensure (at least in IE) that this piece of code is executed after the PNG Fix is to put it in a separate JS file and load it as a deferred script at the end of your page:

<script type="text/javascript" src="show_span.js" defer="defer"></script>

More details on deferred scripts: JavaScript: Defer Execution

casablanca 2010-07-05 17:17:50

better document.getElementById('Logo').style.display = ''; to revert the display property to the css default value.

Eineki 2010-07-05 17:25:43

The **WORST** place to put the command is in the PNG Fix. You don't have to mix library and implementation code.

Eineki 2010-07-05 17:29:46

If you don't, you have no idea when PNG Fix has done its job, so you might end up with a gray box again.

casablanca 2010-07-05 17:30:39

I can't put in the javascript because it's only being called for IE, so the logo would never show in any other browser.

Beau 2010-07-05 17:37:09

Isn't that a reason to use something like jQuery's ready function (or similar in another framework), which isn't equivalent to onload?

Bruno 2010-07-05 17:37:17

These all seem like good answers, but the logo only loads about a quarter of the way with them before getting cut off.

Beau 2010-07-05 17:58:21

I overlooked the conditional script part. A deferred script might help you here - I've updated the answer to include that.

casablanca 2010-07-05 18:16:25

Thanks everyone. Like I said, there's some weird glitch that's causing only the top part of the logo to show when using any of these solutions. So I think I'll just tolerate the gray box.

Beau 2010-07-05 19:13:23

Upon further tinkering, I just had to include the height of the logo container to keep the image from getting cut off at the seemingly arbitrary point. So even though I had defined the height in the css, I had to add to the javascript the following:document.getElementById('Logo').style.height = '92';But I'll try uploading it to my site to see how it works. Thanks again.

Beau 2010-07-05 19:28:58

Answer 2

A:

I would go by using jquery, or other js framework and then using casablanca's solution in a 'document.ready' or something like it.

It's never healthy to trust browser's loading time/order.

Rodrigo Gama 2010-07-05 17:21:15

Answer 3

+2 A:

Instead of your current span put this:

<span id='Logo'
        style="display:none"></span>

And then attach this function to the body onload event (<body onload = "showMySpan()">):

function showMySpan() {
var mySpan = document.getElementById('Logo');
mySpan.style.display = "";
}

draganstankovic 2010-07-05 17:21:26

better mySpan.style.display = ''; to revert the display property to the css default value.

Eineki 2010-07-05 17:26:06

I agree. At first I've written it like this but edited it before posting. Now I will edit again. :)

draganstankovic 2010-07-05 17:31:43

Answer 4

A:

You could use something like jQuery and its ready function, which is specifically designed to wait for the DOM to be loaded.

The HTML would use display:none to start with :

<span id="Logo" style="display:none;"></span>

Then, add a script like this (assuming you've linked to jQuery too):

<script>
  $(document).ready(function () {
    $("#Logo").show();
  });
</script>

Bruno 2010-07-05 17:23:03

ansaurus

tags:

views:

answers:

Hide span (or div) until javascript completes

related questions