[jQuery] Re: Trying to grasp basics of scrolling a TBODY
Cool, Glad you got it sorted out. JK From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Kenneth Downs Sent: Wednesday, November 05, 2008 5:06 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Trying to grasp basics of scrolling a TBODY Jeffrey Kretz wrote: Ken, Do you have a test case page online somewhere I could take a look at? I've successfully implemented a scrollTo-type function using offsets and rows, and if I can see the page you're working with I might be able to suggest something. Jeffrey, thanks but I actually figured it out. I made up a simple test, which I'll be happy to post probably tomorrow. What I realized is that there were a few more steps than I thought. I had figured that a TR would get an offset() automatically with respect to its TBODY. Instead I found I had to get the offset() (or position, I forget which one) for several items, and do a little arithmetic to get the position of the TR relative to its TBODY. Once I figured that out the remaining arithmetic was fairly straightforward. Also I realized I had to take into account the height of the TR, otherwise I would scroll to the top of it and it would still be invisible :) JK From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Kenneth Downs Sent: Sunday, November 02, 2008 3:58 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Trying to grasp basics of scrolling a TBODY Dan Switzer wrote: Ken, I'm trying to grasp the basics of scrolling to a particular row in a TABLE. Let's say you've got a TABLE, with a TBODY that has a fixed height and overflow: scroll. It appears I ought to be able to use core functions like offset() and scrollTop() to work out where a row is and scroll the TBODY to that position, but lots of trial and error has left me lost on why these things don't seem to work as I expect. The particular case I am looking at involves the user using arrow keys to navigate up and down. Its easy enough to use .next() to highlight the next row, but if a user keeps doing it, and the next row is below the viewable scroll region, I need to be able to slide up the display to show the highlighted row. This is an educational venture, not a practical one, I'd like to understand it myself, not find and use a plugin that does it already. Scrolling with the TBODY tag is spotty. IE6 doesn't support it at all--you need to place your table in a DIV that has a fixed height and overflow set to scroll. Thankfully I have no interest in IE 6 :) I currently have the DIV system you describe. My best construction of why it does not work is this: 1) There is a div that represents "TBODY". It has "clear:both" as a CSS row 2) Each row is a div inside of the "TBODY" div 3) Each "cells" must be a div, firefox does not support widths on spans (don't know about IE, doesn't matter if firefox won't do it) 4) The "cells" must be float: left 5) ...and at the end I get .offset() returning meaningless numbers for the "row" divs. All divs in the body return 0 as the offset. 6) For good measure, the .scrollTo() extension does not work at all on this simulated TABLE, which I suspect is related to these bogus numbers. 7) I *think* the clear:both on the "tbody" div is causing this, but I really don't know So I monkeyed up a TABLE by hand and found all of the .offset() and related functions appear to be giving real results, I just can't quite connect the dots on how to put it all together. FWIW, the only reason I used the entire simulated TABLE was because IE 7 does not support onclick() on a TR. But I can just as well put the onclick on TD elements and get where I need to go using a TABLE, if only I could connect the dots on the scrolling stuff. I'm not sure what browsers you're targeting, but if IE6 was one you were having problems with, this is why. -Dan -- Kenneth Downs Secure Data Software, Inc. www.secdat.comwww.andromeda-project.org 631-689-7200 Fax: 631-689-0527 cell: 631-379-0010 -- Kenneth Downs Secure Data Software, Inc. www.secdat.comwww.andromeda-project.org 631-689-7200 Fax: 631-689-0527 cell: 631-379-0010
[jQuery] Re: Trying to grasp basics of scrolling a TBODY
Jeffrey Kretz wrote: Ken, Do you have a test case page online somewhere I could take a look at? I've successfully implemented a scrollTo-type function using offsets and rows, and if I can see the page you're working with I might be able to suggest something. Jeffrey, thanks but I actually figured it out. I made up a simple test, which I'll be happy to post probably tomorrow. What I realized is that there were a few more steps than I thought. I had figured that a TR would get an offset() automatically with respect to its TBODY. Instead I found I had to get the offset() (or position, I forget which one) for several items, and do a little arithmetic to get the position of the TR relative to its TBODY. Once I figured that out the remaining arithmetic was fairly straightforward. Also I realized I had to take into account the height of the TR, otherwise I would scroll to the top of it and it would still be invisible :) JK *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On Behalf Of *Kenneth Downs *Sent:* Sunday, November 02, 2008 3:58 PM *To:* jquery-en@googlegroups.com *Subject:* [jQuery] Re: Trying to grasp basics of scrolling a TBODY Dan Switzer wrote: Ken, I'm trying to grasp the basics of scrolling to a particular row in a TABLE. Let's say you've got a TABLE, with a TBODY that has a fixed height and overflow: scroll. It appears I ought to be able to use core functions like offset() and scrollTop() to work out where a row is and scroll the TBODY to that position, but lots of trial and error has left me lost on why these things don't seem to work as I expect. The particular case I am looking at involves the user using arrow keys to navigate up and down. Its easy enough to use .next() to highlight the next row, but if a user keeps doing it, and the next row is below the viewable scroll region, I need to be able to slide up the display to show the highlighted row. This is an educational venture, not a practical one, I'd like to understand it myself, not find and use a plugin that does it already. Scrolling with the TBODY tag is spotty. IE6 doesn't support it at all--you need to place your table in a DIV that has a fixed height and overflow set to scroll. Thankfully I have no interest in IE 6 :) I currently have the DIV system you describe. My best construction of why it does not work is this: 1) There is a div that represents "TBODY". It has "clear:both" as a CSS row 2) Each row is a div inside of the "TBODY" div 3) Each "cells" must be a div, firefox does not support widths on spans (don't know about IE, doesn't matter if firefox won't do it) 4) The "cells" must be float: left 5) ...and at the end I get .offset() returning meaningless numbers for the "row" divs. All divs in the body return 0 as the offset. 6) For good measure, the .scrollTo() extension does not work at all on this simulated TABLE, which I suspect is related to these bogus numbers. 7) I *think* the clear:both on the "tbody" div is causing this, but I really don't know So I monkeyed up a TABLE by hand and found all of the .offset() and related functions appear to be giving real results, I just can't quite connect the dots on how to put it all together. FWIW, the only reason I used the entire simulated TABLE was because IE 7 does not support onclick() on a TR. But I can just as well put the onclick on TD elements and get where I need to go using a TABLE, if only I could connect the dots on the scrolling stuff. I'm not sure what browsers you're targeting, but if IE6 was one you were having problems with, this is why. -Dan -- Kenneth Downs Secure Data Software, Inc. www.secdat.com <http://www.secdat.com>www.andromeda-project.org <http://www.andromeda-project.org> 631-689-7200 Fax: 631-689-0527 cell: 631-379-0010 -- Kenneth Downs Secure Data Software, Inc. www.secdat.comwww.andromeda-project.org 631-689-7200 Fax: 631-689-0527 cell: 631-379-0010
[jQuery] Re: Trying to grasp basics of scrolling a TBODY
Ken, Do you have a test case page online somewhere I could take a look at? I've successfully implemented a scrollTo-type function using offsets and rows, and if I can see the page you're working with I might be able to suggest something. JK From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Kenneth Downs Sent: Sunday, November 02, 2008 3:58 PM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Trying to grasp basics of scrolling a TBODY Dan Switzer wrote: Ken, I'm trying to grasp the basics of scrolling to a particular row in a TABLE. Let's say you've got a TABLE, with a TBODY that has a fixed height and overflow: scroll. It appears I ought to be able to use core functions like offset() and scrollTop() to work out where a row is and scroll the TBODY to that position, but lots of trial and error has left me lost on why these things don't seem to work as I expect. The particular case I am looking at involves the user using arrow keys to navigate up and down. Its easy enough to use .next() to highlight the next row, but if a user keeps doing it, and the next row is below the viewable scroll region, I need to be able to slide up the display to show the highlighted row. This is an educational venture, not a practical one, I'd like to understand it myself, not find and use a plugin that does it already. Scrolling with the TBODY tag is spotty. IE6 doesn't support it at all--you need to place your table in a DIV that has a fixed height and overflow set to scroll. Thankfully I have no interest in IE 6 :) I currently have the DIV system you describe. My best construction of why it does not work is this: 1) There is a div that represents "TBODY". It has "clear:both" as a CSS row 2) Each row is a div inside of the "TBODY" div 3) Each "cells" must be a div, firefox does not support widths on spans (don't know about IE, doesn't matter if firefox won't do it) 4) The "cells" must be float: left 5) ...and at the end I get .offset() returning meaningless numbers for the "row" divs. All divs in the body return 0 as the offset. 6) For good measure, the .scrollTo() extension does not work at all on this simulated TABLE, which I suspect is related to these bogus numbers. 7) I *think* the clear:both on the "tbody" div is causing this, but I really don't know So I monkeyed up a TABLE by hand and found all of the .offset() and related functions appear to be giving real results, I just can't quite connect the dots on how to put it all together. FWIW, the only reason I used the entire simulated TABLE was because IE 7 does not support onclick() on a TR. But I can just as well put the onclick on TD elements and get where I need to go using a TABLE, if only I could connect the dots on the scrolling stuff. I'm not sure what browsers you're targeting, but if IE6 was one you were having problems with, this is why. -Dan -- Kenneth Downs Secure Data Software, Inc. www.secdat.comwww.andromeda-project.org 631-689-7200 Fax: 631-689-0527 cell: 631-379-0010
[jQuery] Re: Trying to grasp basics of scrolling a TBODY
Dan Switzer wrote: Ken, I'm trying to grasp the basics of scrolling to a particular row in a TABLE. Let's say you've got a TABLE, with a TBODY that has a fixed height and overflow: scroll. It appears I ought to be able to use core functions like offset() and scrollTop() to work out where a row is and scroll the TBODY to that position, but lots of trial and error has left me lost on why these things don't seem to work as I expect. The particular case I am looking at involves the user using arrow keys to navigate up and down. Its easy enough to use .next() to highlight the next row, but if a user keeps doing it, and the next row is below the viewable scroll region, I need to be able to slide up the display to show the highlighted row. This is an educational venture, not a practical one, I'd like to understand it myself, not find and use a plugin that does it already. Scrolling with the TBODY tag is spotty. IE6 doesn't support it at all--you need to place your table in a DIV that has a fixed height and overflow set to scroll. Thankfully I have no interest in IE 6 :) I currently have the DIV system you describe. My best construction of why it does not work is this: 1) There is a div that represents "TBODY". It has "clear:both" as a CSS row 2) Each row is a div inside of the "TBODY" div 3) Each "cells" must be a div, firefox does not support widths on spans (don't know about IE, doesn't matter if firefox won't do it) 4) The "cells" must be float: left 5) ...and at the end I get .offset() returning meaningless numbers for the "row" divs. All divs in the body return 0 as the offset. 6) For good measure, the .scrollTo() extension does not work at all on this simulated TABLE, which I suspect is related to these bogus numbers. 7) I *think* the clear:both on the "tbody" div is causing this, but I really don't know So I monkeyed up a TABLE by hand and found all of the .offset() and related functions appear to be giving real results, I just can't quite connect the dots on how to put it all together. FWIW, the only reason I used the entire simulated TABLE was because IE 7 does not support onclick() on a TR. But I can just as well put the onclick on TD elements and get where I need to go using a TABLE, if only I could connect the dots on the scrolling stuff. I'm not sure what browsers you're targeting, but if IE6 was one you were having problems with, this is why. -Dan -- Kenneth Downs Secure Data Software, Inc. www.secdat.comwww.andromeda-project.org 631-689-7200 Fax: 631-689-0527 cell: 631-379-0010
[jQuery] Re: Trying to grasp basics of scrolling a TBODY
Ken, I'm trying to grasp the basics of scrolling to a particular row in a > TABLE. > > Let's say you've got a TABLE, with a TBODY that has a fixed height and > overflow: scroll. > > It appears I ought to be able to use core functions like offset() and > scrollTop() to work out where a row is and scroll the TBODY to that > position, but lots of trial and error has left me lost on why these > things don't seem to work as I expect. > > The particular case I am looking at involves the user using arrow keys > to navigate up and down. Its easy enough to use .next() to highlight > the next row, but if a user keeps doing it, and the next row is below > the viewable scroll region, I need to be able to slide up the display > to show the highlighted row. > > This is an educational venture, not a practical one, I'd like to > understand it myself, not find and use a plugin that does it already. > Scrolling with the TBODY tag is spotty. IE6 doesn't support it at all--you need to place your table in a DIV that has a fixed height and overflow set to scroll. I'm not sure what browsers you're targeting, but if IE6 was one you were having problems with, this is why. -Dan
