Incoherent Babble http://blog.stchur.com usually about Javascript, but I don't discriminate Sat, 07 Mar 2009 06:00:16 +0000 http://wordpress.org/?v=2.6.5 en Fetch (a stand-alone CSS querying engine) http://blog.stchur.com/2009/03/06/fetch-a-stand-alone-css-querying-engine/ http://blog.stchur.com/2009/03/06/fetch-a-stand-alone-css-querying-engine/#comments Sat, 07 Mar 2009 06:00:16 +0000 sstchur http://blog.stchur.com/?p=124 I've started work on a new side-project called Fetch. It's a stand-alone CSS querying engine, designed to be super lightweight and offer high performance across all modern browsers.

It's still very much in development and the source is a bit sloppy, but it currently weighs in at only 2.5k compressed and gzipped and (in Firefox3) either outperforms or is on par with all other major Javascript libraries out there*.

It's definitely not ready for production use, but when it is, it will become the new CSS querying engine for Gimme and will also be available as a stand-alone library, which will be extensible (so you can add your own rules) and which will also be guaranteed to play nicely with other libraries by not adding to the prototype of any native objects and only introducing one single global variable (fetch).

For anyone interested, the current (i.e. sloppy) source is available on CodePlex: fetch.js.

As I said, it's not ready for prime time and the code is sloppy (and probably buggy). Consider yourself warned.

* Fetch was not compared with libraries that use XPath or querySelectorAll, because it uses neither, but rather is a pure Javascript implementation. Upon release, it will take advantage of querySelectorAll where appropriate, but will not use XPath.

]]> http://blog.stchur.com/2009/03/06/fetch-a-stand-alone-css-querying-engine/feed/ My New Blog http://blog.stchur.com/2008/11/07/my-new-blog/ http://blog.stchur.com/2008/11/07/my-new-blog/#comments Fri, 07 Nov 2008 20:12:47 +0000 sstchur http://blog.stchur.com/2008/11/07/my-new-blog/ This blog is mostly technical. I do, from time to time, post about non-technical things, but I try to keep this blog more or less about programming, the web, and javascript.

But I'm a loud-mouth and I have lots to say. So rather than clutter up this blog with "too much" incoherent babble, I decided to start another.

My new blog is called Stchur on Whatever (http://whatever.stchur.com) and on it, I'll write about whatever the heck I feel like.

So please check it out.

]]> http://blog.stchur.com/2008/11/07/my-new-blog/feed/ Hello Old Friend http://blog.stchur.com/2008/10/10/hello-old-friend/ http://blog.stchur.com/2008/10/10/hello-old-friend/#comments Fri, 10 Oct 2008 12:59:13 +0000 sstchur http://blog.stchur.com/2008/10/10/hello-old-friend/ More evidence that I was right when I wrote this post.

Won't be long now IE6...

]]> http://blog.stchur.com/2008/10/10/hello-old-friend/feed/ The Ultimate addEvent(..) function http://blog.stchur.com/2008/09/25/the-ultimate-addevent-function/ http://blog.stchur.com/2008/09/25/the-ultimate-addevent-function/#comments Thu, 25 Sep 2008 18:32:17 +0000 sstchur http://blog.stchur.com/2008/09/25/the-ultimate-addevent-function/ Two articles in particular that I've written on this blog have garnered a lot of positive feedback.

  1. Fixing IE's attachEvent Failures
  2. mouseenter and mouseleave Events for Firefox (and other Non-IE Browsers)

As time has gone on, I've seen mention of these articles pop up in programming forums here and there, and they still receive comments from time to time, which lets me know that people are still getting something out of them.

Unfortunately, the code in them is a tad dated. I've learned more and improved my code since I originally wrote them, and while these improvements have made their way into my Javascript Library, I know that the majority of people are just grabbing the code directly from the blog entries.

So I've decided to post an update: a sort of fusion between these two blog entries which offers functionality for addressing all of the issues discussed in the aforementioned entries (and then some).

I consider this new function the "Ultimate addEvent Function" because I really believe it addresses the large majority of cross-browser issues that people face when dealing with events in Javascript. And furthermore, this function goes beyond anything that any other Javascript library provides (at least as far as I know).

So without further ado, I offer to you:

sstchur's Ultimate addEvent(..) function!

