adjusting scroll bar in frames

Hello,
      My webpage is divided into two frames. The bottom frame is the one I am having an issue with.

There are two scenarios:

1) The contents of the bottom frame are within the size of the screen, hence there is not scroll bar on the right hand side.

2) The contents of the bottom frame are more than the size of the screen, hence a scroll bar comes on the right hand size of the frame.
Due to the scroll bar, the entire bottom frame shifts a little bit the the left hand side and is not aligned with the top frame.
How do I get around this issue? Can I some how get the scroll as part of the bottom frame? Please help.
kavishshuklaAsked:
Who is Participating?
 
Donnaa5dcpConnect With a Mentor Project managerCommented:
Since the whole basis of the technique revolves around alignment of the frame content with that of adjacent frames, the easiest way to ensure this is by removing all extra spacing added by the browsers in each frame by setting MARGINWIDTH and MARGINHEIGHT to 0

<FRAMESET COLS="50,*" BORDER=0>

  <FRAMESET ROWS="50,*">

    <FRAME>
    <FRAME NAME="leftGuy" SRC="left.html"
           MARGINWIDTH=0 MARGINHEIGHT=0
           SCROLLING="no">

  </FRAMESET>

  <FRAMESET ROWS="50,*">

      <FRAME NAME="topGuy" SRC="top.html"
           MARGINWIDTH=0 MARGINHEIGHT=0
           SCROLLING="no">
      <FRAME SRC="main.html"
           MARGINWIDTH=0 MARGINHEIGHT=0>

  </FRAMESET>

</FRAMESET>


We need HTML files for three frames. These, of course, will be different for each application. It is up to you to develop appropriate ones, following the rules we will set out over the next few pages. To further ensure alignment, we must omit all browser-specific default spacing inserted in an HTML page. For this, we use the Explorer-specific TOPMARGIN/LEFTMARGIN attributes and the Navigator-specific MARGINWIDTH/MARGINHEIGHT attributes. Therefore, all three frame pages, should have the same values for all four of these BODY tag attributes:

<BODY MARGINWIDTH=0 MARGINHEIGHT=0
      LEFTMARGIN=0 TOPMARGIN=0>
With our three frame files created, and referenced by our frameset, we can proceed to synchronize their scrolling
Explorer 4 also provides a powerful event handler, onscroll, which fires whenever the user begins scrolling the element that the handler is attached to.

Therefore, to synchronize our frame scrolling, we need to:

detect when the user begins scrolling the main frame
read the main frame's scrollLeft value
write the value to the top frame's scrollLeft property
read the main frame's scrollTop value
write the value to the left frame's scrollTop property
The Script
In our main frame page, we therefore include this simple script:

<SCRIPT LANGUAGE="Javascript1.2">
<!--

IE4 = (document.all) ? 1 : 0;

leftFrame = parent.frames.leftGuy;
topFrame = parent.frames.topGuy;

if (IE4) onscroll = keepTogether;

function keepTogether(){
  leftFrame.document.body.scrollTop =
                       document.body.scrollTop;
  topFrame.document.body.scrollLeft =
                       document.body.scrollLeft;
}
//-->
</SCRIPT>
First, we assign the left frame to leftFrame, and the top frame to topFrame for easier referencing.

Next, the page's onscroll event handler is directed to call the keepTogether() function whenever a scroll is detected.

Finally keepTogether() ensures that the frames have the same relevant scroll values.

Now, whenever the user scrolls the main frame, the top and left frames follow suit. The exact same code applies whether you have specified visible scrollbars for the left and top or not.

In Navigator, it's a little more complicated. Let me know if you want it
0
 
jessegivyDeveloperCommented:
>>Can I some how get the scroll as part of the bottom frame?
Not sure what you mean by this, do you want there to be a scrollbar always, even if there isn't any need for one, so that you can have consistant alignment?

I'm not exactly sure what the attribute name is but I think it's scroll.  In your frame declaration you need to change scroll="auto" to scroll="yes"

...or something like that.  That was consise wasn't it :P
0
 
kavishshuklaAuthor Commented:
Here is what I want:

1) I want the bottom frame to be consistent with the top frame.

2) I want all the data to be viewable.

So, if I turn off scrolling, then all data will not be viewable when data exceeds the size of the screen.

