Tutorial :Hide span (or div) until javascript completes



Question:

I'm using the Unit PNG Fix (http://labs.unitinteractive.com/unitpngfix.php) to make a transparent png work in IE. It's being used on the background image of my logo container.

So I have my html, which contains these relative items. In the head:

<!--[if lt IE 7]>          <script src="/assets/script_unitpngfix.js" type="text/javascript"></script>  <![endif]-->  

Then in the body:

<a href="index.html" style="display:block;"><span id="Logo"></span></a>  

Since, the logo loads with a gray box around it before the Unit PNG Fix works its magic, how can I just hide the entire span until after the javascript is executed, so the user never sees the gray box?

Thank you.


Solution:1

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 = "";  }  


Solution:2

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>  


Solution:3

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


Solution:4

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »