E-mail List Archives

Search E-mail List Archives for

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

From: Bryan Garaventa
Date: Mon, Apr 30 2012 12:22AM
Subject: Accessible Lightbox, Banner, Tooltip, and Popup Templates
No previous message | No next message

Hi,
I've concentrated so much on the advanced control types, I forgot to add the simple ones. So I've added them.

The templates for accessible Lightbox, Banner, Tooltip, and Popup controls provide scalable AccDC Object declarations to automate accessibility for screen reader and keyboard only users.

The demo page is available at
http://whatsock.com/modules/standard_dynamic_control_templates/demo.htm
and the package can be downloaded from
http://whatsock.com

The templates can be modified to fit the functionality or layout requirements of any related implementation by changing the template code accordingly, or by dynamically changing the properties within each instantiated AccDC Object at runtime.

They are also fully scalable, and can be used to render any type of content with the same level of accessibility.

Dynamic Localization is also supported, so that each control type can be rendered in any language, whether by hard coding keyword terms in the setup code, or by programmatically modifying the role, accStart, accEnd, and accClose properties at runtime.

The syntax for each of these AccDC Object template types is fully documented in the JS file at
http://whatsock.com/modules/standard_dynamic_control_templates/js/setup.js

Excerpt from the Tips and Tricks section:

All of the above AccDC Object types can be controlled programmatically, such as to open or close an object like so:
// Using the ID property of each AccDC Object, such as 'lightbox'
$A.reg.lightbox.open();

// Or using the ID 'popup'
$A.reg.popup.close();

Similarly, the functionality of AccDC Objects can be changed on the fly while maintaining the same level of accessibility, like so:

// Change the functionality of the Login lightbox to show a Registration lightbox instead
// First, change the role for screen reader users
$A.reg.lightbox.role = 'Register';

// Change the resource locator to point to another form container
$A.reg.lightbox.source = 'files/overlays.html #register1';

// Change the size and width to match the dimensions of the new lightbox
$A.reg.lightbox.cssObj.height = '400px';
$A.reg.lightbox.cssObj.width = '750px';

// Lastly, swap the runAfter function with another function so that event handlers can be properly registered when it opens
$A.reg.lightbox.runAfter = someOtherFunction;

// Now open the newly configured lightbox AccDC Object
$A.reg.lightbox.open();

All the best,
Bryan