var xb = {};
(function()
{
   var GUIDCounter = 0;
   var evtHash = {};
   var pseudoEvents =
   {
      'mouseenter': function(_fn, _useCapture, _listening)
      {
         var f = mouseEnter(_fn);
         _listening ?
            xb.addEvent(this, 'mouseover', f, _useCapture, false) :
            xb.removeEvent(this, 'mouseover', f, _useCapture, false);
         f = null;      
      },
      
      'mouseleave': function(_fn, _useCapture, _listening)
      {
         var f = mouseEnter(_fn);
         _listening ?
            xb.addEvent(this, 'mouseout', f, _useCapture, false) :
            xb.removeEvent(this, 'mouseout', f, _useCapture, false);
         f = null;      
      }
   };
   
   xb.Helper =
   {
      getObjectGUID: getObjectGUID,
      storeHandler: storeHandler,
      retrieveHandler: retrieveHandler,
      isAnAncestorOf: isAnAncestorOf,
      mouseEnter: mouseEnter
   }; 
   
   xb.addEvent = function()
   {
      if (typeof document.addEventListener !== 'undefined')
      {
         return w3c_addEvent;
      }
      else if (typeof document.attachEvent !== 'undefined')
      {
         return ie_addEvent;
      }
      else
      {
         // no modern event support I guess :-(
         // (you could use DOM 0 here if you really wanted to)
         return function() {};
      }
      
      function w3c_addEvent(_elem, _evtName, _fn, _useCapture, _directCall)
      {
         var eventFn = pseudoEvents[_evtName];
                  
         if (typeof eventFn === 'function' && _directCall !== false)
         {
            eventFn.call(_elem, _fn, _useCapture, true);
         }
         else
         {
            _elem.addEventListener(_evtName, _fn, _useCapture);
         }
      }
      
      function ie_addEvent(_elem, _evtName, _fn, _useCapture, _directCall)
      {
         var eventFn = pseudoEvents[_evtName];
               
         if (typeof eventFn === 'function' && _directCall !== false)
         {
            eventFn.call(_elem, _fn, _useCapture, true);
         }
         else
         {
            // create a key to identify this element/event/function combination
            var key = generateHandlerKey(_elem, _evtName, _fn);
            
            // if this element/event/combo has already been wired up, just return
            var f = evtHash[key];
            if (typeof f !== 'undefined')
            {
               return;
            }
            
            // create a helper function to fix IE's lack of standards support
            f = function(e)
            {
               // map .target to .srcElement
               e.target = e.srcElement;
               
               // map .relatedTarget to either .toElement or .fromElement
               if (_evtName == 'mouseover') { e.relatedTarget = e.fromElement; }
               else if (_evtName == 'mouseout') { e.relatedTarget = e.toElement; }
                  
               e.preventDefault = function() { e.returnValue = false; };
               e.stopPropagation = function() { e.cancelBubble = true; };

               // call the actual function, using entity (the element) as the 'this' object
               _fn.call(_elem, e);
               
               // null out these properties to prevent memory leaks
               e.target = null;
               e.relatedTarget = null;
               e.preventDefault = null;
               e.stopPropagation = null;
               e = null;
            };
            
            // add the helper function to the event hash
            evtHash[key] = f;

            // hook up the event (IE style)
            _elem.attachEvent('on' + _evtName, f);
            
            key = null;
            f = null;
         }
      }
   }();

   xb.defineEvent = function(_evtName, _logicFn)
   {
      pseudoEvents[_evtName] = _logicFn;
   };

   
   // Helper Functions
   function storeHandler(_key, _handler)
   {
      evtHash[_key] = _handler;
   }
   
   function retrieveHandler(_key)
   {
      return evtHash[_key];
   }
   
   function generateHandlerKey(_elem, _evtName, _handler)
   {
      return '{' + getObjectGUID(_elem) + '/' + _evtName + '/' + getObjectGUID(_handler) + '}'; 
   }
   
   function isAnAncestorOf(_ancestor, _descendant, _generation)
   {
      if (_ancestor === _descendant) { return false; }
      
      var gen = 0;
      while (_descendant && _descendant != _ancestor)
      {
         gen++;
         _descendant = _descendant.parentNode;
      }
      
      _generation = _generation || gen;
      return _descendant === _ancestor && _generation === gen;    
   }
   
   function mouseEnter(_fn)
   { 
      var key = xb.Helper.getObjectGUID(_fn);
      var f = evtHash[key];
      if (typeof f === 'undefined')
      {
         f = evtHash[key] = function(_evt)
         {
            var relTarget = _evt.relatedTarget;
            if (this === relTarget || isAnAncestorOf(this, relTarget)) { return; }
      
            _fn.call(this, _evt);
         };
      }
      return f;   
   }
   
   function getObjectGUID(_elem)
   {
      if (_elem === window)
      {
         return 'theWindow';
      }
      else if (_elem === document)
      {
         return 'theDocument';
      }
      else if (typeof _elem.uniqueID !== 'undefined')
      {
         return _elem.uniqueID;
      }

      var ex = '__$$GUID$$__';
      if (typeof _elem[ex] === 'undefined')
      {
         _elem[ex] = ex + GUIDCounter++;
      }
      return _elem[ex];
   }

})();
 

