View Full Version : Filter Box - html/javascript

Jan 11th, 2011, 10:03 AM

I am working on a site for work and on the page http://www.australianvisitor.co.uk/holidayfinder.htm I have a box with several options for the customer to tick to filter a selection of holidays according to destination. With thanks to thecssguy I found some code to do so. The only problem I have is that all the options are ticked by default, resulting in all holidays being displayed. It would be easier if they were all unticked by default allowing the customer to start from scratch so to speak. If i remove the line 'checked=checked' from the input box then:

in firefox - the options are unticked but all results are still displayed
in ie - the option box itself disappears.

Does anyone have any suggestions? Thanks for taking the time to read this.

Jan 11th, 2011, 10:24 PM
You need to fix many things in your site. You have 2 title tags - you only need one per page and it has to go in the head of the document. Your meta tags are somewhere in the middle of your page and they have to go in the head after the title tag. There are many tags in your page that have not been properly closed, and some are not closed at all. Your div box will not show on IE at all because of all these things. Your CSS style tags(<style type="text/css"></style>) should come before the script tags (<script type="text/javascript"></script>). I recommend that you start from the beginning with a clean "canvas". I looked at your issues and made your div re-appear on IE, and the jQuey script with the checkboxes somewhat works.


"-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<title>Australian Visitor | Holiday Finder | 0800 0850878</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body { font-family: Verdana; }
ul { list-style: none; float:left; margin-right: 10px; }
ul.filterThis { width: 500px; }
ul.filterThis li { padding: 15px; }
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-color:white; padding:10px; color:#003366 }

<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);
if(!contains(tmp, a[i])){
return tmp;

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 {
return array;

$(document).ready(function () {

if ($('.filterThis > li').length < 2) { return; }

// 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 {
var resultsToRemoveFromFilters = new Array();
for (var item in result) {
if (result[item] == totalNumberOfItemsToFilter) {

// pull out only unique values from that array. Otherwise
// i'll end up with duplicate filter checkboxes.
arrayUniqueClasses = (unique(arrayClasses));

// 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" value="'+this+'" id="filterID'+this+'" /><label for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters');

// for jesse, keep an array of classes we don't care for (that we uncheck)
// and an array of classes that we do care for (checked)
var classesStringOfSin = new Array();
classesStringOfSalvation = arrayUniqueClasses;
// everything is saved by default
$('.filterThis > li').addClass('filterTriggerShown');

// now lets give those filters something to do
$('.filters input').click( function() {
var value= $(this).val();
stringValue = '.filterThis > li.'+value;

if ($(this).is(':checked')) {
classesStringOfSin = removeItems(classesStringOfSin, value);
} else {
classesStringOfSalvation = removeItems(classesStringOfSalvation, value);

$.each(classesStringOfSalvation, function() {
var newStringValue = stringValue+'.'+this;



<div id=mainadelaide>
<h1>Holiday Finder</h1>

<ul class="filterThis">
<li class="Brisbane Sydney GBR Cairns G.Coast">
<h4 class=filter>Tropical Discovery</h4>
<p>See some of the finest sights of Eastern Australia in this trip between Sydney/Brisbane and Cairns.
Taking in picturesque Coffs Harbour, Cape Byron Lighthouse, a stay in Daydream Island, a cruise on Lake
Barrine, the Great Barrier Reef and the Kuranda Railway plus much more, this trip is an excellent in-depth
look at one of Australia's most picturesque regions.

<li class="Hobart Strahan">
<h4 class=filter>Best of Tasmania</h4>
Enjoy the best Tasmania has to offer on this 4, 7 or 10 day fully escorted low cost tour. Take in Hobart
and Launceston, as well historic sites such as Richmond, Highfield Historic Site, Port Arthur Historic Site,
Tasman's Arch and Blowhole, a tour of Allendale Gardens and many more (based on full 10 day tours).

<li class="Uluru Darwin Alice-Springs">
<h4 class=filter>Red Centre & Top End</h4>
<p>Take in spectacular sightseeing such as Sunset at Uluru, saltwater crocodile spotting, ancient Aboriginal
rock art, a walk through Walpa Gorge, cruises on Katherine Gorge and Yellow Water and much more on this 11 day
escorted trip across the Red Centre and Top End of Australia.

Validate your code!

Jan 13th, 2011, 10:41 AM
Wow - thanks very much thats a lot of effort you've went to - appreciate it

All the best