Bootstrap Snippet Search Panel using HTML CSS Bootstrap jQuery

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"); @import url("http://www.wiseberry.com.au/css/wiseberry-icons.css"); .multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0; z-index: 1001;} .multiselect-container .input-group{margin:5px} .multiselect-container>li{padding:0} .multiselect-container>li>a.multiselect-all label{font-weight:700} .multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px;height:100%;font-weight:700} .multiselect-container>li>a{padding:0} .multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px} .multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0} .multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px} .btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px} .form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px} .form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0} .square, .btn { border-radius: 0px!important; } .inline { display: inline-block; } /* -- color classes -- */ .coralbg { background-color: #FA396F; } .coral { color: #FA396f; } .turqbg { background-color: #46D8D2; } .turq { color: #46D8D2; } .wb-red-bg { background-color: #822433; } .wb-red { color: #822433;} .white { color: #fff!important; } /* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */ div.user-menu-container { z-index: 10; background-color: #fff; margin-top: 20px; background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } div.user-menu-container .btn-lg { padding: 0px 12px; } div.user-menu-container h4 { font-weight: 300; color: #8b8b8b; } div.user-menu-container a, div.user-menu-container .btn { transition: 1s ease; } div.user-menu-container .thumbnail { width:100%; min-height:200px; border: 0px!important; padding: 0px; border-radius: 0; border: 0px!important; } /* Search */ h2 { text-transform: uppercase; } .wise { display: inline-block; position: relative; top: 4px; font-family: "wiseberry-icons" !important; font-style: normal; font-weight: 900; font-size: 1.18em; line-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .animate { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .param { color: rgba(51,51,51.0.8); } .search-params { border-bottom: 1px solid #fff; } .editable, .psuedo-link { color: #428bca; cursor: pointer; } .psuedo-link { font-size: 1.2em; } .price_slider { border-radius:10px; width:250px; padding:20px; color:#444; font-weight:normal; font-size:large; z-index: 999; } .search-controller { display: inline-block; color: rgb(51, 51, 51); position: fixed; top: 15px; right: 55px; width:140px; z-index: 999; } nav ~ .search-controller > .nav-controller > .controller-open { display: inline-block; color: rgb(51, 51, 51); } nav ~ .search-controller > .nav-controller > .controller-close { display: none; } nav.focus ~ .search-controller > .nav-controller > .controller-open { display: none; } nav.focus ~ .search-controller > .nav-controller > .controller-close { display: inline-block; color: rgb(255,255,255); } nav { position: fixed; top: -300px; right: 0; padding-top: 8px; padding-bottom: 15px; width: 100%; max-height: 200px; text-align: left; background-color: rgb(130, 36, 51); color: rgb(255,255,255); box-shadow: -3px 0px 3px 0px rgba(160, 160, 160, 0.30); z-index: 100; } nav.focus { top: 0px; } nav > .divider { content: ''; border-bottom: 1px solid rgb(230, 230, 230); max-height: 1px; overflow: hidden; margin: 15px 0px; } nav > h4, nav > p, nav > ul { padding: 0px 10px; } nav > h4 { font-family: 'Anton', sans-serif; } nav > ul { list-style: none; } nav > ul > li { margin: 5px 0px; } nav > ul > li > a { color: rgb(190, 190, 190); } nav > ul > li > a:hover { font-size: 1.1em; font-weight: 700; color: rgb(51, 51, 51); text-decoration: none; } /* -- Vertical Button Group -- */ div.user-menu-container .btn-group-vertical { display: block; } div.user-menu-container .btn-group-vertical>a { padding: 20px 25px; background-color: #46D8D2; color: white; border-color: #fff; } div.btn-group-vertical>a:hover { color: white; border-color: white; } div.btn-group-vertical>a.active { background: #FA396F; box-shadow: none; color: white; } /* -- Individual button styles of vertical btn group -- */ div.user-menu-btns { padding-right: 0; padding-left: 0; padding-bottom: 0; } div.user-menu-btns div.btn-group-vertical>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #46D8D2; } /* -- The main tab & content styling of the vertical buttons info-- */ div.user-menu-content { color: #323232; } ul.user-menu-list { list-style: none; margin-top: 20px; margin-bottom: 0; padding: 10px; border: 1px solid #eee; } ul.user-menu-list>li { padding-bottom: 8px; text-align: center; } div.user-menu div.user-menu-content:not(.active){ display: none; } /* -- The btn stylings for the btn icons -- */ .btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;} .btn-labeled {padding-top: 0;padding-bottom: 0;} /* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */ .user-pad { padding: 20px 25px; } .no-pad { padding-right: 0; padding-left: 0; padding-bottom: 0; } .user-details { background: #eee; min-height: 333px; } .user-image { max-height:200px; overflow:hidden; } .overview h3 { font-weight: 300; margin-top: 15px; margin: 10px 0 0 0; } .overview h4 { font-weight: bold!important; font-size: 40px; margin-top: 0; } .view { position:relative; overflow:hidden; margin-top: 10px; } .view p { margin-top: 20px; margin-bottom: 0; } .caption { position:absolute; top:0; right:0; background: rgba(98, 98, 98, 0.44); width:100%; height:100%; padding:2%; display: none; text-align:center; color:#fff !important; z-index:2; } .caption h3 { padding-top: 20px; } .caption a { padding: 0 20px; color: #fff; } .propertyType { color: #ffffff; display: inline-block; height: 20px; padding: 0 10px; position: absolute; text-align: center; top: 0px; width: 100px; } .propertyType.house { background-color: red; } .propertyType.land { background-color: orange; } .propertyType.unit { background-color: green; } .propertyType.commercial { background-color: blue; } .info { display: block; padding: 10px; background: #eee; text-transform: uppercase; font-weight: 300; } .info p, .stats p { margin-bottom: 0; } .stats { display: block; padding: 10px; color: white; } .share-links { border: 1px solid #eee; padding: 15px; margin-top: 15px; } .square, .btn { border-radius: 0px!important; } .fa.pull-right { margin-top: .3em; } .wb { display: inline-block; color: #675c53; font-family: "wiseberry-icons" !important; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; top: -35px; } .wb.pull-right { margin-left: .3em; margin-right: .3em; } #btn-search { padding: 12px; background-color: #cccccc; color: #888; -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; } .header-masthead .search-box { background: rgba(255,255,255,0.4); color: #fff; position: relative; font-size: 1.25em; width: 100%; padding-left: 1em; padding-right: 2em; border: none; } .header-masthead .search-box ul{ color: #888888; } .search-form { position: relative; display: block; max-width: 500px; margin: 0 auto 0 auto; padding: 0 } .search-box .btn-search { position: absolute; top: 0; right: 1em; bottom: 0; margin: auto; font-size: 0.5em; } @media only screen and (max-width : 37.4375em) { .header-masthead .search-form { display: none } } .header-masthead .search-form { margin-bottom: 1em } .btn-search .glyph-search { display: inline-block } .search-box select { background: rgba(255,255,255,0.4); border: none; } .btn,button,.btn-link,.btn-outline,.btn-close,.btn-alert,.btn-play,.btn-solid,.btn-glyph,.btn-glyph-outline,.btn-search,.lnk-watchvid { display: inline-block; vertical-align: middle; text-decoration: none } button,.btn-link,.btn-glyph,.btn-glyph-outline,.btn-search,.lnk-watchvid { cursor: pointer; border-color: transparent; border-radius: 0; border-width: 0 } .btn-glyph,.btn-glyph-outline,.btn-search,.lnk-watchvid { padding: 0; margin: 0; background-color: transparent; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none } .btn-search .glyph-search { display: inline-block } .is-busy .btn-search .glyph-search,.btn-search.is-busy .glyph-search { -webkit-animation: flash 1000ms linear infinite alternate; -moz-animation: flash 1000ms linear infinite alternate; -ms-animation: flash 1000ms linear infinite alternate; -o-animation: flash 1000ms linear infinite alternate; animation: flash 1000ms linear infinite alternate } .glyph,.glyph-mtnstar,.glyph-mountainstar,.glyph-apple-download,.glyph-ban,.glyph-book,.glyph-silhouette,.glyph-playpause,.glyph-share,.glyph-replay,.glyph-search,.glyph-play,.glyph-play-solid,.glyph-close,.glyph-close-outline,.glyph-close-solid,.glyph-facebook,.glyph-facebook-solid,.glyph-facebook-solid-blue,.glyph-twitter,.glyph-twitter-solid,.glyph-twitter-solid-blue,.glyph-pinterest,.glyph-pinterest-solid,.glyph-pinterest-solid-red,.glyph-instagram-solid-darkgray,.glyph-embed,.glyph-embed-solid,.glyph-pager-previous,.glyph-pager-next { display: inline-block; width: 3em; height: 3em; background-repeat: no-repeat; background-size: contain; background-position: center; text-align: left; text-indent: -999em } .glyph-search { width: 3em; height: 3em; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS4zIDgzLjQiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MS4zLDc5LjZMNTUuNiw1MmMzLjEtMy42LDUuNC03LjksNi42LTEyLjhjNC4yLTE2LjktNi4xLTM0LTIzLTM4LjJjLTMuMy0wLjgtNi43LTEuMS0xMC0wLjhDMTUuNiwxLjIsNC4zLDEwLjgsMC45LDI0IGMtMiw4LjItMC44LDE2LjYsMy42LDIzLjhzMTEuMiwxMi4zLDE5LjQsMTQuM2MzLjMsMC44LDYuNywxLjEsMTAsMC44YzYuNi0wLjUsMTIuNi0zLDE3LjUtN0w3Nyw4My40TDgxLjMsNzkuNnogTTI1LjQsNTYuNiBDMTguNyw1NSwxMy4xLDUwLjgsOS41LDQ0LjlTNC45LDMyLDYuNSwyNS40YzIuNy0xMC44LDEyLTE4LjcsMjMtMTkuNWMyLjgtMC4zLDUuNSwwLDguMiwwLjdDNTEuNSwxMCw2MCwyMy45LDU2LjYsMzcuOCBjLTIuNywxMC44LTEyLDE4LjctMjMsMTkuNUMzMC44LDU3LjYsMjgsNTcuMywyNS40LDU2LjZ6Ii8+PC9zdmc+DQo=") } .inverse .glyph-search,.glyph-search.inverse { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS4zIDgzLjQiPjxwYXRoIGQ9Ik04MS4zLDc5LjZMNTUuNiw1MmMzLjEtMy42LDUuNC03LjksNi42LTEyLjhjNC4yLTE2LjktNi4xLTM0LTIzLTM4LjJjLTMuMy0wLjgtNi43LTEuMS0xMC0wLjhDMTUuNiwxLjIsNC4zLDEwLjgsMC45LDI0IGMtMiw4LjItMC44LDE2LjYsMy42LDIzLjhzMTEuMiwxMi4zLDE5LjQsMTQuM2MzLjMsMC44LDYuNywxLjEsMTAsMC44YzYuNi0wLjUsMTIuNi0zLDE3LjUtN0w3Nyw4My40TDgxLjMsNzkuNnogTTI1LjQsNTYuNiBDMTguNyw1NSwxMy4xLDUwLjgsOS41LDQ0LjlTNC45LDMyLDYuNSwyNS40YzIuNy0xMC44LDEyLTE4LjcsMjMtMTkuNWMyLjgtMC4zLDUuNSwwLDguMiwwLjdDNTEuNSwxMCw2MCwyMy45LDU2LjYsMzcuOCBjLTIuNywxMC44LTEyLDE4LjctMjMsMTkuNUMzMC44LDU3LjYsMjgsNTcuMywyNS40LDU2LjZ6Ii8+PC9zdmc+DQo=") } /* -- media query for user profile image -- */ @media (max-width: 767px) { .user-image { max-height: 400px; } }