The code above, as is, won't work "out of the box" because (for the sake of brevity) I have not included the xb.removeEvent(..) function. Fear not however. There will be a link to a download of the full source code, complete with both xb.addEvent(..) and xb.removeEvent(..) at the end of this post.

Commentary

So some of you may be wondering: "Why another addEvent function. Haven't we been through this?" We have, but I think you'll find that this version does more than any other addEvent function you've seen. For example:

  • Works in all browsers that matter
  • Ensures one event wire up for any given element/event/handler combination (this is mostly for IE)
  • Forces IE to honor the this keyword from within event handler functions
  • Normalizes the wire up mechanism in all browsers (no need to include the "on" prefix for IE)
  • Forces IE to recognize the following properties/methods on event objects: .stopPropagation(), .preventDefault(), .target, .relatedTarget
  • Enhances Non-IE browsers to support mouseenter and mouseleave events
  • Provides an extension mechanism so developers can write their own custom events that plug right in ('mousewheel' or 'DOMContentReady' for example)

Given all that the Ultimate addEvent function does, it's not surprising that it has a bit of length to it. But it isn't super long, and I think it's well worth it.

Usage

Using the function(s) is just as easy as you'd expect:

var myDiv = document.getElementById('myDiv');
xb.addEvent(myDiv, 'click', clickHandler);

function clickHandler(e)

{
   alert('The this keywords works (even in IE!): ' + this.id);
}

Extending Functionality

Since I mentioned that it was possible to extend the Ultimate addEvent function with custom events that plug right in, I figure I'd better offer an example. Actually, there already is an example built right into it. Both the mouseenter and mouseleave events utilize the extension mechanism internally, but for demonstration purposes, let's go ahead and add a mousewheel event:

// Extend the Ultimate addEvent function to recognize a "mousewheel" event
xb.defineEvent('mousewheel', function(_fn, _useCapture, _listening)
{
   // event name for IE, Opera and Safari
   var evtName = 'mousewheel';

   // hander for IE, Opera, and Safari
   var f = _fn;
   
   // if we're dealing with a Gecko browser, the event name
   // and handler need some adjustment
   var ua = navigator.userAgent.toLowerCase();
   if (ua.indexOf('khtml') === -1 && ua.indexOf('gecko') !== -1)
   {
      evtName = 'DOMMouseScroll';
      f = mouseWheel(_fn);
   }

   // _listening represents whether this is an event attachment or detachment
   // that 5th parameter?  Don't worry about it; just always use false
   _listening ? xb.addEvent(this, evtName, f, _useCapture, false) : xb.removeEvent(this, evtName, f, _useCapture, false);
});

// Helper function for dealing with mousewheel in Gecko browsers
function mouseWheel(_fn)
{
   var key = xb.Helper.getObjectGUID(_fn);
   var f = xb.Helper.retrieveHandler(key);
   if (typeof f === 'undefined')
   {
      f = function(_evt)
      {
         _evt.wheelDelta = -(_evt.detail);
         _fn.call(this, _evt);
         _evt.wheelDelta = null;
      };
      xb.Helper.storeHandler(key, f);
   }
   return f;
}

I'm glossing over some details here because I don't want this post to get bogged down in something that it isn't really about, but I trust you get the idea.

Most of this code actually comes from the The Gimme Javascript Library. If you're using Gimme in any of your web pages, you already have all of this functionality for free. The syntax is a touch different, but all the capabilities are the same.

And if you happen to be the author of a Live Maps Mashup, you already have Gimme, as the latest version shipped with the most recent Virtual Earth MapControl.

Complete Source

As promised, here is the complete source, including both xb.addEvent(..) and xb.removeEvent(..)

