asked on

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.

COBOLdinosaur

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">


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&

rtho7

ASKER

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>

COBOLdinosaur

This goes in the head of test2.htm:

<script language="JavaScript">

</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&

webwoman

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.

davlun20080

I have never seen two parameters on a margin either.

COBOLdinosaur

Most likely it just ignores the margins. That is the normal behaviour for HTML syntax errors.

Cd&

webwoman

Wouldn't an iFrame be easier? ;-)

COBOLdinosaur

>>>Wouldn't an iFrame be easier?

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

Cd&

rtho7

ASKER

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.

COBOLdinosaur

I do some code for it and be back shortly.

Cd&

COBOLdinosaur

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">

</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>

rtho7

ASKER

hate to ask but how do I make the iframes side by side horizontally not vertically?

rtho7

ASKER

hate to ask but how do I make the iframes side by side horizontally not vertically?

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rtho7

ASKER

hate to ask but how do I make the iframes side by side horizontally not vertically?

COBOLdinosaur

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&

rtho7

ASKER

Thanks for the help.

I appreciate it.

COBOLdinosaur

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

Cd&