Matthew Manela's Home Page

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();

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();

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();

HTML Source EditorWord wrap

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: }

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. 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: );

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: }

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: );

Silverlight 2 is currently in Beta 1 but even in this early stage it has many amazing features.  One of these features which I was toying around with today was its ability to integrate with its host page’s DOM.  What this means is that from Silverlight you are able to call Javascript functions and from JavaScript you can call Silverlight methods.

To demonstrate this feature I created a simple but interesting sample:

This webpage which can be found here contains two areas, a JavaScript area and a Silverlight area.  Each has a small square in it.  When you move the square in one area it updates its position in the other.  The beauty of this is how simple it is to make this work.  I will show how I update the squares position from Silverlight and from Javascript:

Calling Javascript Functions from Silverlight

This is the simpler of the two.  In Silverlight under the System.Windows.Browser namespace there is an object called HtmlPage.  This object gives you access to the pages DOM.  The code I use to move the square in the JavaScript area is:

HtmlPage.Window.Invoke(“moveBox”, newX, newY);

where “moveBox” is the name of a Javascript method I wrote to update the red square’s position.

That is all I have to do!

Calling Silverlight Methods from Javascript

This is slightly more complicated. First in the Silverlight application I have to mark which class I want to expose to JavaScript as by giving it a Scriptable attribute:

[ScriptableType]
public partial class Page : UserControl

Then I need to register this class so that JavaScript can see it and give it a name for JavaScript to refer to it as:

HtmlPage.RegisterScriptableObject(“silverlightMove”, this);

Next I need to mark which methods to expose to JavaScript by giving them a  ScriptableMember attribute.  Here I am exposing a method called MoveBox which updates the blue square’s position  in the Silverlight application:

[ScriptableMember]
public void MoveBox(int x, int y)

With all this setup done I can now move back to JavaScript and get ready to call the method.  To do this I need to get a reference to the pages Silverlight control:

silverLightControl = document.getElementById(“silverlightControl”);

Where “silverlightControl” is the id  applied to my Silverlight application object tag.

Once I have a reference to the Silverlight control I am able to invoke the method which I marked as a ScriptableMember using the object name I registered:

silverLightControl.content.silverlightMove.MoveBox(x, y);

I have now called MoveBox method from my C# code in the Silverlight application using Javascript!

The code for this sample can be found at here at MSDN Code Gallery.