Matt Manela's Blog : JQuery

Synchronizing Scrollbars using JQuery

MattManela — Thu, 19 Mar 2009 23:29:11 GMT

I just wrote this simple plugin for JQuery which lets you synchronize the scroll bars of any collection of elements. This lets you move the scrollbar of one div it have the scrollbars’ of the rest of the divs move the same exact amount.

Here is the code:

        1: jQuery.fn.synchronizeScroll = function() {

       2:  

       3:            var elements = this;

       4:            if (elements.length <= 1) return;

       5:  

       6:            elements.scroll(

       7:            function() {

       8:                var left = $(this).scrollLeft();

       9:                var top = $(this).scrollTop();

      10:                elements.each(

      11:                function() {

      12:                    if ($(this).scrollLeft() != left) $(this).scrollLeft(left);

      13:                    if ($(this).scrollTop() != top) $(this).scrollTop(top);

      14:                }

      15:                );

      16:            });

      17:        }

Using this is SUPER simple. Lets say you have several divs defined as:

<div class=”scrollDiv” style=”overflow:auto;”> .. some large content</div>

To synchronize the scrollbars’ on all divs with the class scrollDiv all you need to write is:

$(“.scrollDiv”).synchronizeScroll();

Updated JQuery ResizeComplete method

MattManela — Tue, 02 Dec 2008 17:51:29 GMT

I made 2 slight changes and I think it works pretty well now. I now detect if the browser is Firefox and use the regular resize event since its resize behaves like a resizeComplete. I also modified the timeout a bit since I think 100 ms might be too small.

Here is the updated version:

   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() },200);  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:   if($.browser.mozilla)  38:   {  39:     element.resize(callback);  40:   }  41:   else  42:   {  43:     element.resize(onResize);  44:   }  45:     46:     47: }

Rough draft of a new JQuery method

MattManela — Tue, 25 Nov 2008 07:41:17 GMT

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.

Firefox only fires it when you release the mouse.
IE fires this event many many times while resizing.
Safari will fire continusouly while dragging
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: );