Question

Is there a way I can prefilter this page to solely show ‘Applications’.

Like, if I visit http://razorjack.net/quicksand/demos/one-set-clone.html#app it would just show ‘Applications’. Is this possible?

Googling around some people say this would help:

if(window.location.hash) {
                // run code here to filter the quicksand set
                var $filteredData = $data.find('li[data-type=' + window.location.hash + ']');
                $applications.quicksand($filteredData, {
                    duration: 800
                });
            }

but I’ve no idea where to use it.

Many thanks for any help here – truly stuck.

Answer 1

$(document).ready(function(){
   //on page load, we check to see if a hash value exists.
   if(window.location.hash) {
       // run code here to filter the quicksand set
       var $filteredData = $data.find('li[data-type=' + window.location.hash + ']');
       $applications.quicksand($filteredData, {
           duration: 800
       });
   }else{
       // the page does not have a hash value. deliver normal content.
       $applications.quicksand('Your Normal Data Here', {
           duration: 800
       });
   }
});

This code only runs once the page has been prepared. It checks to see if the hash value is present. if so, it filters the data to li elements that have a data type equal to the hash value. Then it prepares quicksand to filter the data accordingly. If there is no hash value present, we load quicksand normally. I don’t know what you do for your selector, so just replace 'Your Normal Data Here' with whatever data filter you use.

It should be noted that as per the example, they are expecting you to have an <li> structure as follows ->

<li data-type="data1"> //stuff </li>

Where data1 would be what the expected hash value is for filtering purposes.