Moving a DIV tag with page scrolling

LearningLifeTime · July 26, 2004, 5:22pm

I have a table with two columns. Left column displays the overview of the data with check boxes and the right coumn displays some action buttons that will be visible/invisible depending onthe check box checked from the left column. Now when the user is scrolling the page to view the left column info, i want to move the right column action buttons up/down too also with it.

These action buttons are inside a DIV tag, so will be moving the DIV tag.

</DIV>

these buttons will be populatedwhen the check box will be selected from the left main column.

initial position of the DIV tag should be X=600 Y=355.

also i dont want the action buttons to go down the last row of the info column. This means that if we are scrolling up then it should be from TOP 355 and if we are scrolling down then if we have not reached the last row it should be 355 other wise it should not go down the last row of info column.

If the info column is smaller in height than the action column then upword scroll or downward scroll i want the top Y to be 355.

Any help in this regard will be greatly appreciated.

The example that i have followed is attached with this post.

click the following link to test the example

http://www.nrccua.org/Testing/test.asp

Caterwomtious · July 26, 2004, 7:43pm

The simplest way to achieve this kind of effect is to use:

position: fixed

in your CSS rather than:

position: absolute

It works straight away in modern browsers like Firefox and Opera, and if you bung a reference to IE7 in your page, it’ll work in IE too.

LearningLifeTime · July 26, 2004, 7:50pm

Fixed: fixes he position and then the action button don’t even move with scrolling.

MikeFoster · July 26, 2004, 11:38pm

If you decide to use dhtml instead of position:fixed, view the source of this demo, it should give you some ideas

Here’s another one.

LearningLifeTime · July 29, 2004, 8:09pm

its been done. follwing chnages have been made to the xScrollMenu.js file.

function CreateStaticMenu(theObj, limObj, x, y)
{
myBrowser = new xBrowser();

 staticMenu = new xLayerFromObj(theObj);
 
 staticMenu.baseX = x;
 staticMenu.baseY = y;
 staticMenu.x = x;
 staticMenu.y = y;
 
 staticMenu.moveTo(x,y);
 staticMenu.show();

    // added
    staticMenu.myHeight = parseInt(document.getElementById(theObj).offsetHeight);
 var lim = document.getElementById(limObj);
 var limit = 0;
 while (lim.offsetParent)
 {
   limit += lim.offsetTop;
   lim = lim.offsetParent;
 }
 staticMenu.limit = limit;

 setInterval("ani()", 20);

}
function ani()
{
var b = staticMenu;
var targetX = myBrowser.getMinX() + b.baseX;
var targetY = myBrowser.getMinY() + b.baseY;
var dx = (targetX - b.x)/8;
var dy = (targetY - b.y)/8;
b.x += dx;
b.y += dy;

 if (b.limit &gt;= b.y + b.myHeight)   
   b.moveTo(b.x, b.y);

}

in HTML page, changed script to this:
<script type=“text/javascript”>
<!–
function Load(){
//The following will help the scrolling the Action buttons
CreateStaticMenu(“Action”, “myLimit”, 600, 355);
}
//–>
</script>

and change the <td> to this:

&lt;td  id="myLimit" width="98%" colspan="2"&gt;&lt;font color="#FF0000"&gt;&lt;span lang="en-us"&gt;Don't

want the menu to go below this row
--------------------------------------------------------------------------------------</span></font></td>

LearningLifeTime · July 29, 2004, 8:18pm

Actual js files belong to Roy Whittle (Roy@Whittle.com). Made modifications to one function only to achieve what i wanted it to do.