Michael Gaigg: Über UI/UX Design

24Apr1

Touch Event Support for jQuery UI

Posted by Michael Gaigg

Swipe

Swipe

Problem: jQuery UI doesn't support touch gestures

We are customizing a map application with swipe functionality which is based on some legacy code mash-up with dojo and jquery/jquery ui. Everything was nice and dandy until we tried swiping on the iPad for the first time. Bad awakening. jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that our mouse event simply don't work on touch devices. One might think the jQuery toolkit would take care of it... but no!

Solution:

Solution A: For every mouse/keyboard event, provide the equivalent touch event: touchstart, touchmove, touchend,...

Solution B: Use a hack called jQuery UI Touch Punch that adds simulated events (that mimic touch events) to your app and respond to the mouse events you already have in your app. It's really simple:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.js"></script>

Add the jquery and jquery ui libraries (if you don't have them already or if you use older versions) plus the reference to your local copy of the touch-punch file (download the Development version!!)

Solution C: Go to github and get the really nice swipe story map template which works "out of the box" (but didn't satisfy our complex requirements)

6Nov19

HTML5 Boilerplate

Posted by Michael Gaigg

HTML5

When starting a new project it will probably take you at least 15-20 minutes of getting your stuff together. Many times I found that exactly these routine tasks are the most annoying which keep us from being productive (and happy). So, go get the html5boilerplate.com and be happy :)

This project by 5 driven guys, Nicolas Gallagher, Hans Christian Reinl, Mathias Bynens, Paul Irish, Cãtãlin Mariş, and Divya Manian is a great starting point for any HTML based web development. Simply awesome!

The boilerplate bundle includes:

  • Directory structure (index file, img dir, js dir, css dir, etc.)
  • CSS reset using normalize.css
  • HTML5 feature detection through Modernizr
  • jQuery JavaScript framework (link to Google's CDN + local fallback)
  • Google Analytics snippet (just replace your own id)
  • Other really useful tips and tricks for better development
20Dec0

Highlights for Week 50/2011

Posted by Michael Gaigg

27Nov0

Highlights for Week 47/2011

Posted by Michael Gaigg

14Aug0

Highlights of Week 32/2011

Posted by Michael Gaigg

1Aug0

Highlights of Week 30/2011

Posted by Michael Gaigg

20May0

Highlights of Week 20/2011

Posted by Michael Gaigg

15Nov0

Highlights of Week 46/2010

Posted by Michael Gaigg

Anything I've missed?

Post it in the comments or drop me a note.

31Oct0

Highlights of Week 44/2010

Posted by Michael Gaigg

Page 1 of 212