Synchronize Scroll Bars

I have a frameset that opens two htm files.
I want the the files to scroll together when either of the files are being scrolled through.

rtho7Asked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
We just have to change the width and height, and put a line break between them like this:

<html>
<head>
<title>content</title>
<script language="JavaScript">
<!--
var UPSCRL=false;
var DNSCRL=false;

function scrollPageU ()
{
document.frames['a'].scrollBy(0,2);
document.frames['b'].scrollBy(0,2);
}

function scrollPageD()
{
document.frames['a'].scrollBy(0,-2);
document.frames['b'].scrollBy(0,-2);
}
//-->
</script>
</head>
<body>
<iframe id="a" width="100%" height="45%" scrolling="no" src="test1.htm"></iframe>
<br />
<iframe id="b" width="100%" height="45%" scrolling="yes" src="test2.htm"
   onScroll="document.frames['a'].document.body.scrollTop=150"></iframe>
<div onMouseover="document.frames['a'].document.body.scrollTop=document.frames['b'].document.body.scrollTop" style="width:250">
Up <A HREF="JavaScript:null(0)"
onMouseover="UPSCRL=setInterval('scrollPageU()',10)"
OnMouseout="clearInterval(UPSCRL)">
<img src="up.gif" border=0>
</A>

Down <A HREF="JavaScript:null(0)"
onMouseover="DNSCRL=setInterval('scrollPageD()',10)"
OnMouseout="clearInterval(DNSCRL)">
<img src="down.gif" border=0>
</A>
</div>
</body>
</html>
0
 
COBOLdinosaurCommented:
Srcolling two frames together:

There are two functions. One for scrolling up and one for scrolling down.
You could combine them by passing an argument but the additional overhead
of doing it that way would cause a performance problem on slower machines.

<script language="JavaScript">
<!--
var UPSCRL=false;
var DNSCRL=false;

function scrollPageU ()
{
window.scrollBy(0,2);
parent.leftframe.scrollBy(0,2);
}

function scrollPageD()
{
window.scrollBy(0,-2);
parent.leftframe.scrollBy(0,-2);
}
//-->

The frame declaration for the left frame in the frame set
would have to to be named. The function as written is assuming a
name of leftframe

To trigger the scroll we need an event. This is what it looks like
if we use mouse events and an image in an anchor.


<A HREF="JavaScript:null(0)"
onMouseover="UPSCRL=setInterval('scrollPageU()',10)"
OnMouseout="clearInterval(UPSCRL)">
<img src="up.gif" border=0>
</A>

<A HREF="JavaScript:null(0)"
onMouseover="DNSCRL=setInterval('scrollPageD()',10)"
OnMouseout="clearInterval(DNSCRL)">
<img src="down.gif" border=0>
</A>

Cd&
0
 
rtho7Author Commented:
Sorry I am a little confused.  Where do I put the above information to make it to work?

I have the following frameset.

<html>
<head>


<title></title>
<FRAMESET BORDER="0" ROWS="120, *">
   <FRAME SRC="menu01.htm" NAME="menu" scrolling=no>
     <FRAMESET ID="frameset1" BORDER="0" COLS="*, *">
         <FRAME MARGINHEIGHT="70" MARGINWIDTH="70, *" SRC="test1.htm" NAME="a">
         <FRAME MARGINHEIGHT="70" MARGINWIDTH="70, *" SRC="test2.htm" NAME="b">    
      </FRAMESET>
</FRAMESET>

</head>
<body>
</body>
</html>
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
COBOLdinosaurCommented:
This goes in the head of test2.htm:

<script language="JavaScript">
<!--
var UPSCRL=false;
var DNSCRL=false;

function scrollPageU ()
{
window.scrollBy(0,2);
parent.a.scrollBy(0,2);
}

function scrollPageD()
{
window.scrollBy(0,-2);
parent.a.scrollBy(0,-2);
}
//-->
</script>

This goes in the body of test2.htm:

<A HREF="JavaScript:null(0)"
onMouseover="UPSCRL=setInterval('scrollPageU()',10)"
OnMouseout="clearInterval(UPSCRL)">
<img src="up.gif" border=0>
</A>

<A HREF="JavaScript:null(0)"
onMouseover="DNSCRL=setInterval('scrollPageD()',10)"
OnMouseout="clearInterval(DNSCRL)">
<img src="down.gif" border=0>
</A>

You will need to replace the up.gif and down.gif with a couple of your own images.

Cd&

0
 
webwomanCommented:
Does this actually work?

        <FRAME MARGINHEIGHT="70" MARGINWIDTH="70, *" SRC="test1.htm" NAME="a">
        <FRAME MARGINHEIGHT="70" MARGINWIDTH="70, *" SRC="test2.htm" NAME="b">    

marginheight of 70 is HUGE, and I've never seen marginwidth with 2 parameters.
0
 
davlun20080Commented:
I have never seen two parameters on a margin either.
0
 
COBOLdinosaurCommented:
Most likely it just ignores the margins.  That is the normal behaviour for HTML syntax errors.

Cd&
0
 
webwomanCommented:
Wouldn't an iFrame be easier? ;-)
0
 
COBOLdinosaurCommented:
>>>Wouldn't an iFrame be easier?

Iframe, scrollable div.  Wrap around frame.  All easier, but I think maybe the idea is being "cool".  ;^)

Cd&
0
 
rtho7Author Commented:
COBOLdinosaur

Your solution works.  I will award you the 100 points.  However if you can give me a example of the above using Iframe I will increase to 200 points.

I don't need to be cool.  I want to allow easy comparision of displayed htm documents.

0
 
COBOLdinosaurCommented:
I do some code for it and be back shortly.

Cd&
0
 
COBOLdinosaurCommented:
Here we go.  This leaves the documents completely independent.  All code is in the carrier page.  If you still want to use frames to keep your menu up top just put this in the bottom from of you main frameset.

What I have done is set up a page with two Iframes to hold the documents.  The scroll controls are below the iframes so different documents cna be brought into the Iframes without having to put any extra code on them.  I left the scroll bar off the left side but it is present on the right side.  You can set it up for both or neither just by changing the scrolling attribute of the iframes.  The scroll bars allow independent scrolling.  However that could result in them being out of sync when the scroll controls are used, so the region containing the controls has an event to always position the left document to the same position as the right document before the scrolling starts.
Cd&


<html>
<head>
<title>content</title>
<script language="JavaScript">
<!--
var UPSCRL=false;
var DNSCRL=false;

function scrollPageU ()
{
document.frames['a'].scrollBy(0,2);
document.frames['b'].scrollBy(0,2);
}

function scrollPageD()
{
document.frames['a'].scrollBy(0,-2);
document.frames['b'].scrollBy(0,-2);
}
//-->
</script>
</head>
<body>
<iframe id="a" width="50%" height="90%" scrolling="no" src="test1.htm"></iframe>
<iframe id="b" width="50%" height="90%" scrolling="yes" src="test2.htm"
   onScroll="document.frames['a'].document.body.scrollTop=150"></iframe>
<div onMouseover="document.frames['a'].document.body.scrollTop=document.frames['b'].document.body.scrollTop" style="width:250">
Up <A HREF="JavaScript:null(0)"
onMouseover="UPSCRL=setInterval('scrollPageU()',10)"
OnMouseout="clearInterval(UPSCRL)">
<img src="up.gif" border=0>
</A>

Down <A HREF="JavaScript:null(0)"
onMouseover="DNSCRL=setInterval('scrollPageD()',10)"
OnMouseout="clearInterval(DNSCRL)">
<img src="down.gif" border=0>
</A>
</div>
</body>
</html>
0
 
rtho7Author Commented:
hate to ask but how do I make the iframes side by side horizontally not vertically?
0
 
rtho7Author Commented:
hate to ask but how do I make the iframes side by side horizontally not vertically?
0
 
rtho7Author Commented:
hate to ask but how do I make the iframes side by side horizontally not vertically?
0
 
COBOLdinosaurCommented:
rtho7,

Use the reload link at the top of the page instead of the refresh button on your browser.  When you use refresh, it re-submits your last comment again.

Cd&
0
 
rtho7Author Commented:
Thanks for the help.

I appreciate it.

0
 
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A and the point increase. :^)

Cd&
0
All Courses

From novice to tech pro — start learning today.