Enjoy! And please don't hesitate to send your feedback, both good and bad (I'm very willing to address issues or try to make requested enhancements).

]]> http://blog.stchur.com/2008/09/25/the-ultimate-addevent-function/feed/ Microsoft Releases New Version of Live Maps http://blog.stchur.com/2008/09/24/microsoft-releases-new-version-of-live-maps/ http://blog.stchur.com/2008/09/24/microsoft-releases-new-version-of-live-maps/#comments Thu, 25 Sep 2008 02:40:34 +0000 sstchur http://blog.stchur.com/2008/09/24/microsoft-releases-new-version-of-live-maps/ Microsoft released a new version of Live Maps today. This version features multi-way point routing as well as a number of other nice little updates.

Another cool thing about this release is that it features Gimme quite prominently. After getting directions, you'll notice the ability to expand/collapse the directions specific to each point along the route. That nice, smooth animation you see is Gimme doing what Gimme does best!

]]> http://blog.stchur.com/2008/09/24/microsoft-releases-new-version-of-live-maps/feed/ Screw you, financially responsible Americans http://blog.stchur.com/2008/07/26/screw-you-financially-responsible-americans/ http://blog.stchur.com/2008/07/26/screw-you-financially-responsible-americans/#comments Sat, 26 Jul 2008 22:49:44 +0000 sstchur http://blog.stchur.com/2008/07/26/screw-you-financially-responsible-americans/ Be irresponsible, spend money you don't have, buy things you can't afford, fail to make the payments. Not to worry -- just cry foul when it is threatened that it will be taken away from you and big government will come in and rescue you, sending the clear message that being financially responsible is, not only unnecessary, but actually stupid, since the tax dollars of those who are financially responsible are the dollars that are going to go towards this crappy legislature.

I've never been so irritated!

]]> http://blog.stchur.com/2008/07/26/screw-you-financially-responsible-americans/feed/ Wither IE6? http://blog.stchur.com/2008/07/22/wither-ie6/ http://blog.stchur.com/2008/07/22/wither-ie6/#comments Tue, 22 Jul 2008 13:00:07 +0000 sstchur http://blog.stchur.com/2008/07/22/wither-ie6/ Welcome aboard guys. Glad you finally decided to start thinking about what I discussed long ago.

]]> http://blog.stchur.com/2008/07/22/wither-ie6/feed/ Firefox 3 .pageX / .pageY bug http://blog.stchur.com/2008/07/03/firefox-3-pagex-pagey-bug/ http://blog.stchur.com/2008/07/03/firefox-3-pagex-pagey-bug/#comments Thu, 03 Jul 2008 17:40:49 +0000 sstchur http://blog.stchur.com/2008/07/03/firefox-3-pagex-pagey-bug/ Firefox 3 has a bug. It's somewhat obscure, and it probably doesn't affect you, but it did affect me.

It also affected the Microsoft Virtual Earth MapControl, so if you use the VE MapControl for a mashup, your Firefox 3 users are going to be affected by this issue.

The issue? It has to do with a mouse event's .pageX and .pageY properties. The values of those properties are supposed to report the "page" position of the mouse cursor, relative to the upper-left corner of the HTML page. You can think of it as the absolute (x,y) of the mouse cursor.

The nice thing about .pageX/Y is that serves as an easy way to get the mouse position, regardless of how much (or even if) the browser window is scrolled.

Contrast .pageX/Y with .clientX/Y: the latter reports (x,y) coordinates relative to the upper-left corner of the browser window, so these values will be affected by browser scroll position.

Anyway, at this point, you're probably thinking that I'm going to tell you that Firefox 3 reports the wrong values for .pageX/Y, and that that's the bug. It's not that simple though (again, I admit this is a somewhat obscure bug).

Most of the time, Firefox 3 reports the right values for .pageX/Y, but there is one case in which it doesn't.

Manually Dispatching Events in Javascript

A while back, I wrote a post about Re-routing events in Javascript. In it, I explain how to create an event and initialize it with myEvt.initMouseEvents(..) (which takes a boat-load of parameters).

Of all those parameters sent into .initMouseEvents(..), 4 are of particular interest: .screenX, .screenY, .clientX, and .clientY.

Notice that .pageX and .pageY are not in the list. You don't get the ability to pass in .pageX/Y when manually creating/dispatching an event in Javascipt. Presumably, the values for these properties are computed based on .clientX/Y and the browser's scroll position.

