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.

2010-07-03

Unlock autocomplete=off forms (bookmarklet)

Here it is, my own implementation of a cross browser unlocker to allow you to autocomplete forms and inputs that have the attribute:
autocomplete=off

Just add the following link as bookmark and click on that bookmark when you are in a page with a "unautocompletable" elements:

If you are annoyed by the message informing you about how many elements where successfully unlocked you can use this other bookmark (same stuff, without alert message);

Soon I'll post an example video for those of you that what a clearer example of what this little bookmarklet does.

If you find any bug or you find it useful and want me to know, please comment this post.