Rough draft of a new JQuery method

  • Article

I have run into issues recently with the browsers' implementation of the resize event on the window.  Opera, Safari, IE and Firefox all have different behaviors when this event is fired. 

    1. Firefox only fires it when you release the mouse.
    2. IE fires this event many many times while resizing.  
    3. Safari will fire continusouly while dragging
    4. Opera fires after the resizing stopped

You can read more about this here.

These differences led me to search for a solution.  I quickly wrote this proof of concept function today which may help solve this problem.  It is a JQuery add-on called resizeComplete.  It works by checking periodically after a resize starts and checks if the size of the object has changed.  Once no change is detected it invokes the call back method.

This has not been tested much at all but I think it might be on the right track.

    1: jQuery.fn.resizeComplete = function(callback)

    2: {

    3:  

    4:   var element = this;

    5:   var height = element.height();

    6:   var width = element.width();

    7:   var monitoring = false;

    8:   var timer;

    9:   

   10:   function monitorResizing()

   11:   {

   12:     monitoring = true;

   13:     

   14:     var newHeight = element.height();

   15:     var newWidth = element.width();

   16:     

   17:     if(newHeight != height || newWidth != width)

   18:     {

   19:       height = newHeight;

   20:       width = newWidth;

   21:       timer = setTimeout(function() { monitorResizing() },100);

   22:     }

   23:     else

   24:     {

   25:       monitoring = false;

   26:       clearTimeout(timer);

   27:       callback();

   28:     }

   29:   }

   30:   

   31:   function onResize()

   32:   {

   33:     if(monitoring) return;

   34:     monitorResizing();

   35:   }

   36:   

   37:   element.resize(onResize);

   38:   

   39: }

 

Here is an example of its usage:

 

    1: $(document).ready(function()

    2: {

    3:   $(window).resizeComplete(function(){ document.write('hi') });

    4: }

    5: );