...

View Full Version : Display Problem!



arpan_de
09-21-2005, 10:11 PM
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/atlantic/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

nikkiH
09-21-2005, 10:39 PM
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;
}

arpan_de
09-22-2005, 03:40 AM
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

glenngv
09-22-2005, 07:50 AM
As an additional information, you can add tooltip in each cell indicating the column header it belongs.

<td title="S.NO.">...</td>
<td title="JOB NO.">...</td>
<td title="BILL NO.">...</td>
...

nikkiH
09-22-2005, 02:47 PM
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)

arpan_de
09-22-2005, 04:07 PM
Yeah.....Nikki.......it's working fine now.........exactly as how I wanted it :-)

Thanks a lot......

Regards,

Arpan

arpan_de
09-24-2005, 12:46 AM
As an additional information, you can add tooltip in each cell indicating the column header it belongs.

<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum