One of the things I find myself constantly doing with jQuery is making divs expand and collapse based on clicks on other elements. Collapsible panels are a great way of achieving progressive disclosure. I got sick of writing the same code on multiple pages so I wrote a plugin instead.
This creates an accordian style header which expands a linked panel when clicked.
Forms which need a user’s address, or even just their country can be tedious to fill out, especially if you need to collect latitude and longitude. Yahoo’s Geolocation API can simplify the process by looking up latitude, longitude and country from a postal/zip code. The function below takes five arguments and uses jQuery to add a click handler. When the button is clicked, an AJAX request is sent to the Yahoo geolocation API via jQuery, the the resulting XML is parsed and the form fields are populated.
This has the benefit of needing just one piece of data (postcode) instead of four. The one problem with this is that the same origin policy prevent making AJAX calls to a separate domain. Unfortunately, this means you need an intermediate web service hosted on the same domain as the page which passes on the request. This just needs to return a URL via cURL (PHP) or WebClient (ASP.NET).
Then in JavaScript, the result can be parsed from the returned XML (unfortunately, Yahoo’s API doesn’t currently support JSON).
Read more »
