SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving a DIV tag with page scrolling

    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 name="Action" id="Action" align="center" STYLE="position:absolute;left:600;top:355;">

    <table border="0" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="99%" id="AutoNumber19">
    <tr>
    <td width="100%" align="center">
    <a href="java_script_:ManageItems(window.document.forms.frmQA,1)" title="Add Item">
    <img border="0" src="../../images/blank.gif" border="0" name="imgAddItem">
    </a>

    </td>
    </tr>
    <tr>

    <td width="100%" align="center">
    <a href="java_script_:ManageItems(window.document.forms.frmQA,2)" title="Edit Selected Item">
    <img border="0" src="../../images/blank.gif" border="0" name="imgEditItem">
    </a>

    </td>
    </tr>
    <tr>

    <td width="100%" align="center">
    <a href="java_script_:ManageItems(window.document.forms.frmQA,3)" title="Remove Selected Item">
    <img border="0" src="../../images/blank.gif" border="0" name="imgRemoveItem">
    </a>

    </td>
    </tr>
    <tr>

    <td width="100%" align="center">
    <a href="java_script_:ManageGroups(window.document.forms.frmQA,1)" title="Add Group">
    <img border="0" src="../../images/blank.gif" border="0" name="imgAddGroup">
    </a>

    </td>
    </tr>
    <tr>

    <td width="100%" align="center">
    <a href="java_script_:ManageGroups(window.document.forms.frmQA,2)" title="Edit Selected Group">
    <img border="0" src="../../images/blank.gif" border="0" name="imgEditGroup">
    </a>

    </td>
    </tr>
    <tr>

    <td width="100%" align="center">
    <a href="java_script_:ManageGroups(window.document.forms.frmQA,3)" title="Remove Selected Group">
    <img border="0" src="../../images/blank.gif" border="0" name="imgRemoveGroup">
    </a>

    </td>
    </tr>
    </table>

    </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
    Attached Files Attached Files
    Last edited by tahirjadoon; Jul 26, 2004 at 11:14.

  2. #2
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The simplest way to achieve this kind of effect is to use:

    Code:
    position: fixed
    in your CSS rather than:

    Code:
    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.

  3. #3
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed: fixes he position and then the action button don't even move with scrolling.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 >= 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:

    <td id="myLimit" width="98%" colspan="2"><font color="#FF0000"><span lang="en-us">Don't
    want the menu to go below this row
    --------------------------------------------------------------------------------------</span></font></td>

  6. #6
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actual js files belong to Roy Whittle (Roy@Whittle.com). Made modifications to one function only to achieve what i wanted it to do.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •