jQuery isotope, sort selected first with deep linking

Question

Good day,

Refer to this jsfiddle demo , client requires deep linking feature to be added to existing code.

I had tried isotope's build in feature using " Hash histroy with jQuery BBQ " but it is not what the client looking for, reason being:

(1) They want the displayed URL to run on slash "/" instead of hash "#"

(2) isotope jQuery BBQ example applied on filter buttons instead of specific isotope "itemSelector"

This is what the client looking for

(a) With specific deep linking url, browser will load the page with specific item being selected $this.addClass('selected');

(b) by clicking on other item itemSelector: '.item', url at address bar will change without page refresh

Sorry for my lack of skill in expressing, for better understanding, please refer to www.jwt.com . I couldn't reverse engineer the whole site, hence jQuery isotope as my approach.

I was thinking some sort of code to be added when isotope itemSelector is clicked,

$items.click(function () {
  var $this = $(this);
  // don't proceed if already selected
  var $previousSelected = $('.selected');
  if (!$this.hasClass('selected')) {
    $this.addClass('selected');
  }

  $previousSelected.removeClass('selected');

  // update sortData for new items size
  $container.isotope('updateSortData', $this)
    .isotope('updateSortData', $previousSelected)
    .isotope();

});

Many thanks in advance!

Answer 1

What you're looking for is the HTML5 History API . This allows you to modify what is displayed in the URL bar without reloading the page. You'll want to use a library, eg History.js , instead of using the API directly.

Answer 2

(1) They want the displayed URL to run on slash "/" instead of hash "#"

I really really advise against using "/" as a menu navigation command within a single page response. "/" is a reserved (ascii 2F) character representing URI hierarchical structure. used in the html spec for about as far back as you want to go. Translated for your impact, every client browser, web crawler made since 1994 may behave weirdly on a customized use of the "/"

I just want you to make an informed decision on using the "/". it may have un-intended consequences. I recommend picking anything that does not re-purpose a URI reserved character.

all that being said, it can be done.

1. if you must use a slash, then you're going to have to a "wildcard URL" mapping support in your webserver. http://your.domain.com/base/url/** --> some page (hierarchical definition stops there, and document fragment use of the url begins)

2. Like the jwt site, use a cookie to store the users click preferences, as you will be hacking apart your URL to meet the customer requirements.

3. you'll need to listen to clicks, or isotope update events to keep the cookie up to date

4. prevent the bbq filtering from showing up in the url and change it to the "/" the user asked for.

5. read your cookie on page load and start up isotope with the necessary options so the page looks the same as the last time they visited.