Translator

2010-07-24

Tweetmeme iframe with transparent background

I had to add Tweetmeme button to Aviso Oportuno so that any ad could be promoted thru twitter.


As always, I had problems with IE to display that button correctly using W3C standards. In this particular case I needed the iFrame of the button to be transparent.


Unfortunately Tweetmeme itself is not helping making things easier, but after searching on Google, I found out that IE requires an extra attribute to allow an iFrame to display transparent content: allowTransparency.


The Tweetmeme button is generated by a JavaScript code, so I can't actually hard-code that attribute in the iFrame generated, so the solution is to have another JavaScript piece of code that adds the needed attribute after page loading.


To avoid too many explanations, you could simply grab this piece of code and past within the <head></head> tags in your html page:

<!--[if IE]>
<script type="text/javascript">
var previousOnload = window.onload;
window.onload = function() {
var theframes = document.getElementsByTagName('iframe');
for(var i = 0; i < theframes.length; i++) {
theframes[i].setAttribute("allowTransparency","true");
}
setTimeout("if(previousOnload) previousOnload();", 1000);
}
</script>
<![endif]-->

The "previousOnload" stuff it is there to avoid overwriting any other onload function previously declared. In fact, if there is one, it is executed one second (1k miliseconds) after this "iFrame hack".


One last tip: allowTransparency literally allows the iFrame to display transparent content, but doesn't make the content transparent if it is declared to be opaque. This means that the background color of the html and body tags in the iframed page, must be declared as transparent (or at least you should not declare any backgrounds for those elements, so it will be defaulted as transparent).


Hope it helps.

Nessun commento:

Posta un commento