dev.enekoalonso.com » safari 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 iPhone 3.0 geolocation with Javascript http://dev.enekoalonso.com/2009/06/30/iphone-3-0-geolocation-with-javascript/ http://dev.enekoalonso.com/2009/06/30/iphone-3-0-geolocation-with-javascript/#comments Tue, 30 Jun 2009 16:13:43 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=338 I was watching one of the video tutorials from Apple last night about some custom JS available on Safari, only on the iPhone 3.0, that let’s you interact with the phone and obtain data like the current location, etc.

So I built a little page to see how it works. I included Mootools 1.2.3 from Google servers and the Google Maps API. And voilá, with a few lines of code we have a totally functional web based GSP navigation system. A little bit ugly, but functional. Currenlty it only centers the map on the coordinates given by the phone, and also does a reverse geolocation to obtain the address (actually city, state and country). But it could be easily extended to add markers to the map, or even paths to track the movement.

If you have an iPhone (or an iPhone simulator) go to:
http://enekoalonso.com/research/iphone/geolocation.html

The source code:

  1. var Navigator = new Class({
  2.   initialize: function() {
  3.  
  4.     // Listen for position changes
  5.     this.watchId = navigator.geolocation.watchPosition(
  6.       function(position){ this.position(position) }.bind(this),
  7.       function() {},
  8.       { enableHighAccuracy: true, timeout: 1000, maximumAge: 10000 }
  9.     );
  10.     this.infoPanel = $('info');
  11.  
  12.     // Create the Geocoder and the Map
  13.     this.geocoder = new google.maps.Geocoder();
  14.     this.map = new google.maps.Map($('map'), {
  15.       zoom: 12,
  16.       mapTypeId: google.maps.MapTypeId.ROADMAP
  17.     });
  18.   },
  19.  
  20.   position: function(position) {
  21.     // Update labels
  22.     this.infoPanel.getElement('p.date').set('text', position.timestamp);
  23.     this.infoPanel.getElement('p.coords').set('text', position.coords.latitude + ', ' + position.coords.longitude);
  24.     this.infoPanel.getElement('p.altitude').set('text', position.coords.altitude);
  25.     this.infoPanel.getElement('p.heading').set('text', position.coords.heading);
  26.     this.infoPanel.getElement('p.speed').set('text', position.coords.speed);
  27.  
  28.     // Center map
  29.     var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  30.     this.map.set_center(latLng);
  31.  
  32.     // Reverse geolocation (get current address)
  33.     this.geocoder.geocode({'latLng': latLng},
  34.       function(results, status) {
  35.         if (google.maps.GeocoderStatus.OK) this.showAddress(results)
  36.       }.bind(this)
  37.     );
  38.   },
  39.  
  40.   showAddress: function(results) {
  41.     // console.dir(response);
  42.     if (results[1]) {
  43.       this.infoPanel.getElement('p.location').set('text', results[1].formatted_address);
  44.     }
  45.   }
  46. });
  47.  
  48. window.addEvent('load', function() {
  49.   new Navigator();
  50. });

Enjoy.

Related Posts:

]]> http://dev.enekoalonso.com/2009/06/30/iphone-3-0-geolocation-with-javascript/feed/ 1 Safari 4 rocks http://dev.enekoalonso.com/2009/03/01/safari-4-rocks/ http://dev.enekoalonso.com/2009/03/01/safari-4-rocks/#comments Sun, 01 Mar 2009 15:48:20 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=286 I’ve been using Safari both at home and work since last Thursday when I first knew it had been released and it looks very fast and solid. They have finally added some standard keyboard shortcuts, like Ctrl+Tab and now you can restore your previous session (all pages open) the next time you open the browser (although not automatically like Firefox).

It looks very good for web development too, since it has the Javascript console integrated and you can do direct changes on the DOM and the CSS to preview how it would look. But I think Firebug is still ahead and I’m very used to it, so I’m not ready to completely stop using Firefox.

I have nothing against Firefox, which has been my favorite browser for years, but the fact that it is very, very slow. I’ll say today is the slowest browser out there. Or at least it looks like that sometimes. The only extension I have is Firebug. I’ve tried removing the cache, the history, etc. with no luck.

So yeah, so far I’m very happy with Safari 4.

Safari 4

Related Posts:

]]> http://dev.enekoalonso.com/2009/03/01/safari-4-rocks/feed/ 1