Hugh Anderson FirstVertex

## 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();

## 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

## 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>

## 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'
    };

## 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"/>


## app.css
input[data-type="range"] {display: none}
div.ui-slider {display:block; margin:0.17em auto 0.6em auto; width: 85%}

## 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');
                }

## index.html
<!-- the refreshListview here instructs Knockout to call a binding handler by that name -->

<!-- ko foreach: members, refreshListview: true
    --><li style="padding:.3em">
           <span data-bind="text: memberName, css: { memberIsTyping: isTyping }"></span>
       </li><!-- /ko -->

## 1_index.html
<!-- the Knockout binding from the text input to the chatRoomViewModel's
     currentChatInput property.  notice the valueUpdate is set to afterkeydown,
     so the viewModel will be updated with each keystroke -->

<input type="text" data-mini="true" placeholder="chat"
       data-bind="value: currentChatInput, valueUpdate: 'afterkeydown'" />
	$(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();
	// 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
	<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>
	function has3d(){
	var el = document.createElement('p'),
	has3d,
	transforms = {
	'webkitTransform':'-webkit-transform',
	'OTransform':'-o-transform',
	'msTransform':'-ms-transform',
	'MozTransform':'-moz-transform',
	'transform':'transform'
	};
	<!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"/>
	input[data-type="range"] {display: none}
	div.ui-slider {display:block; margin:0.17em auto 0.6em auto; width: 85%}
	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');
	}
	<!-- the refreshListview here instructs Knockout to call a binding handler by that name -->

	<!-- ko foreach: members, refreshListview: true
	--><li style="padding:.3em">
	<span data-bind="text: memberName, css: { memberIsTyping: isTyping }"></span>
	</li><!-- /ko -->
	<!-- the Knockout binding from the text input to the chatRoomViewModel's
	currentChatInput property. notice the valueUpdate is set to afterkeydown,
	so the viewModel will be updated with each keystroke -->

	<input type="text" data-mini="true" placeholder="chat"
	data-bind="value: currentChatInput, valueUpdate: 'afterkeydown'" />