Synchronizing the contents of two scrolling divs

[Jeremy Holt]

Hi,

I'm still very new to Angular - so please bear with me.

I am trying to synchronize two tables embedded in a div.

<div id="left">

<table ..../>

</div>

<div id="right>

<table ..../>

</div>

In jquery I would do this:

var _setMatchedContractScrolling = function() {
            $('#left').on('scroll', function() {
                $('#right').scrollTop($(this).scrollTop());
            });
        };

How would I do this the Angular way?

Many thanks in advance

Jeremy

[Prajwal Manjunath]

As usual, any DOM manipulation requires a directive. Define a new class directive. Put the two table divs inside an outer div having this directive as a class. In the directive's link function, call "ch = elem.children()", and keep "table1 = ch[0]; table2 = ch[1]". Then handle the scroll event on them:

"table1.bind("scroll", function(event) { .... });"

[Jeremy Holt]

Thank you so much - worked perfectly!

[David Roberson]

It's nice to know that someone was able to answer the question; but honestly, I would not call this an answer. It assumes the reader is knowledgeable and experienced in writing angular directives, able to put it all together from these vague references. I know it's been a while, but this is the only "on topic" post I can find on this subject using Google, so it's be really helpful if someone who does get it, could post a working jsfiddle or something. It's easy to find jQuery but I needed to do this in Angular.

Thanks. 

Define a new class directive. (Sounds reasonable)

 

Put the two table divs inside an outer div having this directive as a class. (Started losing me at "...as a class.")

 

In the directive's link function, call "ch = elem.children()", and keep "table1 = ch[0]; table2 = ch[1]". (Clarify what you mean by "keep"?)

 

Then handle the scroll event on them:

"table1.bind("scroll", function(event) { .... });" (Just not following this terminology... "handle ... on them"? Worse, you leave out the part those of us switching from jQuery to Angular most need to see; the logic.)

[Pat Buchanan]

Here you go Dave, or future Googlers:

Sync all divs with a class:   http://jsfiddle.net/x99zqogy/

Sync a child div based on it's name:  http://jsfiddle.net/8vsofu5j/

Hope that helps someone.

-pb

[nina....@blueshieldca.com]

This scrolling sync function is exactly what I need, unfortunately, it didn't work for me outside of JSFiddle.