So for example, if you initialize a MouseEvent with .clientX = 200 and .clientY = 300, and if the browser is scrolled 50 x 75, then your event's .pageX and .pageY values will be 250 and 375 respectively.

Oops! I mean, that's what the values should be.

The Bug

Firefox 2 actually gets it right, but Firefox 3 doesn't.

When you're manually dispatching a MouseEvent in Firefox 3, the .pageX/Y property values will always be equal to the .clientX/Y values, regardless of browser scroll position.

As I previously mentioned, this affects the VE MapControl, so it's easy to see the issue in action. Just use Firefox 3 and point your browser to http://maps.live.com. Now make your browser window small enough to cause scroll bars to appear. Scroll the browser window by some amount (doesn't matter how much) and try panning the map. You should see the map "jump" during the initial pan. The amount it "jumps" is going to be equal to the amount by which the browser window is scrolled.

The Fix

Microsoft has a work-around for this issue that is going to be released with the next version of Virtual Earth, but if you're a mashup dev using the VE MapControl, I've got a solution that you can use right now, and it goes like this:

(function()
{
    var mouseEvt;
    if (typeof document.createEvent !== 'undefined')
    {
        mouseEvt = document.createEvent('MouseEvents');
    }
    if (mouseEvt && mouseEvt.__proto__ && mouseEvt.__proto__.__defineGetter__)
    {
        mouseEvt.__proto__.__defineGetter__('pageX', function()
        {
            return this.clientX + window.pageXOffset;
        });
        mouseEvt.__proto__.__defineGetter__('pageY', function()
        {
            return this.clientY + window.pageYOffset;
        });
    }
})();

Just include the preceding code snippet anywhere in your HTML page. The code is pretty straight-forward and just relies on the fact that Firefox (and others) have the ability to define getters through the use of .__defineGetter__(..).

The .pageX/Y properties are read only, but it turns out that the browser will let you redefine these getters, thereby overriding their return logic. Since the .clientX/Y properties appear to always report the correct value, all we have to do redefine the .pageX/Y getters to use a combination of .clientX/Y + .pageX/YOffset.

In other words, we've redefined .pageX/Y to always return the position of the event (in our case, the mouse cursor since we're dealing with MouseEvents), relative to the upper-left corner of the browser window + the scrolled position of the browser -- what it should have been all along!

This code doesn't hurt IE, as it won't execute in that browser, and it doesn't hurt Firefox 2 or other browsers that understand the code either, because the logic we've defined for the getters is going to be essentially the same as what the browser would have done natively anyway.

I'd like to file a bug to Mozilla on this issue, but I haven't a clue as to how one goes about doing that. If anyone knows (or wants to do it for me), feel free to speak up!

Enjoy the fix!

Comments welcome.

]]> http://blog.stchur.com/2008/07/03/firefox-3-pagex-pagey-bug/feed/ CSS Word-wrap: break word; (revisited) http://blog.stchur.com/2008/06/29/css-word-wrap-break-word-revisited/ http://blog.stchur.com/2008/06/29/css-word-wrap-break-word-revisited/#comments Mon, 30 Jun 2008 00:16:30 +0000 sstchur http://blog.stchur.com/2008/06/29/css-word-wrap-break-word-revisited/ HedgerWow is a great blog. If you've never checked it out, you definitely should.

I just noticed the other day that his latest post gives some props to my Emulating CSS word-wrap for Mozilla/Firefox blog post, but his version adds some much needed cross-browser support for browsers I neglected.

Nice One, HedgerWow!

]]> http://blog.stchur.com/2008/06/29/css-word-wrap-break-word-revisited/feed/ Firefox 3 http://blog.stchur.com/2008/06/19/firefox-3/ http://blog.stchur.com/2008/06/19/firefox-3/#comments Thu, 19 Jun 2008 14:45:50 +0000 sstchur http://blog.stchur.com/2008/06/19/firefox-3/ Well unless you've been living under a rock, you know that Firefox 3 was released on Tuesday. This is a big deal for me. When other browser makers release a new version, it's like eh... ok, that's cool (I guess). But when Mozilla releases a new Firefox, I've got a brand new shiny app to get me through my day to day web browsing.

Besides the new theme (on Windows) being a little bland, FF3 does not disappoint!

]]> http://blog.stchur.com/2008/06/19/firefox-3/feed/