<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><!-- not sure what the diff is between this and 05. it's just been a couple of days, so i'm starting fresh with 06. --> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>filter</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">/** * Removes duplicates in the array 'a' * @author Johan Känngård, http://johankanngard.net/ */function unique(a) { tmp = new Array(0); for(i=0;i<a.length;i++){ if(!contains(tmp, a[i])){ tmp.length+=1; tmp[tmp.length-1]=a[i]; } } return tmp;}
/** * Returns true if 's' is contained in the array 'a' * @author Johan Känngård, http://johankanngard.net/ */function contains(a, e) { for(j=0;j<a.length;j++)if(a[j]==e)return true; return false;}
function removeItems(array, item) { var i = 0; while (i < array.length) { if (array[i] == item) { array.splice(i, 1); } else { i++; } } return array;}
$(document).ready(function () { // everything hinges on creating a string of class names, // so i'll create a variable to hold that first var stringOfClassNames = ''; // grab the class name of each list item to build that string $('.filterThis > li').each( function (i) { var thisClassString = $(this).attr('class'); stringOfClassNames = stringOfClassNames +' '+ thisClassString }); // now i have a space-delimited string of all class names stored // in the stringOfClassNames variable. // Trim spaces from the ends of that string: stringOfClassNames = jQuery.trim(stringOfClassNames); // i can't really do anything with it until it's an array, so // convert that string to an array. var arrayClasses = stringOfClassNames.split(' '); // now for the isolating the filter that is common to all. // must do before extracting only the unique classes // one way to approach: count the number of times classes occur, and // if any occur the same number of times as how many list items i have, // assume that class is common to all list items, and remove it from // the filter list. duplicate class on same item = problem, but // i'm not thinking about that right now. // i've also chosen sort the pre-unique'd array // instead of sorting the unique'd array. i think i have to for the count. var arrayClasses = arrayClasses.sort(); totalNumberOfItemsToFilter = $('.filterThis > li').length; // borrowed from http://stackoverflow.com/questions/348021/counting-results-in-an-array // for counting up items. do i even need this? var result = new Object(); for (var filterClass in arrayClasses) { if (result[arrayClasses[filterClass]] === undefined) { result[arrayClasses[filterClass]] = 1; } else { result[arrayClasses[filterClass]]++; } } var resultsToRemoveFromFilters = new Array(); for (var item in result) { if (result[item] == totalNumberOfItemsToFilter) { resultsToRemoveFromFilters.push(item); } }
// pull out only unique values from that array. Otherwise // i'll end up with duplicate filter checkboxes. arrayUniqueClasses = (unique(arrayClasses));
// and now remove classes that appear in every result from my 'unique // classes' array for (x in resultsToRemoveFromFilters) { arrayUniqueClasses = removeItems(arrayUniqueClasses,resultsToRemoveFromFilters[x]); } $('.filterThis').before('<p><strong>Classes excluded from filters because they are common to all elements:<\/strong> '+resultsToRemoveFromFilters+'<\/p>');
// we only want to create filters if there are multiple classes. check // length of that array to see if it worth going forward. I need at least // two, so my value has to be greater than 1. if (arrayUniqueClasses.length > 1) {
// it must be worth it, because everything else is // within the true side of this if statement. // so since we're going to have some filters, // lets give them a place to live $('<ul class="filters"><\/ul>').insertBefore('.filterThis'); // then build the filter checkboxes based on all the class names $.each(arrayUniqueClasses, function() { $('<li><input class="dynamicFilterInput" type="checkbox" checked="checked" value="'+this+'" id="filterID'+this+'" /><label for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters'); }); // lets throw in the 'show all' checkbox for giggles $('<li><input type="checkbox" checked="checked" value="filterAll" id="filterIDall" /><label for="filterIDall">Show all<\/label><\/li>').appendTo('ul.filters');
// now lets give those filters something to do $('.filters input').click( function() { var value= $(this).val(); if ((value == 'filterAll') && ($(this).is(':checked'))) { $('.filters input').attr('checked','checked'); $('.filterThis li').slideDown(); } else { stringValue = '.filterThis > li.'+value; stringValueOpposite = '.filterThis > li:not(.'+value+')'; if ($(this).is(':checked')) { classesOfItemToShow = ''; $(stringValue).slideDown().each( function() { classesOfItemToShow = classesOfItemToShow + ' ' + $(this).attr('class'); }); // trim spaces, then turn to an array, then // exclude non-unique classes classesOfItemToShow = jQuery.trim(classesOfItemToShow); classesOfItemToShow = classesOfItemToShow.split(' '); classesOfItemToShow = (unique(classesOfItemToShow)); if (classesOfItemToShow.length > 1) { $.each(classesOfItemToShow, function() { $('.filters input[value='+this+']').attr('checked','true'); }); } if ($('.dynamicFilterInput').not(':checked').length == 0) { $('#filterIDall').attr('checked','true'); }; } else { // all my new stuff goes here to tackle that 'webdev' // and 'resources' class issue. OtherClassesAssociatedWithTheItemToBeRemoved = ''; Oca = OtherClassesAssociatedWithTheItemToBeRemoved; $(stringValue).each(function(i) { Oca = Oca + ' ' + $(this).attr('class'); }); // trim spaces, then turn to an array, then // exclude non-unique classes Oca = jQuery.trim(Oca); Oca = Oca.split(' '); Oca = (unique(Oca)); if (Oca.length > 1) { $.each(Oca, function() { classToCompare = this; if (!($('.'+classToCompare).is(stringValueOpposite))) { // uncheck the checkbox that classToCompare represents $('.filters input[value='+classToCompare+']').removeAttr('checked'); } }); } $(stringValue).slideUp(); $('.filters #filterIDall').removeAttr('checked'); } } }); }});</script>
<style type="text/css">body { font-family: Verdana; }ul { list-style: none; float:left; margin-right: 10px; }ul.filterThis { width: 600px; }ul.filterThis li { padding: 10px; border-bottom: 1px dotted #ccc; }ul.filterThis li h4 { padding:0; margin:0; }ul.filterThis li p { padding:0; margin:0; color:#555; }ul.filterThis li p.tags { font: normal 10px/17px verdana; padding:0; margin:0; }ul.filters { border:3px solid #88bbe2; background: #bfdff7; padding:10px; }</style>
</head><body>
<h1>Final Example: What if delicious used checkbox filters?</h1>
<p>An exercise with jQuery to dynamically create a list of checkbox filters based on the tags of each list item in the content area. (The tags have to be repeated as class names for each list item). In the example below, the blue filters on the left are all dynamically created when the page loads. The original content is the right side. If javascript is off, the filters are never created.</p>
<p>Play with it and let me know where it breaks.</p>
<ul class="filterThis"> <li class="plugin wordpress webdesign jquery"> <h4>The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials</h4> <p class="url">http://www.noupe.com/jquery/the-power-of-wordpress-and-jquery-30-useful-plugins-tutorials.html</p> <p class="tags"><strong>Tags:</strong> plugin, wordpress, webdesign, jquery</p> </li> <li class="focus input usability design jquery"> <h4>Changing Form Input Styles on Focus with jQuery</h4> <p class="url">buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/</p> <p class="tags"><strong>Tags:</strong> focus, input, usability, design, jquery</p> </li> <li class="resources webdev datepicker webdesign jquery"> <h4>Beautiful datepickers and calendars for web developers</h4> <p class="url">woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html</p> <p class="tags"><strong>Tags:</strong> resources, webdev, datepicker, webdesign, jquery</p> </li> <li class="webdev jquery"> <h4>45+ New jQuery Techniques For Good User Experience | Developer's Toolbox | Smashing Magazine</h4> <p class="url">http://www.smashingmagazine.com/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/</p> <p class="tags"><strong>Tags:</strong> webdev, jquery</p> </li> <li class="jquery"> <h4>Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images and Content | Css Globe</h4> <p class="url">http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding</p> <p class="tags"><strong>Tags:</strong> jquery</p> </li> <li class="menus dropdown effects jquery"> <h4>Pop! simple pop menus with jQuery</h4> <p class="url">http://pop.seaofclouds.com/</p> <p class="tags"><strong>Tags:</strong> menus, dropdown, effects, jquery</p> </li> <li class="js tutorial ajax jquery"> <h4>jQuery - 35+ praktycznych przykładów! | Create WWW</h4> <p class="url">http://blog.createwww.pl/2009/01/24/jquery-35-praktycznych-przykladow/</p> <p class="tags"><strong>Tags:</strong> js tutorial ajax jquery</p> </li>
...
