Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

How to Detect the Highlighted Row Has Reached the Top of a Table?  RSS feed

 
JiaPei Jen
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a table enclosed in a <div ...>. There is a heading in the table and the table has hundreds of rows.

Because I set the height of the <div ...>, only 10 rows can be viewed at a time. I have put a highlighter in the table. When users use the keyboard downward/upward arrow keys, the next row is highlighted. I have also managed to scroll the next set of 10 rows (11th row to 20th row, etc.) into the viewing area; i.e. div.scrollTop.

But, if I am moving highlighter up, I am not supposed to scroll the next set of 10 rows (it is one of client requirements). I have to scroll row by row.

How do I detect that the highlighted row is at the top of the viewing area? I have seen "offsetTop", "offsetParent", etc. but do not know how to use those methods. Please help.
 
Akhilesh Trivedi
Ranch Hand
Posts: 1608
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are your rows dynamic? I mean are they in jsp, how have you set-up the highlighter, using javascript with ids on the tr tags or...
 
JiaPei Jen
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Although the web page is coded in JSF, the table, once constructed using the data that are retrieved from the database, is not a dynamic one.

I use the JavaScript to highlight rows of the table. In JSF, I have:

In JavaScript, I have:
 
JiaPei Jen
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is the way I coded:


But if the highlighted row is not the "top row" in the viewing area that is set by the div, I do not want any scrolling to happen. I only want the next row that is right above the current row to be highlighted.

I want the scroll to happen (i.e., the next row above to be "scrollIntoView" ) when the highlighted row is the "top row".

This is why I want to test if the current row is at the top in the viewing area.

Please help if you know how to do it. Thank you.
 
Akhilesh Trivedi
Ranch Hand
Posts: 1608
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Jiapei, I wish i could help you. i was understanding it to be more of HTML/javascript issue. I am new to JSF, and i am not aware how JSF and javascripts are linked and I am stuck there.
 
JiaPei Jen
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It is entirely a JavaScript issue. The presence of JSF does not have any impact on the problem that I am trying to solve.
 
Alec Lee
Ranch Hand
Posts: 569
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sound interesting. Are you trying to pre-load 100 <tr>'s in between your <table></table> and hide some of those <tr>s by javascript? If yes, how are you going to display only, say, the 21th- 29th <tr>s while making sure the 1st-20th and 30th-100th rows occupy no space in the table?
 
JiaPei Jen
Ranch Hand
Posts: 1309
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am not hiding any <tr>. See the code of the very first posting of this thread -- there is a <div> outside the <table> ... </table>. I set the height and width of the <div> with scrollbars. This is why I ask 'scroll' related questions.
 
Alec Lee
Ranch Hand
Posts: 569
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I've spent some time playing around with the offsetTop/scrollTop properties. It seems that these are what you are after:

 
Consider Paul's rocket mass heater.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!