Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

scroll 2 frames together

Posted on 2004-03-25
7
Medium Priority
?
559 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
[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
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 100 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
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 400 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This video teaches users how to migrate an existing Wordpress website to a new domain.
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…
Suggested Courses

721 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