Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display Problem!

    I have an ASP page which retrieves 100 records from the database. All the 100 records are displayed in one page is a HTML table.

    Now since all the 100 records are being displayed in one page, when a user scrolls down the page, the headers of the different columns no longer remain visible. In other words, to have a look at the column names, one has to again go to the top of the page. Since the column headers aren't visible as the page is scrolled down, users don't get to know to which column a particular record belongs to (there are 21 columns in total).

    To overcome this, I have included a JavaScript code which ensures that when the page is scrolled down, the column headers also scroll down so that users can see to which column a record belongs to. Please note that these column headers should be visible only when the page is scrolled down. When the user is at the top of the page, there is already a static row of column headers which is the very first row in the HTML table. Please have a look at http://www17.brinkster.com/arpand/at.../job2/test.asp to get an idea of my problem.

    As such, JavaScript has resolved my problem but there is a minor hitch. When you visit the above mentioned URL, you will find that the row of column headers (which should actually scroll down/up but shouldn't be displayed when the user is at the top of the page) can be seen as the page is loading. Once the page gets loaded completely, this row of column headers disappears & only when a user starts scrolling down, that row of column headers appears. I don't want that row of column headers to appear when the page is being loaded. It should only appear when users no longer can see the static column headers (first row of the HTML table).

    That row of column headers is enclosed within <div id="headerfloat"></div> which in turn is in another HTML table whose id="ln". To ensure that that row of column headers doesn't appear when the page is loading, I added the following function in the body's onLoad event:

    <script language="JavaScript">
    function hideDiv(){
    headerfloat.style.visibility="hidden"
    ln.style.visibility="hidden"
    }
    </script>
    <body onLoad="hideDiv()">


    but this doesn't do the needful.

    How do I ensure that when the page is loading, that row of column headers (which should scroll down/up but shouldn't be displayed when the user is at the top of the page) remains hidden/invisible to the user?

    Thanks,

    Arpan

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Set the css to be hidden in real css, not script. The script sets it to visible/block once it is needed.

    #headerfloat {
    visibility: hidden;
    display: none;
    }

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Nikki, for your suggestion. I added the following code snippet in a CSS file

    <style>
    #headerfloat{
    visibility:hidden;
    display:none;
    }
    </style>


    & included that CSS in my ASP page. That does hide the row of column headers when the page is loading but that row remains hidden even if the page is scrolled down!

    I want that row of column headers to remain hidden when the page is getting loaded but it should be visible if the page is scrolled down.

    I even added that CSS code snippet directly in my ASP page under the <style></style> tags but the end result is the same!

    Any other suggestion??

    Thanks once again,

    Regards,

    Arpan

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    As an additional information, you can add tooltip in each cell indicating the column header it belongs.
    Code:
    <td title="S.NO.">...</td>
    <td title="JOB NO.">...</td>
    <td title="BILL NO.">...</td>
    ...
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    You need to set it to visible and unhide it with script when you want it.

    headerfloat.style.visibility="visible"
    headerfloat.style.display="block" (or inline, whichever you want)

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #6
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah.....Nikki.......it's working fine now.........exactly as how I wanted it :-)

    Thanks a lot......

    Regards,

    Arpan

  • #7
    New Coder
    Join Date
    Sep 2002
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv
    As an additional information, you can add tooltip in each cell indicating the column header it belongs.
    Code:
    <td title="S.NO.">...</td>
    <td title="JOB NO.">...</td>
    <td title="BILL NO.">...</td>
    ...

    That's not a bad idea, Glen :-) I wish I could have asked my question before creating that moveable row of column header? Had I known that <td title="JOB NO.">...</td> would have served my purpose, I wouldn't have gone for that moveable row of column header. Anyways, better late than never.

    Thanks,

    Regards,

    Arpan


  •  

    Posting Permissions

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