And, if I have auto scrolling (which I have now), bottom frame is not always consistent with the top fram because when there is a scroll bar in the bottom frame, it shifts to the left due to the scroll bar size and does not stayed aligned with the top frame.

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
jessegivyDeveloperCommented:
So how about defining a height for your bottom frame that's as large as the content will ever be and scroll just the main window?  Is there a scroll attribute for frameset tag?  I NEVER use frames, only Iframes if I've gotta, post your frameset and I'll check it out if you want.  Does the upper frame scroll sometimes too, if so that's complicated...  For the upper frame you'll have to dynamically size it based on the content if you want to have the window only scroll, but with the lower frame, is there a problem with just having a bunch of white space, or does your design include a footer menu?
0
 
kavishshuklaAuthor Commented:
top frame never scrolls.

bottom frame scrolls vertically when text exceeds further down the size of the screen.

Here is my bottom frame:

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">

<table cellpadding="0" cellspacing="0" border="0" height="100%"">

<tr>
      <td rowspan="10" width="50%" height="100%" background="images/bg1222.jpg" style="background-position:right top; background-repeat:repeat-y"></td>
      <td rowspan="10" width="1" bgcolor="#000000"></td>
      <td colspan="2">

<form action="StudentRegister.php" method="post" >

<table>
...
...
...
</table>
<input type="submit" value="SUBMIT" name="submit">

</form>      


      </td>
            <td rowspan="10" width="1" bgcolor="#000000"></td>
            <td rowspan="10" width="50%" height="100%" background="images/bg1223.jpg" style="background-position:left top; background-repeat:repeat-y"></td>      


</tr>

<tr>
      <td valign="bottom" colspan="2"><a href=""><img src="images/f01.jpg" border="0"></a><a href=""><img src="images/f02.jpg" border="0"></a><a href=""><img src="images/f03.jpg" border="0"></a><a href=""><img src="images/f04.jpg" border="0"></a><a href=""><img src="images/f05.jpg" border="0"></a><a href=""><img src="images/f06.jpg" border="0"></a></td>
</tr>

</table>


</body>
0
 
kavishshuklaAuthor Commented:
top frame never scrolls.

bottom frame scrolls vertically when text exceeds further down the size of the screen.

Here is my bottom frame:

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">

<table cellpadding="0" cellspacing="0" border="0" height="100%"">

<tr>
      <td rowspan="10" width="50%" height="100%" background="images/bg1222.jpg" style="background-position:right top; background-repeat:repeat-y"></td>
      <td rowspan="10" width="1" bgcolor="#000000"></td>
      <td colspan="2">

<form action="StudentRegister.php" method="post" >

<table>
...
...
...
</table>
<input type="submit" value="SUBMIT" name="submit">

</form>      


      </td>
            <td rowspan="10" width="1" bgcolor="#000000"></td>
            <td rowspan="10" width="50%" height="100%" background="images/bg1223.jpg" style="background-position:left top; background-repeat:repeat-y"></td>      


</tr>

<tr>
      <td valign="bottom" colspan="2"><a href=""><img src="images/f01.jpg" border="0"></a><a href=""><img src="images/f02.jpg" border="0"></a><a href=""><img src="images/f03.jpg" border="0"></a><a href=""><img src="images/f04.jpg" border="0"></a><a href=""><img src="images/f05.jpg" border="0"></a><a href=""><img src="images/f06.jpg" border="0"></a></td>
</tr>

</table>


</body>
0
 
kavishshuklaAuthor Commented:
And here is my frameset (I guess thats what you want):

<html>
<head>
<script language="javascript">
     function loadContent(fileURL) {
          var contentFrame = document.getElementById("bottomFrame");
          contentFrame.src = fileURL;
     }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<frameset rows="200,*" cols="*" framespacing="0" frameborder="no" border="0">
  <frame src="template.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame">
  <frame src="bottomTemplate.html" name="bottomFrame" scrolling="no" id="bottomFrame" title="bottomFrame">
</frameset>
<noframes><body></body></noframes></html>
0
 
CyberGhostConnect With a Mentor Commented:
This is a standard design problem. And I assume the top frame is a menu.
So why don't you just drop those frames and create one page with this menu on top and everything else below?
Even in HTML, if you change that menu, you can use some mass replace tool to change it in all .html files :-)
0
All Courses

From novice to tech pro — start learning today.