Touch Event Support for jQuery UI
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)
Highlights of Week 25/2011
- Colors in Web Design: An Exploration (by Kayla Knight) - in-depth reflection about color theory
- Top 10 Project Management Software for Remote Teams (by Rean) - exactly what the title says
- An Exploration of Website Redesigns: Tips and Examples (by Mohammad Moradi) - make a plan and consider doing it at all (sometimes)
- #19: Sketchnotes (by Eva-Lotta Lamm) - inspiring perspective on taking notes that aren't boring
- 10 Big Brand Lessons From The Corporate Social Media Summit (by Rohit) - talking about brands and their approaches to success
- Getting to grips with a mobile accessibility strategy (by iheni) - great approach on trying to establish a mobile accessibility strategy
- 5 Dangerous Ideas for Designers (by Scott Berkun) - be an ambassador of good ideas and sell and defend them to the right people at the right time
- HOW TO: Choose a PHP Framework for Your Next Project (by Kelli Shaver) - pick your weapons...
- Brainstorming Tips and Techniques for Freelancers (by Samar Owais) - in the end it all depends on you and how you set up the rules, but good tips in here
Highlights of Week 20/2011
- How to Create a Clean 3D Button in Photoshop (by Madalin Tudose) - nice tutorial and result
- Effective Website Help Systems: Tips and Examples (by Mohammad Moradi) - essential tips and best practices for designing effective help pages
- 10 handy jQuery mobile tips and snippets to get you started (by Patrick McNeil) - gotta love jQuery mobile, nice tips for its usage
- 6 Lessons From Jim Collins On Becoming Great (by Rohit) - yes, turn off your gadgets
- Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials (by bellefoong) - simply put: beautiful
- Flashback: Every time you add something you take something away (by Jason Fried) - be aware of it of this paradox!!
Highlights of Week 16/2011
- Using “Preventive Medicine” Against Bad Clients (by Maria Malidaki) - Love the section about useful documents
- Accessibility and web innovation – a talk (by Christian Heilmann) - Chris makes a case for deeper involvement in the actual development of cool technology that is accessible (or cool development that makes technology accessible)
- Architecture v. Web Design (by Dmitry Fadeyev) - Dmitry on the essence of architecture to create space and how this is (or is not) applied to web design
- What’s new for web designers – Apr 2011 (by Cameron Chapman) - Once again, great collection of apps for designers, thx Cameron
- Are your users S.T.U.P.I.D? (by Stephen Turbek) - Get Smart (and download the info poster)
- Essential Facebook Etiquette: 10 Dos and Don’ts (by bellefoong) - Funny how we need to learn social etiquette again, huh?
- How To Design The Perfect Form (by Brian) - Extensive collection of examples and best practices for forms
- Integrating UX into Agile Development (by Janet M. Six) - State your requirements as user stories: As a [role], I want to [action based on a feature], so [user goal].
- Mobile Application Development: Web vs. Native (by Andre Charland, Brian LeRoux) - Excellent research on web versus native development for mobile. Sooner or later we all need to understand the ins and outs of mobile dev.
- A new micro clearfix hack (by Nicolas Gallagher) - updated hack to clear floats without resorting to using presentational markup
- Web Developers vs. Web Developers (Infographic Remix) (by Cassie McDaniel) - nice remix of the original web designers vs web developers infographic by Shane Snow
Web GIS: Principles and Applications [Paperback]
Web GIS
I'm happy to introduce a new book which was co-authored by my colleague Pinde Fu: "Web GIS: Principles and Applications".
I'm really excited about this, not only because good GIS resources are scarce but also because he used screenshots of applications that I have designed over the past years, e.g. geodata.gov, GeoPortal Toolkit, Loma Linda Medical Center Response System, HydroViewer.
How much better can it get when your design ends up in a book?
Audience
While the content of the book is targeted at readers at all skill levels I can see it as a great teaching source as well as invaluable resource for managers and aspiring GIS developers to understand the principles of web applications.
Content
The content of the book is focused on the conceptual level (you won't find code samples) by trying to be systematic and as comprehensive as possible which I believe was done superbly. Nevertheless the authors do cover important new developments like geospatial Web services (REST), geobrowsers, cloud computing, geoportals, mashups, mobile GIS, Gov 2.0, geotagging, ArcGIS APIs for JavaScript, Flex, and Silverlight.
Table of Contents
- GIS in the Web Era
- Technical Basics
- Geospatial Web Services
- Geospatial Mashups
- Mobile GIS
- Geoportals
- NSDI in the Web 2.0 Era
- Web GIS Applications in E-Business
- Web GIS Applications in E-Government
- Hot Topics and New Frontiers
Highlights of Week 38/2010
- What Websites Can Learn From Mobile (by Michael Wilson) - funny, but my take-away is that 'constraints improve creative design'
- The Perfect Web Designer Should Not Exist (by Jason Gross) - base your design decisions on your sites' target audience and their goals - nothing else matters... uuuhhhhhhh....
- 97 Things to Know about Usability (by Jeff Sauro) - fantastic, fantastic, fantastic - must read!!
- Top 5 Web Font Design Trends to Follow (by Christina Warren) - WOFF-WOFF, love to hear that dog barking..
Highlights of Week 32/2010
- Real Time Web Analytics Services – Best of (by hongkiat) - which web analytics service do you use?
- Guidelines for URI Design (by Jacob Gillespie) - URI structure is primarily important for user recognition and easy of use, search engine optimization is nice too.
- 8 Ways to Make Your Website Mobile Friendly (by Joel Reyes) - isn't it sweet that our mobiles will drive us towards better web development also? Something we should have been doing for a long time already?
- The ADA and the Web: Concerns and Misconceptions (by Jared Smith) - Is an accessibility law for e-commerce coming? Will this take the look of the web back to 1990? Jared has some nice Q&A there...
- Stop Designing Aesthetics, Start Designing Emotions (by John O’Nolan) - Design for emotions, definitely not a new concept but usually poorly covered. John takes a good stab on it.
- 5 Small Biz Web Design Trends to Watch (by Grace Smith) - Minimalism, Unique Photography, Bold Typography, Clear Calls to Action, A/B Testing - what more to say?
- iPad User Experience Guidelines (by UX Magazine) - with the source doc at Apple's Human Interface Guidelines for the iPad
About Me
Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.
He has been designing map application for over 10 years and can't stop thinking about improving them.
Categories
- Accessibility (16)
- Code Samples & Tips (15)
- Conclusions (6)
- Design Guidelines (12)
- Designing Map Interfaces (5)
- Go figure (9)
- Good News (25)
- Here and there (29)
- Map Applications (12)
- This Week's Highlights (53)
- Usability & UCD (27)
- Web Design (28)
Popular Posts
- 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
- Dashboard Design
