Menu
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.
311
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 = "";
}
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>
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
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
