Create common scrolls for two iframes

Question

0.00/5 (No votes)

See more:

Hi,

ASP.NET

<div id="divMain">
    <div id="divChildOne" style="float: left; width: 50%;">
       <asp:Label runat="server" ID="lableOne"  Font-Bold="true"></asp:Label>
       <br />
       <iframe id="iFrameOne"  runat="server" style="width:100%;" />
    </div>
    <div id="divChildTwo" style="float: right; width: 50%;">
        <asp:Label runat="server" ID="labelTwo"  Font-Bold="true"></asp:Label>
        <br />
        <iframe id="iFrameTwo"  runat="server" style="width:100%;"  />
    </div>
</div>

This is the design of my page where i want to show to docs side by side.

Now what i want to create is two scroll bars , one vertical and the horizontal and when i scroll anyone of them, both docs will scroll at the same time.

I though of giving the "divMain" "overflow:auto" property and overflow:hidden to rest of the other controls. But when i run there are scrollbars for the iframe. The scrollbar belongs to a div inside the iframe having a id xxxx.

i don't know where the div came from. May be the its with in the doc that i am showing which is an infopath report.

What shall i do

Edit 16th July:-

I was able to hide the scroll bars and eventhough i have given the overflow of divMain to scroll, it is disabled.

Edit 17th July:-

I gave the parent div maxheight ( which i dnt thnk is nice due to resolution issue) , now scroll came for height.

Now i want the child control (iframe) content to get scrolled as i scroll the main div scroll

Thanks in advance

Arjun Menon

Posted 14-Jul-14 21:55pm

Arjun Menon U.K

Updated 16-Jul-14 22:24pm

v5

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

samit kaneriya · Answer 1 · 2014-07-16T03:01:00

Solution 1

(1) Add Jquery file for scroll event fire

(2) you have two ifmare in page right add this javascript code in your page

XML

<script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $(window.frames[0]).on('scroll', function() {
                $(window.frames[1]).scrollTop($(window.frames[0]).scrollTop());
            });
            $(window.frames[1]).on('scroll', function() {
                $(window.frames[0]).scrollTop($(window.frames[1]).scrollTop());
            });
        });
    </script>

Posted 16-Jul-14 3:01am

samit kaneriya

Comments

Arjun Menon U.K 16-Jul-14 9:42am

Can you please explain this piece of code.
First point , is mentioned in the code you provided rt?

The frames[0] means first iframe and since i am hiding the scroll, will it work? Same is the case with second one too

Arjun Menon U.K 16-Jul-14 9:45am

When the child control has contents beyond the parent, the parent div by default increases in size, there by creating scroll. This is what i had in mind