Sort and Filter

Sort a group of divs using TinySort Filter using JQuery Also has a button styled as a link below

by Robert Dodd

HTML

<body>

    <h1>Sort Example</h1>
    
    <fieldset>
        <legend>Sort</legend>
        <div id="sort-nav">
            <a rel="price" class="sort-price">Price</a> | 
            <a rel="type" class="sort-type">Type</a>
        </div>
    </fieldset>
    
    <fieldset>
        <legend>Filter</legend>
        <div id="filter-nav">
            <a rel="all" class="current">All</a> | 
            <a rel="door">Door to Door</a> | 
            <a rel="stop">Transit Stop</a> 
        </div>
    </fieldset>
    
    <div id="results">
        <div data-price="10" data-type="door" class="type all door">
            <div class="name">Door - $10</div>
            <div class="price" style="display: none;">10</div>
            <div class="type" style="display: none;">door</div>
        </div>
        <div data-price="20" data-type="door" class="type all door">
            <div class="name">Door - $20</div>
            <div class="price" style="display: none;">20</div>
            <div class="type" style="display: none;">door</div>
        </div>
        <div data-price="10" data-type="stop" class="type all stop">
            <div class="name">Stop - $10</div>
            <div class="price" style="display: none;">10</div>
            <div class="type" style="display: none;">stop</div>
        </div>
        <div data-price="20" data-type="stop" class="type all stop">
            <div class="name">Stop - $20</div>
            <div class="price" style="display: none;">20</div>
            <div class="type" style="display: none;">stop</div>
        </div>
    </div>
    
    <button class="link">Test Button</button>

</body>

CSS

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

button.link {
    display:inline-block;
    position:relative;
    background-color: transparent;
    cursor: pointer;
    border:0;
    padding:0;
    color:#00f;
    text-decoration:underline;
}

JavaScript

var sortby = "none";
var sortorder = "asc";

//Sort
$(function() {

	var newSelection = "";
	
	$("#sort-nav a").click(function(){
	
	    var newsortby = $(this).attr("rel");
    
        //change sort order
        if (sortby == newsortby) {
            if (sortorder == "asc") {
                sortorder = "desc";
            } else {
                sortorder = "asc";
            }
        } else {
            //reset sort order
            sortorder = "asc"
        }
        sortby = newsortby;
        
        //$('div#results>div').tsort('div.price',{order:'asc'});
        $('div#results>div').tsort({data:newsortby, order:sortorder});
		
	});
	
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

//Filter
$(function() {

	var newSelection = "";
	
	$("#filter-nav a").click(function(){
	
	    $("#results").fadeTo(200, 0.10);
	
		$("#filter-nav a").removeClass("current");
		$(this).addClass("current");
		
		newSelection = $(this).attr("rel");
		
		$(".type").not("."+newSelection).slideUp();
		$("."+newSelection).slideDown();
		
	    $("#results").fadeTo(600, 1);
		
	});
	
});

/* TinySort 1.5.0
* Copyright (c) 2008-2013 Ron Valstar http://tinysort.sjeiti.com/
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*/
(function(e,c){var g=!1,h=null,n=parseFloat,i=Math.min,l=/(-?\d+\.?\d*)$/g,k=[],f=[],b=function(p){return typeof p=="string"},m=Array.prototype.indexOf||function(q){var o=this.length,p=Number(arguments[1])||0;p=p<0?Math.ceil(p):Math.floor(p);if(p<0){p+=o}for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1};e.tinysort={id:"TinySort",version:"1.5.0",copyright:"Copyright (c) 2008-2013 Ron...