Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Posts Tagged “helper”

• Quick jQuery Browser Detection Snippet

  Thursday, July 16th, 2009

  Update: I’ve added a little example below…

  As most of you know there lurks browsers that we don’t really like building web sites for (*cough* Internet Explorer) and there comes a time in any developers work when they need to detect browsers. jQuery has a really nice API for detecting browsers, but sometimes you want to go a bit further.

  The snippet I’m putting on this page will detect the browser and OS for you and add a nice little CSS class to the body tag, thus allowing you to write up all your CSS ready for users of different browser and OS creed.

  Here it is:

  function detectBrowsers()
  {
      if ( $.browser.msie )
      {
          if ( $.browser.version == '8.0' )
          {
              $('body').addClass( 'ie8' );
          }
          else if ( $.browser.version == '7.0' )
          {
              $('body').addClass( 'ie7' );
          }
          else
          {
              $('body').addClass( 'ie6' );
          }
      }
  
      if ( $.browser.safari )
      {
          if ( navigator.userAgent.indexOf( 'Safari' ) != -1 )
          {
              $('body').addClass( 'safari' );
          }
          else
          {
              $('body').addClass( 'chrome' );
          }
      }
  
      if ( $.browser.mozilla )
      {
          if ( $.browser.version.substr( 0, 3 ) == '1.9' )
          {
              $('body').addClass( 'ff3' );
          }
          else
          {
              $('body').addClass( 'ff2' );
          }
      }
  
      if ( navigator.userAgent.indexOf( 'Windows' ) != -1 )
      {
          $('body').addClass( 'windows' );
      }
      else if ( navigator.userAgent.indexOf( 'Mac' ) != -1 )
      {
          $('body').addClass( 'mac' );
      }
  }

  And how would you use it? Well I’d suggest something like this:

  function ready()
  {
      detectBrowsers();
  }
  
  function detectBrowsers()
  {
      ...
  }
  
  $(document).ready( ready );

  Now you may be thinking “what about Linux?”. Well our good friends who use Linux tend to use FireFox 2/3, and that’s good, so they’re good, therefore I don’t really need to check for them.

  Here’s a little example for you to mull over:

  Tell me what you think.

  Tags: browser ~ detection ~ helper ~ JavaScript ~ jquery ~ script ~ snippet
  Posted in CSS ~ Development ~ JavaScript

  ---

• Speeding Up PureMVC Development, Part 1: The View

  Monday, June 29th, 2009

  After my tutorial on using and understanding PureMVC, I got around to write some classes that extended some of the core classes of PureMVC.

  The main thing that got to me was the repetition of functions such as functions that send events from a view to the mediator and so on. I think it’s just much better if you can get away with creating a nice set of classes that extend the core and allow you to code that much better, so here they are:

  Extending the View

  The view is very important, without it, there wouldn’t be a UI! The main thing that got me about PureMVC’s views was that they needed to bubble events up to their mediators, it meant that each view needed a function like this:

  public function sendEvent(eventName:String, body:Object=null):void
  {
      dispatchEvent( new SpriteEvent( eventName, body, true ) );
  }

  It just seemed a shame to have something like that repeated in each view, so I created an extension to the “Sprite” class that’s perfect for PureMVC, here it is:

  package com.firestartermedia.lib.puremvc.display
  {
      import com.firestartermedia.lib.puremvc.events.SpriteEvent;
     
      import flash.display.Sprite;
  
      public class Sprite extends flash.display.Sprite
      {
          public var registered:Boolean                           = false;   
          public var ready:Boolean                                = false;
          public var tweenResize:Boolean                          = false;
         
          public function sendEvent(eventName:String, body:Object=null):void
          {
              dispatchEvent( new SpriteEvent( eventName, body, true ) );
          }
         
          public function sendReady(eventName:String):void
          {
              ready = true;
             
              sendEvent( eventName );
          }
         
          public function handleResize(e:Object):void
          {
             
          }  
      }
  }

  As you can see that the “sendEvent()” function is all there for you. There’s also other functions call “sendReady()” and “handleResize()”, you can use “sendReady()” to tell your mediator that the view has finished creating itself and is now ready for some commands, and the “handleResize()” function kind of teaches you to standardise your naming convention for resizing functions in your views and also sets you up to make sure that you write resizing commands.

  There are also a few public functions: “registered”, “ready” and “tweenResize”. I use “registered” to check if the view has been created, therefore in the view’s constructor I set “registered = true”. The “ready” variable is a nice way for your mediator to check if your view is ready, if not, it can just defer calls ’til it is. And “tweenResize”, another one for me, allows my mediator to check if the resizing function needs to call a tween or not. Quite simple and very helpful!

  Tell me what you think, if you find it useful! More to follow too!

  Tags: class ~ extend ~ free ~ helper ~ mvc ~ puremvc ~ sprite
  Posted in Actionscript 3 ~ APIs ~ Development

  ---