Nothing and Everything

JQuery

The JQuery website:
http://jquery.com/

Cool trick: Synchronize scrollbars:
Matt Manela 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.

 jQuery.fn.synchronizeScroll = function() {   

            var elements = this;   
            if (elements.length <= 1) return;   

            elements.scroll(   
            function() {   
                var left = $(this).scrollLeft();   
                var top = $(this).scrollTop();  
                elements.each(  
                function() {  
                    if ($(this).scrollLeft() != left) $(this).scrollLeft(left);  
                    if ($(this).scrollTop() != top) $(this).scrollTop(top);  
                }  
                );  
            });  
        }

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

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Theme: Silver is the New Black. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.