Solved

scroll 2 frames together

Posted on 2004-03-25
7
517 Views
Last Modified: 2007-12-19
Is there a way I can force two side-by-side vertical frames to scroll together as one? So that when you move the scrollbar on the left frame, the right frame scrolls with it, and vice versa?
0
Comment
Question by:SweatCoder
7 Comments
 
LVL 1

Expert Comment

by:dynaweb
Comment Utility
Yes, you can put those two frames (noscroll) inside one larger frame that allows scrolling.  That will make the two inside to scroll together :)
0
 
LVL 12

Assisted Solution

by:venkateshwarr
venkateshwarr earned 25 total points
Comment Utility
you can do that using window.onscroll

<script language="JavaScript">

window.onscroll = scrollOtherFrame;
function scrollOtherFrame()
{
        if (navigator.appName == "Microsoft Internet Explorer")
      {
                              top.frame2.scrollTop =document.body.scrollTop;
            //alert("You've scrolled to " + document.body.scrollTop + " pixels.");
      }
      else{  
                        top.frame2.scrollTop = window.pageYOffset;
                        //alert ("You've scrolled to " + window.pageYOffset + " pixels.");
                }
       
}

</script>

venkat.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Something like this:

<script type="text/javascript">
<!--
var x=0;
var y;
function alignF()
{
if (top.frames['xxxxxx'].alignF
{
if (self.pageYOffset) // all except Explorer
{
      y = top.frames['xxxxxx'].pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
      // Explorer 6 Strict
{
      y = top.frames['xxxxxx'].document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
      y = top.frames['xxxxxx'].document.body.scrollTop;
}
}
setTimeout('alignF()',200);
}
onload=alignF;
//-->
</script>

Put it in the head of the pages and replace 'xxxxxxx' with the name of the other frame.

Cd&

0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
Comment Utility
Oops I mised one line of code.... the scroll :^(

It should be:

Something like this:

<script type="text/javascript">
<!--
var x=0;
var y;
function alignF()
{
if (top.frames['xxxxxx'].alignF
{
if (self.pageYOffset) // all except Explorer
{
      y = top.frames['xxxxxx'].pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
      // Explorer 6 Strict
{
      y = top.frames['xxxxxx'].document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
      y = top.frames['xxxxxx'].document.body.scrollTop;
}
}
scrollTo(x,y);
setTimeout('alignF()',200);
}
onload=alignF;
//-->
</script>

Cd&

0
 
LVL 11

Author Comment

by:SweatCoder
Comment Utility
I tried both of your scripts, and neither of them worked. venkateshwarr, your script did nothing in my IE6 browser. cobol, your script was missing some parens and curly braces, so i fixed it up, and then tried various derivatives of your code. In 2 cases I got "not implemented" errors. In one case when I scrolled the left frame, it (left frame) went buggy and danced up and down, but the right frame never moved.

Sorry I didn't clarify--I am only interested in IE 5.5+ compatibility. My frame model is composed of 3 frames: PermsTop, PermsLeft, PermsRight.

When I scroll the left frame down, I need the right frame to scroll exactly with it, pixel-for-pixel. The 2 frames each have a table in which the row count always matches, so the vertical size of each frame is always identical, just FYI. I have to use 2 frames, can't combine into one, long story. Don't include any netscape stuff 'cause I won't need it.

Hope you can help. I've been on MSDN and tried some of the doScroll stuff, which also didn't work.
0
 
LVL 11

Author Comment

by:SweatCoder
Comment Utility
this ended up being the perfect solution:

var var_deltaY = 0;
  function doIt(){
      deltaY = document.body.scrollTop
      if(deltaY != var_deltaY){
            top.PermsRight.scrollTo(0,deltaY);
            var_deltaY = deltaY
      }
  }

<BODY onScroll="setInterval('doIt()',1)">

you both got me thinking in the right direction. . .i found the script above online and had to tweak it a bit, but it works great.
0
 
LVL 11

Author Comment

by:SweatCoder
Comment Utility
stop the presses, this is even better:

<BODY onScroll="top.PermsRight.scrollTo(0,document.body.scrollTop)">

that's it!!!! no extra javascript function required. that single line of code does EXACTLY what I needed, and elegantly too. this is an IE solution.
0

Featured Post

Highfive Gives IT Their Time Back

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

Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

771 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

12 Experts available now in Live!

Get 1:1 Help Now