I want to scroll without a scrollbar (in a table element/cell)

Question

I'm building a Seam application and we've been using Richfaces for the front end.

In my application, I have a rich:dataTable, and in that dataTable, I have a column in which the values are longer than the column width.

What I would like to do is to be able to scroll in that table-cell.. without having to use the scrollbar.

For example, say I have the value "aReallyLongValue" in my table-cell. In this case, you would then see this:

-----------
| aReallyl|
-----------

I'd like to be able to click on the value, and by holding down the left (or primary) mouse button, scroll to the right to be able to see the rest of the value. If I ended up scrolling all the way to the right, I'd see the following (but selected, of course).

-----------
|LongValue|
-----------

(My other problem is of course that something in the richfaces CSS is disabling the scrollbar in the first place, but that's for another time/question).

We're not married to richfaces, so if other (JSF) frameworks solve this problem, please let me know.

Answer 1

What you describe almost sounds like more of a 'drag' operation than a 'scroll'. You might look into the JQuery or Mootool element dragging options.

The other option would be to use javascript to scroll the content left onclick, but I don't know if you have a different need for a click event that requires your click and hold (the click and hold could also invoke a scroll event).