View the documentation and download the Event-driven Pagination plugin here

I have also decided put up some links to some of my undocumented and alpha/beta code on the landing page of my projects area. Feel free to have a poke around but don’t be surprised if what you find there is a little on the buggy side!

UPDATE (22.01.10) – I have now removed the $.observeUrl() function as I felt it was not really in line with the core idea behind the plugin. For those needing similar functionality I would highly recommend Ben Alman’s hashchange plugin. New version also includes a number of bugfixes (thanks to Pavol, Eugene et al.). Proper demos and docs coming soon I hope! :-)

It also includes a function, $.observeUrl(), that once called ‘listens’ for changes to the document URL hash fragment, and triggers a custom jquery event, ‘hash:change’ whenever the hash portion of the URL changes. The plugin includes a somewhat modified version of the jQuery History Plugin to enable full back/forwards/history support for hash changes, and will hopefully make it pretty trivial to include full bookmarking and history support in AJAX based apps/sites .

The plugin is still very beta, but I thought I would link to the current version of it here anyway for those that are feeling brave and want to have a play around.

Download the jQuery URL Toolbox beta

Some very quick pointers on how to use it are included below – once I have tested it further I will move it over to the projects area of my site and get some proper documentation together.

General usage:

1. Use  var myUrl = $(element).url() to grab an element’s  URL and return a special ‘URL’ object. (a, form, img, base, link and iframe elements are supported, and using ‘document’ (no quotes) as the selector will return a URL object based on the current page’s URL)
2. Then use myUrl.attr('theAttr') to return any part of the URL, where ‘theAttr’ can be any one of: source, protocol, host, port, query, file, hash or path.
3. If you include a second argument to the attr() method – i.e. something like myUrl.attr('path', '/myNewPath/'), then it will set the value of that part of the URL to the value of the second argument. Whatever the URL of element the initial url() function was called on will be updated accordingly. If the document URL was used (via $(document).url()) then the location will be changed accordingly, normally resulting in a page refresh.
4. Doing a .toString() on the URL object at any time will return the current string representation of the URL.
5. The .segment(i) method (where ‘i’ is the segment number, starting from zero) will return the corresponding segment from the URL. Including a second parameter will set that segment.
6. The .param('key') method (where ‘key’ is the query string key) will return the corresponding value of the suppied key in the URL query (GET) string, if there is one. Including a second parameter will set that parameter.
7. If you have a hash fragment that consists of segments, like ‘#/part1/part2/’ then you can get/set those segments using the hashSegment() method, which works exactly like the segment() one.
8. Similarly if you have a hash fragment that looks like a query string, the parts can be get/set using the hashParam() method.

Watching for hash changes in the document’s URL:

1. Calling the $.observeUrl() function in your code will result in a custom ‘hash:changed’ event being triggered on the document any time the URL hash fragment is updated.
2. It will also ensure that any changes to the URL hash fragment are correctly recorded in the browser’s history (‘fixed’ for all browsers) so that the back/forwards buttons can be used correctly.
3. You can then set up you app to respond to hash changes by listening out for the hash:change event on the document, eg. $(document).bind('hash:change', function(e, hash){ doSomething() }

A lot to take in but I will try to get together some more comprehensive and less confusing documentation in the near future!

Any bugs, suggestions or otherwise please email me at mark[at]allmarkedup.com for now.

It basically allows you to paginate any collection of elements on the page, adding very simple prev / next links (as well as a ‘page’ counter if required) to allow navigation.

I often use this to paginate a list of news articles, or as a very simple way to throw together a little ’slideshow’ (by paginating through images with the ‘perpage’ setting set to 1).

It can paginate pretty much any collection of elements (of mixed types if required), including images, divs, elements in an unordered list etc (ordered list li’s don’t work well – try it and see why!).

Once again, I’ve kinda rushed it up there so if you spot any bugs or mistakes in the documentation etc, just drop a comment below and I will look at it asap.

Check the plugin out here.

Why would you need to pull information out of the URL? Well there are lots of potential reasons. I have been using it on a CodeIgniter-based CMS project recently where each page initially loads the same one JS file, which in turn selectively loads others depending on the URL (roughly mirroring the way CodeIgniter loads different controllers by parsing the URL segments). I also often use it just to get the base URL of the site so that I can use absolute URL references in my JavaScript, without having to change anything when the site moves domains – say from the testing to the production server. It also offers an easy way to access query string parameters for use in your scripts, and much more.

You can download the plugin from the project page, together with the documentation etc.

I’ll post up any updates to the plugin here, so grab the RSS feed if you want to stay updated. For bug reports or feature requests please visit the jQuery plugins page at http://plugins.jquery.com/project/url_parser, or if you have any other questions or queries, please drop me an email at mark[at]allmarkedup[dot]com and I will do my best to get back to you as soon as I can – but I’m pretty busy at the moment so please be patient!