Solved

Synchronize Scroll Bars

Posted on 2002-05-30
18
426 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Title # Comments Views Activity
Diminish Pop-up  in 3 seconds 7 49
jQuery Scroll To Top 5 39
Access RV042 GUI / Browser Issues 25 49
Understanding UserAgent String 2 15
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

832 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