Touch-Splitter-jQuery

A high performance html splitter compatible with touch events

##Install via npm

npm install touch-splitter-jquery

You can then use the compiled javascript and css in your client resources.

• ./node_modules/touch-splitter-jquery/src/jquery.touchsplitter.js
• ./node_modules/touch-splitter-jquery/src/touchsplitter.css

##Demos

####Basic Demo Page This is our basic page that is pictured above. You can see the source in the index.html file.

####Quick Test CoffeeScript Basic ide that uses two different splitters, one vertical splitter, then a horizontal splitter that divides the source from the compiled javascript.

Example Setup

It is highly recommended that your splitter container has a relative, absolute, or fixed position

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="src/jquery.touchsplitter.js"></script>
	<h1>Basic Demo</h1>
	<div class="split-me-container">
		<div class="split-me">
			<div> Left Side </div>
			<div> Right Side </div>
		</div>
	</div>
	<script>
		touchSplitter1 = $('.split-me').touchSplit({leftMax:300, leftMin:100, dock:"left"})
		touchSplitter1.getFirst().touchSplit({orientation:"vertical"})
	</script>

Teardown

To teardown a touch splitter you can use any of the following methods

var splitted = $('.split-me')

// Destroy splitter without removing either first or second element
splitted.touchSplitter.destroy();

// Destroy splitter and remove top or left element
splitted.touchSplitter.destroy('first');

// Destroy splitter and remove bottom or right element
splitted.touchSplitter.destroy('second');

// Destroy splitter and remove all elements
splitted.touchSplitter.destroy('both');

(typeof splitted.touchSplitter === 'undefined') // true