Solved

scroll 2 frames together

Posted on 2004-03-25
7
538 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
ID: 10683127
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
ID: 10683134
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
ID: 10683163
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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
ID: 10683169
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
ID: 10683927
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
ID: 10684088
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
ID: 10684124
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

Industry Leaders: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
move expression web site to a new server 13 72
Best environment for cross platform web development? 5 69
WordPress 8 52
HTTPS for signup & login - HTTP for all other pages 10 42
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

679 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