Add Touch Scrolling to HTML Tables

At the company I work for, Virtusa, we often encounter scenarios where a client has an existing WCM or other web-enabled solution that they want to expose to mobile devices.  In these cases, it is not enough to just point your mobile browser to an existing URL and have at it.  Such an experience is quite lacking from a mobile device standpoint (see my post on The Myth of WORA).

In order to achieve some semblance of a decent experience for phones and tablets, certain things need to happen.  The layout needs to be tailored per device class.  Buttons may need to be made larger.  Navigational elements may need to change.  And scrolling is a big, big, issue.

Browsers such as Mobile Safari allow you to two-finger scroll any html tags that typically show scroll bars on a desktop browser.  Despite this feature, a) nobody wants to scroll with two fingers – it is not a common practice, b) nobody knows to scroll with two fingers – it is not a common practice, and c) it doesn’t work well – it’s choppy and sometimes unresponsive.

Now, if you are fortunate enough to be able to write or rewrite web apps from scratch, this challenge is not without many solutions.  You can, for instance, easily scroll areas marked up with <div> tags, using popular frameworks, such as Sencha Touch or jQuery Mobile.  There’s even the very popular, lightweight, iScroll 4 that can assist with this specific issue.

But what if your hands are tied and you have some Content Management system that’s creating tables of information using the old HTML standby, <table> tags?  In such a scenario, you’re out of luck, since none of the aforementioned frameworks or libraries work on tables.  In such a situation, you can, however, almost always inject JavaScript and CSS into the existing HTML by using <script> and <link> tags, respectively.

That got me thinking.  I could try to intercept one finger gestures and convert them into two finger events when the finger is touching the tables we want to scroll.  However, after looking into it a little bit, this is not as trivial as it may seem.  The two finger events are, according to Apple, mousewheel events, and good luck in finding any information on how to generate them using JavaScript.

So, that led me to what may be a ‘hack’ solution, but which will work, nonetheless.  Here’s what I’ve come up with:

- Use CSS to hide the existing table, like so:

#existingTableId
{
    display: none;
}

- Parse through the table elements; first the table body (<tbody>), then the rows (<tr>), then the cells (<td>), and store them in an array, surrounding them with <div> tags:

// Iterate through existing table
var existingTable = document.getElementById('existingTable');
var tableBody = existingTable.getElementsByTagName('tbody');
var tableRow = tableBody[0].getElementsByTagName('tr');
for (var i = 0; i < existingTable.rows.length - 1; i++)
{
    var td = tableRow[i].getElementsByTagName('td');
    var currentRow = document.createElement('div');
    for (var j = 0; j < td.length; j++)
    {
        var currentCell = document.createElement('div');
        currentCell.className = 'tableCell';
        currentCell.innerHTML = td[j].innerHTML;
        currentRow.appendChild(currentCell);
    }
    newRow[i] = currentRow;
}

- Iterate over the array, placing the <div> tags in the DOM

// Add new rows as children of the page
var page = document.getElementById('page');
for (var i = 0; i < newRow.length; ++i)
{
    page.appendChild(newRow[i]);
}

- Use an out of the box scrolling solution to scroll the newly created <div> tags, according to its documented usage.  In the demo code, I have used a very new, very simple (yet excellent) solution by Joe Hewitt called Scrollability, but you can use whatever suits your needs.

That’s it – not so bad, was it?  Now I know this isn’t the best JavaScript code – I’ll clean it up using proper techniques later.  I just cobbled together a quick and dirty solution to prove to myself that it will work.  And in actuality, that’s really not all there is to it.   Of course, there are other things to contend with, such as table headers, fixed columns, fixed headers, getting the layout “just right”, and so on. But it’s a start, and it proved to myself that it could be done.  For a working demo that you can ‘view source’ on, go to: http://elemdage.com/scrolltest.  [Note: in this example, the scrolling will only work with touch events, so desktop users are out of luck]

Has anyone else run into similar scenarios?  If so, what solution have you come up with?  I’d love to hear about them in the Comments section, below.  Also feel free to chime in if you think I’m off my rocker with this solution!

This entry was posted in Technology and tagged , . Bookmark the permalink.

3 Responses to Add Touch Scrolling to HTML Tables

  1. Ann says:

    This is a very informative post! Keep it up.

  2. Mike Irving says:

    This is an interesting way of doing it. I am having a bad time applying this to a page of content consisting of tables within tables – nightmare!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>