SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to show scrollbars for a DIV that contains stuff...?

    My apologies for posting this here as well as in the JavaScript forum a couple of days ago. I will delete the other post tonight.


    Hello,

    There's a DIV with a fixed height, containing a data table. I can't get the DIV to show overflow-y scrollbars after a page refresh.


    This is a bit odd, because in normal situations, this isn't (or shouldn't be) so hard to do. In my case, however, the code that makes up the DIV containing the data TABLE gets generated by way of five PHP and JavaScript files.

    Sadly, the developers have also hard-coded some CSS throughout their non-CSS files, but I think I've tracked most of that down and took it out for the most part.


    The issue: When the data table contains more rows than the three rows that are visible, and the user clicks, say, row #22, then the page reloads and the clicked row (#22) is not visible. The user will have to scroll down to see what they've clicked.

    Not very practical, because this page requires evaluation of the selected row item and therefore the end-user needs to see the details about the selected item.


    This is what it looks like before:



    After wading through multiple PHP classes and JavaScript include files, I was finally able to pin-point the spot where the data table gets redrawn.

    Then I've tried some crazy things with offsetHeight, scrollHeight and overflow, and it sort of works in terms of scrolling the desired table row into view.


    The problem is: Now the vertical scrollbar of the DIV container has disappeared. Or sometimes, it shows up, but I can't scroll more than a few pixels, and the top of the table can never be reached.


    So this is what it looks like after:



    Here is a snippet of my most recent attempt:

    Code JavaScript:
                    objDiv.style.display = "none";
                    objDiv.style.position = "relative";
                    objTbl.style.position = "absolute";
                    objTbl.style.width = "450px";
                    objTbl.style.height = "100%";
                    objTbl.style.scrollHeight = (intHt +5) + "px";
                    objDiv.style.height = "95px";
                    objDiv.style.scrollHeight = (intHt +5) + "px";
                    objDiv.style.overflowY = "scroll";
                    objDiv.style.display = "block";
                    objTbl.style.top = "-20px";


    intHt = the actual height of the data table inside the DIV.

    Although I have all the other variables to determine the height of the table rows, the location of the selected row (plus how many rows are above/below it), for now it would just like to figure out what I am doing wrong here.

    By the way, the DIV is hard-coded to be 95px high.

    The View Source doesn't show much, other than the DIV container; the table gets added into that DIV by way of PHP and JavaScript. So here's the HTML that gets generated before the table inside the DIV (id = tableSelector) shows up:

    Code HTML4Strict:
    <div class="grid_8 alpha" id="evaluation_area_left">
    <div id="tableSelector"><!--TABLE GETS INSERTED HERE-->></div>
    <div class="clear"></div>
    <div id="sliderArea"></div>
    <div class="clear"></div>
    <div id="apprComments"></div>
    </div>


    Any hints or suggestions, anyone?

    Thank you.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,528
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by webgyver View Post
    My apologies for posting this here as well as in the JavaScript forum a couple of days ago. I will delete the other post tonight.
    I already removed it

    The issue: When the data table contains more rows than the three rows that are visible, and the user clicks, say, row #22, then the page reloads and the clicked row (#22) is not visible. The user will have to scroll down to see what they've clicked.
    The issue does seem more javascript related but unless I had a working copy to play with I can't really shed much light on this.

    This may be miles wide of the mark but wouldn't it be easier to let the browser do the work for you and simply attach a fragment identifier on page load so that it goes to the required table row.

    This is what it would look like in normal html/css.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    table {width:500px;}
    tr:nth-of-type(odd) {
    background:#ccc
    }
    td {border-bottom:1px solid #000}
    .wrap {
        overflow:auto;
        width:520px;
        height:96px;
    }
    :target {background:red}
    </style>
    </head>
    <body>
    <p><a href="#ten">Go to row 10</a></p>
    <div class="wrap">
        <table>
            <tr>
                <td>1 testing</td>
            </tr>
            <tr>
                <td>2 testing</td>
            </tr>
            <tr>
                <td>3 testing</td>
            </tr>
            <tr>
                <td>4 testing</td>
            </tr>
            <tr>
                <td>5 testing</td>
            </tr>
            <tr>
                <td>6 testing</td>
            </tr>
            <tr>
                <td>7 testing</td>
            </tr>
            <tr>
                <td>8 testing</td>
            </tr>
            <tr>
                <td>9 testing</td>
            </tr>
            <tr id="ten">
                <td>10 testing</td>
            </tr>
            <tr>
                <td>11 testing</td>
            </tr>
            <tr>
                <td>12 testing</td>
            </tr>
            <tr>
                <td>13 testing</td>
            </tr>
            <tr>
                <td>14 testing</td>
            </tr>
        </table>
    </div>
    </body>
    </html>
    You'd just have to output an id into each tr but that shouldn't be a problem and then when refreshed attach the fragment identifier to the page reload destination.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!


    Your reply is greatly appreciated. I'll give this a try right now.


    Thanks again!

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Paul is :target new to CSS3?
    Ryan B | My Blog | Twitter

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,528
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes it's a useful css3 pseudo class which comes in handy for showing users where they have jumped to in a page because you can add a highlight to the target (or other styles as required). It's not supported in IE as yet but Safari, Opera and webkit support it.

    http://www.w3.org/TR/css3-selectors/#target-pseudo


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
  •