Asset.css claims to have an onload event in Mootools documentation, but sadly, not all browsers support this feature. Even worse, browsers like Chrome seem to support the event, but never fire it.
After some research and testing at work, we have come up with a solution that overrides Asset.css to detect when CSS gets loaded by the browser using the onload event in those browsers that support it (Internet Explorer and Opera) and doing polling in those that do not (Chrome, Safari and Firefox). Here is the code:
-
// Add callback support to Asset.css for all browsers
-
Asset.css = function(source, onLoad) {
-
var link = new Element('link', {
-
rel: 'stylesheet',
-
media: 'screen',
-
type: 'text/css',
-
href: source
-
});
-
-
if (("onload" in link) && !Browser.Engines.webkit()) {
-
if (onLoad) link.onload = onLoad;
-
} else {
-
(function() {
-
try {
-
link.sheet.cssRules;
-
} catch (e) {
-
setTimeout(arguments.callee, 100);
-
return;
-
};
-
if (onLoad) onLoad();
-
})();
-
}
-
-
link.inject(document.head);
-
return link;
-
}
-
-
// Load some CSS and show an alert when done
-
var mycss = new Asset.css('http://example.com/style.css', function() {
-
alert('CSS loaded!');
-
});
-
-
// Unload the css
-
mycss.destroy();
Enjoy!
I’ve been using Firebug 1.5 since it was an alpha and now I’m using Firebug 1.6 alpha with Firefox 3.6. I’ve been also using Firecookie for a very long time now, but never realized about this: you can put breakpoints on cookies to detect changes!
Good to know :)
I love Firefox for web development. I have tried other browsers but nothing compares to the power of Firebug. For everything else I used to use Safari 4, but now I switched to Chrome. It is sooo fast.
Either way, don’t miss Firefox 3.6RC2 with Firebug 1.6a!
http://www.mozilla.com/en-US/firefox/3.6rc2/releasenotes/
http://getfirebug.com/releases/firebug/1.6X/
Sometimes you may want to include a Javascript file on a live web page to see how things will work or to try new things. Usually you would do this by editing the source code including the new file but there is a fastest way if you have Firefox with Firebug. Just run the following code in the Javascript console:
-
var headID = document.getElementsByTagName("head")[0];
-
var newScript = document.createElement('script');
-
newScript.type = 'text/javascript';
-
newScript.src = 'http://enekoalonso.com/lib/jquery-1.2.6.min.js';
-
headID.appendChild(newScript);
Here I am loading the jQuery library from my own server, but I could load any Javascript from any server on the net. The best is this will work on any website, whenever you have access to the server or not. Once you have the Javascript loaded you can use it right away. For example, here on this blog I could use jQuery to check how the header will look if its height was only 100px by running the next command on the console:
-
jQuery('#header').css('height',100);
Yep, it won’t look very good, right? Try it! You have to see it by yourself. Firefox is great. Firebug is awesome. And Firebug’s Javascript console is the best thing ever!
PS: In case you are wondering, the Javascript file injected will exist only on the current browser session.