Skip to content
This repository has been archived by the owner on Sep 14, 2022. It is now read-only.

API: JS: Touch Transitions

Jump to bottom
nateemerson edited this page May 21, 2011 · 5 revisions

WARNING: OVERHAUL

This library is currently slated to be overhauled due to the fact it relies on the deprecated webkit classification. A new version of the library is planned that runs on all full devices.

Description

Working along side the transition library (requiring it to be loaded), the touch_transitions library enables a user to guide transitions through the simple touch gesture of sliding a finger from a trigger entity at least 50% of the screen. This library leverages the Webkit browser engine for touch events and Javascript to drive the transitions. The requisite Webkit transitions library itself is a CSS 3 and JS driven library.

Intent

Provide a CSS class-based mechanism for delivering the expected rich response from a Webkit device of transitioning to another entity by sliding one's finger across the screen.

Implementation

Trigger and Target

The touch_transitions library leverages two entity classes to drive transitions. Both play a distinct and requisite role in forcing the triggering of a next/previous transition:

  • webkit-touch-transition-trigger :: when a user begins a touch event over the trigger entity, the system will listen to determine if the user has slid their finger far enough across the screen to warrant triggering a transition from the touch.
  • webkit-touch-transition-target :: when a transition is triggered by a touch event, entities encapsulated within a parent containing this definition will be transitioned according to the transition library.

Javascript Warning

Please note that at this time only the CSS entities employed by the touch_transitions library are considered backwards compatible. Attempting to use Javascript functions explicitly from the library is not recommended or supported and doing so may cause modules to break with future updates. Instead, please load the library and use the CSS entities defined, not the Javascript functions, as the CSS entities are ensured to remain compatible with future updates as the Javascript changes and evolves.

Example Code

To employ the framework's Javascript-driven transition library, the transitions library must be specified as a parameter in the script tag that includes js.php:

<script type="text/javascript" src="../assets/js.php?webkit_libs=transitions+touch_transitions"></script>

This is a basic example where, if the user slides a finger far enough across the X-axis anywhere on the screen (as webkit-touch-transition-trigger is defined on the <body>, then the transition where webkit-touch-transition-target is defined will be triggered:

<body class="webkit-touch-transition-trigger">
    {HEADER_AND_OTHER_CONTENT_MARKUP}
    <div class="content-elements webkit-transition-slideX webkit-touch-transition-target">
Clone this wiki locally