The Life Sciences Foundation’s website (www.lifesciencesfoundation.org – recently built and launched by Workbox) showcases important events, people, discoveries and organizations in the life sciences from the 18th century to the present. One of LSF’s goals was to create a dynamic, scrolling timeline feature that would give users an idea of the site’s subject matter, emphasize the presentation of “years and events” and help users quickly click into content.
We were all originally inspired by Google’s corporate timeline and all the great, free stuff they provide, but we needed to add a bit more functionality and design grooviness – and every bit of content, from the images to dropdown menus, had to be managed through our PHP-based content management system.
Ultimately, we decided to build the basic functionality using the jQuery Draggable plugin and jQuery UI animation plugin. Workbox’s technical architect, Kirill Egorov, decided not to use Sencha Touch and jQuery Mobile solutions as they he felt that were too complicated and cumbersome for our purposes. So, a simpler solution was found. We’re going to show the code that specifically handles dragging/listing.
Identifying the device (function IsTouch):
if( navigator.userAgent.indexOf(“iPhone”) != -1 ) {
return true;
}
if(navigator.userAgent.indexOf(“iPad”) != -1 ) {
return true;
}
var userag = navigator.userAgent.toLowerCase();
var isAndroid = userag.indexOf(“android”) > -1;
if(isAndroid) {
return true;
}
return false;
}
We also used the jQuery Touch plugin, but it had to be modified because the start position of the “timeline” layer didn’t work correctly for our “move” event. Originally in the plugin, the start position of the layer to drag was defined as follows:
In the “touch” method we rewrote the piece that has to do with calculating the shift for “left” position:
Replacing this line:
with these
_left = _startData[0] -(_startPos[0] – this.pageX);
} else{
_left = _startData[0] +( this.pageX – _startPos[0]);
}
_startPos[0] — position of the pointer at “touchstart” event
_startData[0] —shift of the left position for the dragged layer at “touchstart”
Finally, this is how we initialize the component:
if(isTouch()){
setInterval(checkOrientAndLocation,1000);
handle.touch({
animate: false,
sticky: true,
dragx: true,
dragy: false,
rotate: false,
resort: false,
scale: false
});
}else{
handle.draggable({ axis: “x”,stop:posTimeline });
}
As a result, the timeline scrollbar works on IOS and Android mobile browsers!
Please feel free to use this stuff, give us feedback and send us links to stuff you’re built using it!
Cheers, Kirill Egorov, Gleb Aksyutchenko