jQuery Roundup: Auto-geocoder, Jade for jQuery, Swipe

Alex R. Young





jquery ui mobile plugins geo

jQuery Roundup: Auto-geocoder, Jade for jQuery, Swipe

Posted by Alex R. Young on .

jquery ui mobile plugins geo

jQuery Roundup: Auto-geocoder, Jade for jQuery, Swipe

Posted by Alex R. Young on .
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery Auto-geocoder

jQuery Auto-geocoder

jQuery Auto-geocoder (GitHub: tristandunn / jquery-auto-geocoder, License: MIT) by Tristan Dunn enables incremental search for Google Maps. A text input is displayed, and the results of a location search on Google's geocoding API are displayed in the map view.

$(function() {

The autoGeocoder method also accepts options -- for example, delay can be used to control how often locations will be geocoded, and initial contains the options used to create the map.

One thing I wanted to do when testing this plugin was allowing the marker to be dragged. As far as I can tell, there's no direct support for manipulating the resulting marker position. However, it's possible to bind to the events used by the plugin, then the listener will be in the right context to access the marker:

  initial: {
    zoom: 1
  , center: [34, 0]
  , draggable: true
  , mapTypeId: google.maps.MapTypeId.ROADMAP
  , mapTypeControl: false
}).bind('auto-geocoder.onGeocodeResult', function() {
  this.marker.draggable = true;

I had to write a similar interface widget once that allowed people to search for a location, then fine-tune the position.

Jade for jQuery

Jade for jQuery (License: MIT/GPL v2) by Jeremy Martin is a lightweight jQuery wrapper for Jade. Seeing as both of these technologies are all about CSS selectors, I've always felt like it makes sense to use them together. In my own work, Jade has formed the server-side templates. How does this look for a client-side template solution?

<script id='my-template' type='text/x-jade'>  
h1 Hello #{name}!  

<script type="text/javascript">  
$('#my-template').jade({ name: 'World' }).appendTo('body');

It's also possible to render string templates with $.jade(template, data).


Swipe screenshot

Hirvesh sent in Swipe (GitHub: bradbirdsall / Swipe, License: MIT/GPL) by Brad Birdsall:

Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.

It works with a series of elements inside a container, and the author recommends using it with a feature detection library like Modernizr:

if (Modernizr.csstransforms) {  
  window.mySwipe = new Swipe(

One of the nice features in Swipe is scroll prevention -- it'll detect if a swipe was intended to scroll the screen down, or slide content horizontally.