dev.enekoalonso.com » firefox http://dev.enekoalonso.com having fun with code Sat, 31 Jul 2010 05:51:28 +0000 en hourly 1 Detecting when CSS gets loaded by the browser with Mootools and Asset.css http://dev.enekoalonso.com/2010/01/27/detecting-when-css-gets-loaded-by-the-browser-with-mootools-and-asset-css/ http://dev.enekoalonso.com/2010/01/27/detecting-when-css-gets-loaded-by-the-browser-with-mootools-and-asset-css/#comments Wed, 27 Jan 2010 19:20:22 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=416 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:

  1. // Add callback support to Asset.css for all browsers
  2. Asset.css = function(source, onLoad) {
  3.   var link = new Element('link', {
  4.     rel: 'stylesheet',
  5.     media: 'screen',
  6.     type: 'text/css',
  7.     href: source
  8.   });
  9.  
  10.   if (("onload" in link) && !Browser.Engines.webkit()) {
  11.     if (onLoad) link.onload = onLoad;
  12.   } else {
  13.     (function() {
  14.       try {
  15.         link.sheet.cssRules;
  16.       } catch (e) {
  17.         setTimeout(arguments.callee, 100);
  18.         return;
  19.       };
  20.       if (onLoad) onLoad();
  21.     })();
  22.   }
  23.  
  24.   link.inject(document.head);
  25.   return link;
  26. }
  27.  
  28. // Load some CSS and show an alert when done
  29. var mycss = new Asset.css('http://example.com/style.css', function() {
  30.   alert('CSS loaded!');
  31. });
  32.  
  33. // Unload the css
  34. mycss.destroy();

Enjoy!

Related Posts:

]]> http://dev.enekoalonso.com/2010/01/27/detecting-when-css-gets-loaded-by-the-browser-with-mootools-and-asset-css/feed/ 0 Debugging cookies with Firebug 1.5/1.6 http://dev.enekoalonso.com/2010/01/20/debugging-cookies-with-firebug-1-51-6/ http://dev.enekoalonso.com/2010/01/20/debugging-cookies-with-firebug-1-51-6/#comments Thu, 21 Jan 2010 04:43:09 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=412 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 :)

Related Posts:

]]> http://dev.enekoalonso.com/2010/01/20/debugging-cookies-with-firebug-1-51-6/feed/ 0 Firefox 3.6RC2 & Firebug 1.6a http://dev.enekoalonso.com/2010/01/19/firefox-3-6rc2-firebug-1-6a/ http://dev.enekoalonso.com/2010/01/19/firefox-3-6rc2-firebug-1-6a/#comments Tue, 19 Jan 2010 15:52:50 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=410 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/

Related Posts:

]]> http://dev.enekoalonso.com/2010/01/19/firefox-3-6rc2-firebug-1-6a/feed/ 0 Injecting javascript with Firebug http://dev.enekoalonso.com/2008/11/30/injecting-javascript-with-firebug/ http://dev.enekoalonso.com/2008/11/30/injecting-javascript-with-firebug/#comments Mon, 01 Dec 2008 05:29:22 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=64 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:

  1. var headID = document.getElementsByTagName("head")[0];
  2. var newScript = document.createElement('script');
  3. newScript.type = 'text/javascript';
  4. newScript.src = 'http://enekoalonso.com/lib/jquery-1.2.6.min.js';
  5. 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:

  1. 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.

Related Posts:

]]> http://dev.enekoalonso.com/2008/11/30/injecting-javascript-with-firebug/feed/ 0