All Posts in jquery

April 18, 2014 - Comments Off on Lightweight Drag and Drop for iOS with CSS3 Translate

Lightweight Drag and Drop for iOS with CSS3 Translate

This post explores issues we experienced with a recent project, involving jQuery UI’s draggables and how we solved it using CSS3 translate and javascript touch events.

In the midst of full production, we discovered an issue with iPad handling the combination of jQuery UI “draggables” and high quality images (for using jQuery UI with iPad touch events).

As production had already begun, we needed a shim to would work alongside what was already built, and replace the jQuery UI functionality on iOS devices.

We performed tests, sectioning off the drag and drops from the rest of the project and realized that, even one large background image severely affected the performance of the dragging animation on iOS devices. Scale that up to a production size eLearning platform and we suffered serious memory bleeds, causing Mobile Safari to crash instantly.

We googled far and wide but could find no solution. (HTML5 drag and drop would not fit the bill as it would require rebuilding everything we had done so far.)

And so we resolved to build a jQuery plugin and were pleasantly surprised to discover this undertaking was much simpler than first anticipated. Not only that, but our solution meant that, aside from changing the script which controlled these activities, we did not have to change any of the markup already written for dozens of pages.

Development

This blog post was a great jumping off point, it had done much of the hard work for us, showing us how to tie a touch event to a moving element. Despite being a great resource, the script animates with the “top” and “left” properties. While these work on all platforms, they use a lot of CPU power, too much for the poor iPad. And so we updated the code to use CSS3 translate. This change was light and day. iOS webkit hardware accelerates CSS translates through the GPU and the performance improvement was significant.

Next we needed to add functionality to drop a “draggable” inside a “droppable”. This was done in two steps. First we added an initialization for “droppable” elements which would calculate the coordinates of the “droppable” and store these values in the data attribute of that element. Next we added an event handler for dropping an element, which finds if the last touch event occurred inside the bounds of a “droppable”. If this is the case, then we translate the “draggable” to sit on top of the “droppable”.

Along the way we added certain functionality specific to our project such as populating an object named “dragInput”, which contains the placement of any dragged items and can then be compared against another object which holds the correct matches for a quiz style drag and drop activity.

Conclusion

Since integrating this into our project, I have tried to extend the plugin by adding mouse event listeners. There are limitations, such as dropping an element when the mouse escapes the bounds, despite the ‘mousedown’ event still being active. I have seen this behavior elsewhere. jQuery UI must use event listeners on the window to make up for this deficiency. Although I bemoan jQuery UI’s use of pre-CSS3 techniques, having tried to replicate the functionality with mouse events, I appreciate the depth of their project. The touch events were comparatively robust and behaved as expected.

CSS transforms are very powerful and although confusing at first glance, they give web developers exciting possibilities for creating native like experiences within browsers. By using transforms, our drag activities went from crashing the iPad to outperforming jQuery UI draggables on a desktop.

I hope this post proves helpful and I will continue to develop the plugin, as time and persistence permit.

Check out the github here.

Published by: georgebrassey in The Programming Mechanism
Tags: ,

March 11, 2009 - 6 comments

Quest for the Right jQuery Lightbox

Lightbox, the technique of displaying large images in modal windows, has become a familiar UI element across the web. Since Lokesh Dhakar released it in 2006, many variations on Lightbox have popped up, each claiming their own strength: optimized code, easier implementation and/or slicker transitions. The current Lightbox 2 uses the Prototype and script.aculo.us JavaScript libraries, but I was looking for a jQuery version to fit my needs. Additionally, I was looking for something I could quickly implement out-of-the-box (so that I could better spend my time writing a blog post!). Here's how my decision was made:

thickbox
Thickbox
Thickbox, recommended to me by @kcdunstan is a very popular jQuery Lightbox and is even hosted on the jQuery website.

Pros: Can be used with images, inline content, iFrames (people still use iFrames?) and Ajax. Seems to have a good support community behind it; John Resig is known to respond to some support issues.
Why I didn't choose it: The out-of-the-box look doesn't have nice buttons and transitions.

jqmodal
jqModal
jqModal, recommended to me by @sstrudeau, is very much a bad-ass developer tool.

Pros: Very lightweight and customizable for the person who knows what he/she is doing. Can be used with images, inline content, iFrames and Ajax, and specializes in dialog alert boxes.
Why I didn't choose it: Way too complex for the specific project I'm working on. I'd want to use this on a highly-branded site where I've crafted a unique interface element instead of the familiar Lightbox we know and love. Also, I couldn't determine if there is an easy way to use this in "gallery" mode where I want Previous/Next buttons to go between a set of images.

prettyphoto2
prettyPhoto
I found prettyPhoto via a forum I found through a Google search. As the name states, it's a really nice looking Lightbox.

Pros: Really nice out-of-the-box styling options, and supports single or gallery photos. Good Web 2.0 rounded corners, and I like the buttons.
Why I didn't choose it: This was nearly my final choice, but I don't like the tab-like box above the photo for the title. The project I'm using will have a longer description for the title, and I want it below the picture. I would definitely use this for a gallery where the photos either have no title or short titles, though.

jquerylightboxplugin
jQuery lightBox plugin
The winner! jQuery lightBox plugin was the first one I researched, and then it was also recommended to me by @thetristan and @twenty3x. It's the closest match I've seen to the official Lightbox 2.

Why I chose it: Familiar Lightbox styling, nice transitions, gallery support; it's got what I want right out of the box.

In short, the requirements of your project will dictate which jQuery Lightbox you should use. jQuery lightBox plugin seems to behave the closest to Lightbox2, and jqModal is the most customizable and developer-centric. I would love to hear about any other jQuery Lightbox recommendations in the comments or respond to me on Twitter, @christyyyjoy.

EDIT: @pdenya sent along the Lightbox Clones Matrix which compares Lightboxes by library, size and features. Nice!

Published by: christygurga in The Programming Mechanism
Tags: ,

December 2, 2008 - 4 comments

NY Web Standards Meetup—Introduction to Kicking Ass with jQuery

Audio from last month's Introduction to Kicking Ass with jQuery presentation to the New York Web Standards Meetup by Scott Trudeau (Apartment Therapy Media). Thanks to everyone who attended!

Listen to this event

Part 1 of 3:
[audio:BarKode-Episode-8-KickingAsswithJQuery-part1of2.mp3]

Part 2 of 3:
[audio:BarKode-Episode8-KickingAsswithJQueryPartTwo.mp3]

Part 3 of 3:
[audio:BarKode-Episode8-KickingAsswithJQueryPartThree.mp3]

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

October 27, 2008 - Comments Off on NY Web Standards Meetup—Introduction to Kicking Ass with jQuery

NY Web Standards Meetup—Introduction to Kicking Ass with jQuery

The New York Web Standards Meetup Group will meet this Thursday (30 October 2008) at theMechanism at 7:00 pm.

Scott Trudeau (Apartment Therapy Media) will provide an introduction to the popular jQuery JavaScript library. If you have strong HTML/CSS skills, but your JavaScript experience has never gone much beyond "cut and paste," come learn how to use jQuery and jQuery plugins to create enhanced, dynamic user experiences for your sites.

Scott will provide an overview of using jQuery's DOM manipulation, animation and Ajax components.

30 October 2008 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact us if you'd like to present at the February or March 2009 meetup.

Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.

Published by: jeffreybarke in The Programming Mechanism
Tags: