Solved

Synchronize Scroll Bars

Posted on 2002-05-30
18
422 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
  • 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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now