View bootstrap-custom-columns.css
/* custom bootstrap grid by Hugh Anderson */
.col-xs-110 { width: calc(100% / 10) } /* 1/10 */
.col-xs-18 { width: calc(100% / 8) } /* 1/8 */
.col-xs-15 { width: calc(100% / 5) } /* 1/5 */
.col-xs-38 { width: calc(300% / 8) } /* 3/8 */
.col-xs-310 { width: calc(300% / 10) } /* 3/10 */
.col-xs-25 { width: calc(200% / 5) } /* 2/5 */
.col-xs-35 { width: calc(300% / 5) } /* 3/5 */
.col-xs-58 { width: calc(500% / 8) } /* 5/8 */
View Select2 with Primary selected item - 4_styles.css
/* http://www.cssportal.com/css-gradient-generator/ */
.select2-container-multi .select2-choices .select2-search-choice.select2-primary {
background-color: green;
border-color: green;
background-image: -ms-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
background-image: -moz-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
background-image: -o-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5CBD73), color-stop(50, #79EF70), color-stop(51, #24E23D), color-stop(100, #1F9C49));
background-image: -webkit-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
background-image: linear-gradient(to bottom, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
View Select2 with Primary selected item - 1_markup.html
<label for="Troops">Troops</label>
<select name="Troops" id="Troops" multiple="" class="primary-selectable">
<option value="1">Barbarian</option>
<option value="2">Archer</option>
<option value="3">Goblin</option>
<option value="4">Giant</option>
<option value="5" selected="selected">Wall Breaker</option>
<option value="6">Balloon</option>
<option value="7" selected="selected">Wizard</option>
<option value="8">Healer</option>
View Select2 with Primary selected item - 3_invokation.js
$(function() {
// create an instance of PrimarySelect2 and attach to our Troop selector
// we set no special Select2 options. you could pass the normal Select2 options struct here, it will be passed to Select2 constructor
var s2Options = {};
var ps2 = PrimarySelect2($('#Troops'), s2Options);
// ps2 is your handle now to the PrimarySelect2 interface
// if you're in a dynamic form later during your cleanup just call
// ps2.destroy();
View Select2 with Primary selected item - 2_script.js
// set up a facade to handle interacting with the PrimarySelect2
function PrimarySelect2($element, s2Options) {
// reality check
if (!$element || !$element.length) return;
// implementing on more than one item is left as an exercise for the reader. suggest jQuery plugin pattern
$element = $element.first();
// pass the options straight through to Select2
$element.select2(s2Options);
// get a handle to the Select2 api
View 1_markup.html
<label for="Troops">Troops</label>
<select name="Troops" id="Troops" multiple="" class="primary-selectable">
<option value="1">Barbarian</option>
<option value="2">Archer</option>
<option value="3">Goblin</option>
<option value="4">Giant</option>
<option value="5" selected="selected">Wall Breaker</option>
<option value="6">Balloon</option>
<option value="7" selected="selected">Wizard</option>
<option value="8">Healer</option>
View has3d.js
function has3d(){
var el = document.createElement('p'),
has3d,
transforms = {
'webkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
'msTransform':'-ms-transform',
'MozTransform':'-moz-transform',
'transform':'transform'
};
View hScrollDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>iscrollview Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
View app.css
input[data-type="range"] {display: none}
div.ui-slider {display:block; margin:0.17em auto 0.6em auto; width: 85%}
View 1_koSlider.js
ko.bindingHandlers.slider = {
init: function (element, valueAccessor) {
// use setTimeout with 0 to run this after Knockout is done
setTimeout(function () {
// $(element) doesn't work as that has been removed from the DOM
var curSlider = $('#' + element.id);
// helper function that updates the slider and refreshes the thumb location
function setSliderValue(newValue) {
curSlider.val(newValue).slider('refresh');
}