Solved

Synchronize Scroll Bars

Posted on 2002-05-30
18
427 Views
Last Modified: 2008-03-06
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.

0
Comment
Question by:rtho7
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
  • 2
  • +1
18 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7045428
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
 

Author Comment

by:rtho7
ID: 7045441
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7045469
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:webwoman
ID: 7045488
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
 
LVL 3

Expert Comment

by:davlun20080
ID: 7045515
I have never seen two parameters on a margin either.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7045542
Most likely it just ignores the margins.  That is the normal behaviour for HTML syntax errors.

Cd&
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7046275
Wouldn't an iFrame be easier? ;-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7046732
>>>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
 

Author Comment

by:rtho7
ID: 7046854
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7046907
I do some code for it and be back shortly.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7047527
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
 

Author Comment

by:rtho7
ID: 7047579
hate to ask but how do I make the iframes side by side horizontally not vertically?
0
 

Author Comment

by:rtho7
ID: 7047597
hate to ask but how do I make the iframes side by side horizontally not vertically?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 225 total points
ID: 7047604
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
 

Author Comment

by:rtho7
ID: 7047697
hate to ask but how do I make the iframes side by side horizontally not vertically?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7047721
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
 

Author Comment

by:rtho7
ID: 7047779
Thanks for the help.

I appreciate it.

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7047800
Glad we could help.  Thanks for the A and the point increase. :^)

Cd&
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question