Hash history with jQuery BBQ
As cool as Isotope is, the only thing that could make it even cooler would be adding bookmark-able URL hashes. Ben Alman’s jQuery BBQ allows us to do just that.
jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history.
See Demo: Hash history
BBQ is a marvelous plugin that provides for a lot more functionality. The hash history demo uses multiple options (
layoutMode in addition to
filter), the ability to use back-button history, and properly highlights selected links.
Given BBQ’s tremendous capabilities, the code can grow to be a bit complex. Be sure to read through BBQ’s docs and take look at its examples before you dive in and code up your own solution.
Instead of setting the option values and keys with
data attributes, we can add the option in the
href for each link.
href value is a serialized string, suitable for a URL. These values can be created with jQuery.param().
href values can be converted into their proper jQuery object form when clicked using jQuery.deparam() from jQuery BBQ.
Calling $.bbq.pushState() will trigger the
hashchange event. At that point, we can parse the hash from the URL and use it to trigger the proper change in the Isotope instance.
Now any filter buttons that are clicked will update the URL hash, so these options can be bookmarked.