WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: The Magic Scrollable Div Generator

for

Number of posts in this thread: 1 (In chronological order)

From: Bryan Garaventa
Date: Thu, Jan 12 2012 9:36AM
Subject: The Magic Scrollable Div Generator
No previous message | No next message

I was looking around for a simple scrollable div generator script that didn't require any plugins and automatically supported keyboard functionality, and wasn't able to find one; so I wrote this to do exactly that. It's available at
http://whatsock.com/modules/the_magic_scrollable_div_generator.js
Which is just the JavaScript code.

The script automatically enables keyboard support for a scrollable div, specifically, all arrow keys, PageUp/PageDown, and Home/End.

This is how it works. Say you have a similar div on your page as the following:

<div id="anything" style="width: 100px; height: 20px; overflow: auto;">
<div class="firstChildNode">
Content Line 1<br />
Content Line 2<br />
Content Line 3
</div>
</div>

All scrollable content should be within the firstChildNode (the class name doesn't matter).

To enable keyboard functionality, you just do the following:
// For a vertical scroller
scrollableDiv(document.getElementById('anything'));
// or for a horizontal scroller
scrollableDiv(document.getElementById('anything'), true);
// And that's it.
It just needs to be set once, and resizing the window won't change anything, since the values are calculated on the fly.

I can't see the view moving about, but the numbers for scrollTop/scrollLeft all appear to be updating correctly.

You can see a working example of this at
http://planner.whatsock.com

Simply Tab to the Help icon (first in the tab order) and press Enter.
Focus will automatically be placed on the scrollable div, where you can use Up/Down/Left/Right/PageUp/PageDown/Home/End to control the view.

Enjoy,
Bryan