/** * bootstrap-multiselect.js * https://github.com/davidstutz/bootstrap-multiselect * * Copyright 2012 - 2014 David Stutz * * Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0. */ !function($) { "use strict";// jshint ;_; if (Array.prototype.forEach === null || Array.prototype.forEach === undefined) { Array.prototype.forEach = function (func) { var index; for (index = 0; index < this.length; ++index) { func(this[index]); } }; } if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) { ko.bindingHandlers.multiselect = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var listOfSelectedItems = allBindingsAccessor().selectedOptions, config = ko.utils.unwrapObservable(valueAccessor()); $(element).multiselect(config); if (isObservableArray(listOfSelectedItems)) { //set the initial selection state on the multi-select list $(element).multiselect('select', ko.utils.unwrapObservable(listOfSelectedItems)); // Subscribe to the selectedOptions: ko.observableArray listOfSelectedItems.subscribe(function (changes) { var addedArray = [], deletedArray = []; changes.forEach(function (change) { switch (change.status) { case 'added': addedArray.push(change.value); break; case 'deleted': deletedArray.push(change.value); break; } }); if (addedArray.length > 0) { $(element).multiselect('select', addedArray); }; if (deletedArray.length > 0) { $(element).multiselect('deselect', deletedArray); }; }, null, "arrayChange"); } }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var listOfItems = allBindingsAccessor().options, ms = $(element).data('multiselect'), config = ko.utils.unwrapObservable(valueAccessor()); if (isObservableArray(listOfItems)) { // Subscribe to the options: ko.observableArray incase it changes later listOfItems.subscribe(function (theArray) { $(element).multiselect('rebuild'); }); } if (!ms) { $(element).multiselect(config); } else { ms.updateOriginalOptions(); } } }; } function isObservableArray(obj) { return ko.isObservable(obj) && !(obj.destroyAll === undefined); } /** * Constructor to create a new multiselect using the given select. * * @param {jQuery} select * @param {Object} options * @returns {Multiselect} */ function Multiselect(select, options) { this.options = this.mergeOptions(options); this.$select = $(select); // Initialization. // We have to clone to create a new reference. this.originalOptions = this.$select.clone()[0].options; this.query = ''; this.searchTimeout = null; this.options.multiple = this.$select.attr('multiple') === "multiple"; this.options.onChange = $.proxy(this.options.onChange, this); this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this); this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this); // Build select all if enabled. this.buildContainer(); this.buildButton(); this.buildDropdown(); this.buildSelectAll(); this.buildDropdownOptions(); this.buildFilter(); this.updateButtonText(); this.updateSelectAll(); this.$select.hide().after(this.$container); }; Multiselect.prototype = { defaults: { /** * Default text function will either print 'None selected' in case no * option is selected or a list of the selected options up to a length of 3 selected options. * * @param {jQuery} options * @param {jQuery} select * @returns {String} */ buttonText: function(options, select) { if (options.length === 0) { return this.nonSelectedText + ' <b class="caret"></b>'; } else { if (options.length > this.numberDisplayed) { return options.length + ' ' + this.nSelectedText + ' <b class="caret"></b>'; } else { var selected = ''; options.each(function() { var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).html(); selected += label + ', '; }); return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>'; } } }, /** * Updates the title of the button similar to the buttonText function. * @param {jQuery} options * @param {jQuery} select * @returns {@exp;selected@call;substr} */ buttonTitle: function(options, select) { if (options.length === 0) { return this.nonSelectedText; } else { var selected = ''; options.each(function () { selected += $(this).text() + ', '; }); return selected.substr(0, selected.length - 2); } }, /** * Create a label. * * @param {jQuery} element * @returns {String} */ label: function(element){ return $(element).attr('label') || $(element).html(); }, /** * Triggered on change of the multiselect. * Not triggered when selecting/deselecting options manually. * * @param {jQuery} option * @param {Boolean} checked */ onChange : function(option, checked) { }, /** * Triggered when the dropdown is shown. * * @param {jQuery} event */ onDropdownShow: function(event) { }, /** * Triggered when the dropdown is hidden. * * @param {jQuery} event */ onDropdownHide: function(event) { }, buttonClass: 'btn btn-default', dropRight: false, selectedClass: 'active', buttonWidth: 'auto', buttonContainer: '<div class="btn-group" />', // Maximum height of the dropdown menu. // If maximum height is exceeded a scrollbar will be displayed. maxHeight: false, checkboxName: 'multiselect', includeSelectAllOption: false, includeSelectAllIfMoreThan: 0, selectAllText: ' Select all', selectAllValue: 'multiselect-all', enableFiltering: false, enableCaseInsensitiveFiltering: false, filterPlaceholder: 'Search', // possible options: 'text', 'value', 'both' filterBehavior: 'text', preventInputChangeEvent: false, nonSelectedText: 'None selected', nSelectedText: 'selected', numberDisplayed: 3, templates: { button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>', ul: '<ul class="multiselect-container dropdown-menu"></ul>', filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>', li: '<li><a href="javascript:void(0);"><label></label></a></li>', divider: '<li class="multiselect-item divider"></li>', liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>' } }, constructor: Multiselect, /** * Builds the container of the multiselect. */ buildContainer: function() { this.$container = $(this.options.buttonContainer); this.$container.on('show.bs.dropdown', this.options.onDropdownShow); this.$container.on('hide.bs.dropdown', this.options.onDropdownHide); }, /** * Builds the button of the multiselect. */ buildButton: function() { this.$button = $(this.options.templates.button).addClass(this.options.buttonClass); // Adopt active state. if (this.$select.prop('disabled')) { this.disable(); } else { this.enable(); } // Manually add button width if set. if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') { this.$button.css({ 'width' : this.options.buttonWidth }); this.$container.css({ 'width': this.options.buttonWidth }); } // Keep the tab index from the select. var tabindex = this.$select.attr('tabindex'); if (tabindex) { this.$button.attr('tabindex', tabindex); } this.$container.prepend(this.$button); }, /** * Builds the ul representing the dropdown menu. */ buildDropdown: function() { // Build ul. this.$ul = $(this.options.templates.ul); if (this.options.dropRight) { this.$ul.addClass('pull-right'); } // Set max height of dropdown menu to activate auto scrollbar. if (this.options.maxHeight) { // TODO: Add a class for this option to move the css declarations. this.$ul.css({ 'max-height': this.options.maxHeight + 'px', 'overflow-y': 'auto', 'overflow-x': 'hidden' }); } this.$container.append(this.$ul); }, /** * Build the dropdown options and binds all nessecary events. * Uses createDivider and createOptionValue to create the necessary options. */ buildDropdownOptions: function() { this.$select.children().each($.proxy(function(index, element) { // Support optgroups and options without a group simultaneously. var tag = $(element).prop('tagName') .toLowerCase(); if ($(element).prop('value') == this.options.selectAllValue) { return; } if (tag === 'optgroup') { this.createOptgroup(element); } else if (tag === 'option') { if ($(element).data('role') === 'divider') { this.createDivider(); } else { this.createOptionValue(element); } } // Other illegal tags will be ignored. }, this)); // Bind the change event on the dropdown elements. $('li input', this.$ul).on('change', $.proxy(function(event) { var $target = $(event.target); var checked = $target.prop('checked') || false; var isSelectAllOption = $target.val() === this.options.selectAllValue; // Apply or unapply the configured selected class. if (this.options.selectedClass) { if (checked) { $target.parents('li') .addClass(this.options.selectedClass); } else { $target.parents('li') .removeClass(this.options.selectedClass); } } // Get the corresponding option. var value = $target.val(); var $option = this.getOptionByValue(value); var $optionsNotThis = $('option', this.$select).not($option); var $checkboxesNotThis = $('input', this.$container).not($target); if (isSelectAllOption) { if (checked) { this.selectall(); } else { this.deselectall(); } } if(!isSelectAllOption){ if (checked) { $option.prop('selected', true); if (this.options.multiple) { // Simply select additional option. $option.prop('selected', true); } else { // Unselect all other options and corresponding checkboxes. if (this.options.selectedClass) { $($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass); } $($checkboxesNotThis).prop('checked', false); $optionsNotThis.prop('selected', false); // It's a single selection, so close. this.$button.click(); } if (this.options.selectedClass === "active") { $optionsNotThis.parents("a").css("outline", ""); } } else { // Unselect option. $option.prop('selected', false); } } this.$select.change(); this.updateButtonText(); this.updateSelectAll(); this.options.onChange($option, checked); if(this.options.preventInputChangeEvent) { return false; } }, this)); $('li a', this.$ul).on('touchstart click', function(event) { event.stopPropagation(); var $target = $(event.target); if (event.shiftKey) { var checked = $target.prop('checked') || false; if (checked) { var prev = $target.parents('li:last') .siblings('li[class="active"]:first'); var currentIdx = $target.parents('li') .index(); var prevIdx = prev.index(); if (currentIdx > prevIdx) { $target.parents("li:last").prevUntil(prev).each( function() { $(this).find("input:first").prop("checked", true) .trigger("change"); } ); } else { $target.parents("li:last").nextUntil(prev).each( function() { $(this).find("input:first").prop("checked", true) .trigger("change"); } ); } } } $target.blur(); }); // Keyboard support. this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function(event) { if ($('input[type="text"]', this.$container).is(':focus')) { return; } if ((event.keyCode === 9 || event.keyCode === 27) && this.$container.hasClass('open')) { // Close on tab or escape. this.$button.click(); } else { var $items = $(this.$container).find("li:not(.divider):not(.disabled) a").filter(":visible"); if (!$items.length) { return; } var index = $items.index($items.filter(':focus')); // Navigation up. if (event.keyCode === 38 && index > 0) { index--; } // Navigate down. else if (event.keyCode === 40 && index < $items.length - 1) { index++; } else if (!~index) { index = 0; } var $current = $items.eq(index); $current.focus(); if (event.keyCode === 32 || event.keyCode === 13) { var $checkbox = $current.find('input'); $checkbox.prop("checked", !$checkbox.prop("checked")); $checkbox.change(); } event.stopPropagation(); event.preventDefault(); } }, this)); }, /** * Create an option using the given select option. * * @param {jQuery} element */ createOptionValue: function(element) { if ($(element).is(':selected')) { $(element).prop('selected', true); } // Support the label attribute on options. var label = this.options.label(element); var value = $(element).val(); var inputType = this.options.multiple ? "checkbox" : "radio"; var $li = $(this.options.templates.li); $('label', $li).addClass(inputType); $('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />'); var selected = $(element).prop('selected') || false; var $checkbox = $('input', $li); $checkbox.val(value); if (value === this.options.selectAllValue) { $li.addClass("multiselect-item multiselect-all"); $checkbox.parent().parent() .addClass('multiselect-all'); } $('label', $li).append(" " + label); this.$ul.append($li); if ($(element).is(':disabled')) { $checkbox.attr('disabled', 'disabled') .prop('disabled', true) .parents('a') .attr("tabindex", "-1") .parents('li') .addClass('disabled'); } $checkbox.prop('checked', selected); if (selected && this.options.selectedClass) { $checkbox.parents('li') .addClass(this.options.selectedClass); } }, /** * Creates a divider using the given select option. * * @param {jQuery} element */ createDivider: function(element) { var $divider = $(this.options.templates.divider); this.$ul.append($divider); }, /** * Creates an optgroup. * * @param {jQuery} group */ createOptgroup: function(group) { var groupName = $(group).prop('label'); // Add a header for the group. var $li = $(this.options.templates.liGroup); $('label', $li).text(groupName); this.$ul.append($li); if ($(group).is(':disabled')) { $li.addClass('disabled'); } // Add the options of the group. $('option', group).each($.proxy(function(index, element) { this.createOptionValue(element); }, this)); }, /** * Build the selct all. * Checks if a select all has already been created. */ buildSelectAll: function() { var alreadyHasSelectAll = this.hasSelectAll(); if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple && $('option', this.$select).length > this.options.includeSelectAllIfMoreThan) { // Check whether to add a divider after the select all. if (this.options.includeSelectAllDivider) { this.$ul.prepend($(this.options.templates.divider)); } var $li = $(this.options.templates.li); $('label', $li).addClass("checkbox"); $('label', $li).append('<input type="checkbox" name="' + this.options.checkboxName + '" />'); var $checkbox = $('input', $li); $checkbox.val(this.options.selectAllValue); $li.addClass("multiselect-item multiselect-all"); $checkbox.parent().parent() .addClass('multiselect-all'); $('label', $li).append(" " + this.options.selectAllText); this.$ul.prepend($li); $checkbox.prop('checked', false); } }, /** * Builds the filter. */ buildFilter: function() { // Build filter if filtering OR case insensitive filtering is enabled and the number of options exceeds (or equals) enableFilterLength. if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) { var enableFilterLength = Math.max(this.options.enableFiltering, this.options.enableCaseInsensitiveFiltering); if (this.$select.find('option').length >= enableFilterLength) { this.$filter = $(this.options.templates.filter); $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder); this.$ul.prepend(this.$filter); this.$filter.val(this.query).on('click', function(event) { event.stopPropagation(); }).on('input keydown', $.proxy(function(event) { // This is useful to catch "keydown" events after the browser has updated the control. clearTimeout(this.searchTimeout); this.searchTimeout = this.asyncFunction($.proxy(function() { if (this.query !== event.target.value) { this.query = event.target.value; $.each($('li', this.$ul), $.proxy(function(index, element) { var value = $('input', element).val(); var text = $('label', element).text(); var filterCandidate = ''; if ((this.options.filterBehavior === 'text')) { filterCandidate = text; } else if ((this.options.filterBehavior === 'value')) { filterCandidate = value; } else if (this.options.filterBehavior === 'both') { filterCandidate = text + '\n' + value; } if (value !== this.options.selectAllValue && text) { // by default lets assume that element is not // interesting for this search var showElement = false; if (this.options.enableCaseInsensitiveFiltering && filterCandidate.toLowerCase().indexOf(this.query.toLowerCase()) > -1) { showElement = true; } else if (filterCandidate.indexOf(this.query) > -1) { showElement = true; } if (showElement) { $(element).show().removeClass("filter-hidden"); } else { $(element).hide().addClass("filter-hidden"); } } }, this)); } this.updateSelectAll(); }, this), 300, this); }, this)); } } }, /** * Unbinds the whole plugin. */ destroy: function() { this.$container.remove(); this.$select.show(); this.$select.data('multiselect', null); }, /** * Refreshs the multiselect based on the selected options of the select. */ refresh: function() { $('option', this.$select).each($.proxy(function(index, element) { var $input = $('li input', this.$ul).filter(function() { return $(this).val() === $(element).val(); }); if ($(element).is(':selected')) { $input.prop('checked', true); if (this.options.selectedClass) { $input.parents('li') .addClass(this.options.selectedClass); } } else { $input.prop('checked', false); if (this.options.selectedClass) { $input.parents('li') .removeClass(this.options.selectedClass); } } if ($(element).is(":disabled")) { $input.attr('disabled', 'disabled') .prop('disabled', true) .parents('li') .addClass('disabled'); } else { $input.prop('disabled', false) .parents('li') .removeClass('disabled'); } }, this)); this.updateButtonText(); this.updateSelectAll(); }, /** * Select all options of the given values. * * @param {Array} selectValues */ select: function(selectValues) { if(!$.isArray(selectValues)) { selectValues = [selectValues]; } for (var i = 0; i < selectValues.length; i++) { var value = selectValues[i]; var $option = this.getOptionByValue(value); var $checkbox = this.getInputByValue(value); if($option === void(0) || $checkbox === void(0)) { continue; } if (this.options.selectedClass) { $checkbox.parents('li') .addClass(this.options.selectedClass); } $checkbox.prop('checked', true); $option.prop('selected', true); } this.updateButtonText(); }, /** * Clears all selected items * */ clearSelection: function () { this.deselectall(false); this.updateButtonText(); this.updateSelectAll(); }, /** * Deselects all options of the given values. * * @param {Array} deselectValues */ deselect: function(deselectValues) { if(!$.isArray(deselectValues)) { deselectValues = [deselectValues]; } for (var i = 0; i < deselectValues.length; i++) { var value = deselectValues[i]; var $option = this.getOptionByValue(value); var $checkbox = this.getInputByValue(value); if($option === void(0) || $checkbox === void(0)) { continue; } if (this.options.selectedClass) { $checkbox.parents('li') .removeClass(this.options.selectedClass); } $checkbox.prop('checked', false); $option.prop('selected', false); } this.updateButtonText(); }, /** * Selects all enabled & visible options. * */ selectall: function () { var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul), visibleCheckboxes = allCheckboxes.filter(":visible"), allCheckboxesCount = allCheckboxes.length, visibleCheckboxesCount = visibleCheckboxes.length; visibleCheckboxes.prop('checked', true); $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass); if (allCheckboxesCount === visibleCheckboxesCount) { $("option:enabled", this.$select).prop('selected', true); } else { var values = visibleCheckboxes.map(function() { return $(this).val() }).get(); $("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', true); } }, /** * Deselects all options. * If justVisible is true or not specified, only visible options are deselected. * * @param {Boolean} justVisible */ deselectall: function (justVisible) { var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul), justVisible = typeof justVisible === 'undefined' ? true : justVisible, visibleCheckboxes = void(0); if(justVisible) { var values = void(0); visibleCheckboxes = allCheckboxes.filter(":visible"); visibleCheckboxes.prop('checked', false); values = visibleCheckboxes.map(function() { return $(this).val() }).get(); $("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', false); $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass); }else { allCheckboxes.prop('checked', false); $("option:enabled", this.$select).prop('selected', false); $("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass); } }, /** * Rebuild the plugin. * Rebuilds the dropdown, the filter and the select all option. */ rebuild: function() { this.$ul.html(''); // Important to distinguish between radios and checkboxes. this.options.multiple = this.$select.attr('multiple') === "multiple"; this.buildSelectAll(); this.buildDropdownOptions(); this.buildFilter(); this.updateButtonText(); this.updateSelectAll(); if (this.options.dropRight) { this.$ul.addClass('pull-right'); } }, /** * The provided data will be used to build the dropdown. * * @param {Array} dataprovider */ dataprovider: function(dataprovider) { var optionDOM = ""; var groupCounter = 0; $.each(dataprovider, function (index, option) { if ($.isArray(option.children)) { groupCounter++; optionDOM += '<optgroup label="' + (option.title || 'Group ' + groupCounter) + '">'; option.children.forEach(function(subOption) { optionDOM += '<option value="' + subOption.value + '">' + (subOption.label || subOption.value) + '</option>'; }); optionDOM += '</optgroup>'; } else { optionDOM += '<option value="' + option.value + '">' + (option.label || option.value) + '</option>'; } }); this.$select.html(optionDOM); this.rebuild(); }, /** * Enable the multiselect. */ enable: function() { this.$select.prop('disabled', false); this.$button.prop('disabled', false) .removeClass('disabled'); }, /** * Disable the multiselect. */ disable: function() { this.$select.prop('disabled', true); this.$button.prop('disabled', true) .addClass('disabled'); }, /** * Set the options. * * @param {Array} options */ setOptions: function(options) { this.options = this.mergeOptions(options); }, /** * Merges the given options with the default options. * * @param {Array} options * @returns {Array} */ mergeOptions: function(options) { return $.extend(true, {}, this.defaults, options); }, /** * Checks whether a select all checkbox is present. * * @returns {Boolean} */ hasSelectAll: function() { return $('li.' + this.options.selectAllValue, this.$ul).length > 0; }, /** * Updates the select all checkbox based on the currently displayed and selected checkboxes. */ updateSelectAll: function() { if (this.hasSelectAll()) { var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul), allBoxesLength = allBoxes.length, checkedBoxesLength = allBoxes.filter(":checked").length, selectAllLi = $("li." + this.options.selectAllValue, this.$ul), selectAllInput = selectAllLi.find("input"); if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) { selectAllInput.prop("checked", true); selectAllLi.addClass(this.options.selectedClass); } else { selectAllInput.prop("checked", false); selectAllLi.removeClass(this.options.selectedClass); } } }, /** * Update the button text and its title based on the currently selected options. */ updateButtonText: function() { var options = this.getSelected(); // First update the displayed button text. $('button', this.$container).html(this.options.buttonText(options, this.$select)); // Now update the title attribute of the button. $('button', this.$container).attr('title', this.options.buttonTitle(options, this.$select)); }, /** * Get all selected options. * * @returns {jQUery} */ getSelected: function() { return $('option', this.$select).filter(":selected"); }, /** * Gets a select option by its value. * * @param {String} value * @returns {jQuery} */ getOptionByValue: function (value) { var options = $('option', this.$select); var valueToCompare = value.toString(); for (var i = 0; i < options.length; i = i + 1) { var option = options[i]; if (option.value === valueToCompare) { return $(option); } } }, /** * Get the input (radio/checkbox) by its value. * * @param {String} value * @returns {jQuery} */ getInputByValue: function (value) { var checkboxes = $('li input', this.$ul); var valueToCompare = value.toString(); for (var i = 0; i < checkboxes.length; i = i + 1) { var checkbox = checkboxes[i]; if (checkbox.value === valueToCompare) { return $(checkbox); } } }, /** * Used for knockout integration. */ updateOriginalOptions: function() { this.originalOptions = this.$select.clone()[0].options; }, asyncFunction: function(callback, timeout, self) { var args = Array.prototype.slice.call(arguments, 3); return setTimeout(function() { callback.apply(self || window, args); }, timeout); } }; $.fn.multiselect = function(option, parameter) { return this.each(function() { var data = $(this).data('multiselect'); var options = typeof option === 'object' && option; // Initialize the multiselect. if (!data) { data = new Multiselect(this, options); $(this).data('multiselect', data); } // Call multiselect method. if (typeof option === 'string') { data[option](parameter); if (option === 'destroy') { $(this).data('multiselect', false); } } }); }; $.fn.multiselect.Constructor = Multiselect; $(function() { $("select[data-role=multiselect]").multiselect(); }); }(window.jQuery); function updateMin(slideAmount) { var ks = slideAmount/1000; console.log(ks.length); //get the element var display = document.getElementById("min_value"); //show the amount display.innerHTML='$'+ks+'K'; } function updateMax(slideAmount) { var ks = slideAmount/1000; //get the element var display = document.getElementById("max_value"); //show the amount display.innerHTML='$'+ks+'K'; } $(document).ready(function() { var $btnSets = $('#responsive'), $btnLinks = $btnSets.find('a'); $btnLinks.click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.user-menu>div.user-menu-content").removeClass("active"); $("div.user-menu>div.user-menu-content").eq(index).addClass("active"); }); $("[rel='tooltip']").tooltip(); $('.view').hover( function(){ $(this).find('.caption').slideDown(250); //.fadeIn(250) }, function(){ $(this).find('.caption').slideUp(250); //.fadeOut(205) } ); //Setup sliders for editing min/max search params var min_template ='<div id="slider" class="price_slider min"> <span id="slider_min">$50K</span> <input id="min_range" type="range" min="50000" max="3000000" step="50000" value="500000" onchange="updateMin(this.value);" /><span id="slider_max" class="pull-right">$3M</div>'; $('#min_value').popover({ container: 'body' ,content: min_template ,trigger: 'click' ,html :true ,placement: 'bottom' ,title: 'Minimum Price' }); var max_template ='<div id="slider" class="price_slider max"> <span id="slider_min">$50K</span> <input id="min_range" type="range" min="50000" max="3000000" step="50000" value="500000" onchange="updateMax(this.value);" /><span id="slider_max" class="pull-right">$3M</div>'; $('#max_value').popover({ container: 'body' ,content: max_template ,html :true ,placement: 'bottom' ,title: 'Maximum Price' }); $('.nav-controller').on('click', function(event) { $('nav').toggleClass('focus'); }); $('.multiselect').multiselect({ buttonClass: 'btn btn-link' }); });