ISSUE 46: Fixed

examples/kitchen-sink/index.html

@@ -64,7 +64,7 @@
                 <a href="#buttons" data-target="article" data-icon="plus" data-count="14">Buttons & Colours</a>
                 <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
                 <a href="#data-attributes" data-target="article" data-icon="picture" data-count="6">Data Attributes</a>
-                <a href="#forms" data-target="section" data-icon="write" data-count="7">Form Elements</a>
+                <a href="#forms" data-target="article" data-icon="write" data-count="7">Form Elements</a>
                 <a href="#lists" data-target="section" data-icon="note" data-count="5">Lists</a>
                 <a href="#events" data-target="article" data-icon="user">Events</a>
                 <a href="#scrolls" data-target="article" data-icon="points">Scrolls</a>
@@ -302,6 +302,80 @@
 
         <!-- ============================= events ============================= -->
 
+        <article id="forms" class="list scrollable">
+            <div class="container indented">
+                <ul class="form">
+                    <li class="tip darker" data-icon="write mini">Example of inputs</li>
+                    <li>
+                        <label>type="text"</label>
+                        <input type="text" placeholder="Input text"/>
+                    </li>
+                    <li>
+                        <label>type="password"</label>
+                        <input type="password" placeholder="Input password"/>
+                    </li>
+                </ul>
+
+                <ul>
+                    <li class="tip darker" data-icon="write mini">Example of search</li>
+                    <li data-search="Type a search..."></li>
+                    <li class="tip dark" data-icon="help mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
+                </ul>
+
+                <ul>
+                    <li class="tip darker" data-icon="write mini">Example of textarea</li>
+                    <li><textarea placeholder="Textarea sample"></textarea></li>
+                    <li class="anchor" data-icon="write">Example of select</li>
+                    <li>
+                        <label>Select a number:</label>
+                        <label class="select">
+                            <select class="custom">
+                                <option value="1">One</option>
+                                <option value="2">Two</option>
+                                <option value="3">Three</option>
+                            </select>
+                        </label>
+                    </li>
+                    <li class="tip dark" data-icon="help mini">It's a special form element you must set the label with class "select"</li>
+                </ul>
+
+                <ul>
+                    <li class="tip darker" data-icon="write mini">Example of checkbox</li>
+                    <li style="height: 32px;">
+                        <label class="onleft" data-icon="twitter"></label>
+                        <label class="checkbox onleft"><input type="checkbox" id="checkbox-0"/></label>
+                    </li>
+                </ul>
+
+                <ul class="form">
+                    <li class="tip darker" data-icon="write mini">Example of radio</li>
+                    <li>
+                        <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
+                        <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
+                        <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
+                    </li>
+                </ul>
+
+                <ul class="form">
+                    <li class="tip darker">Examples of tips</li>
+                    <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                    <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                    <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+
+                    <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                    <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                    <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                </ul>
+
+                <ul class="form">
+                    <li class="tip darker" data-icon="home mini">Example of anchor</li>
+                    <li><label>Example of label</label></li>
+                </ul>
+            </div>
+        </article>
+
+        <!-- ============================= events ============================= -->
+
         <article id="events" class="list scrollable">
             <div class="indented">
                 <ul>
@@ -407,140 +481,6 @@
 
     <!-- ============================= header footer ============================= -->
 
-    <!-- ============================= forms ============================= -->
-
-    <section id="forms">
-        <header data-back="home" data-title="Form Elements">
-            <a href="#" class="button onleft aside" data-target="aside" data-icon="note"></a>
-        </header>
-
-        <aside id="forms-scroll" class="scrollable">
-            <div class="container">
-                <a href="#form-input" data-target="article" class="current" data-title="Inputs" data-icon="write">Inputs</a>
-                <a href="#form-search" data-target="article" data-title="Search" data-icon="search">Search</a>
-                <a href="#form-textarea" data-target="article" data-title="Textarea" data-icon="write">Textarea</a>
-                <a href="#form-select" data-target="article" data-title="Select" data-icon="box">Select</a>
-                <a href="#form-checkbox" data-target="article" data-title="Checkbox" data-icon="accept">Checkbox</a>
-                <a href="#form-radio" data-target="article" data-title="Radio" data-icon="radar">Radio</a>
-                <a href="#form-label" data-target="article" data-title="Labels, Anchors & Tips" data-icon="label">Labels, Anchors...</a>
-            </div>
-        </aside>
-
-        <article id="form-input" class="list">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="write">Example of inputs</li>
-                    <li>
-                        <label>type="text"</label>
-                        <input type="text" placeholder="Input text"/>
-                    </li>
-                    <li>
-                        <label>type="password"</label>
-                        <input type="password" placeholder="Input password"/>
-                    </li>
-                </ul>
-            </div>
-        </article>
-
-        <article id="form-search" class="list">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="write">Example of search</li>
-                    <li data-search="Type a search..."></li>
-                    <li class="tip darker" data-icon="help mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
-                </ul>
-            </div>
-        </article>
-
-        <article id="form-textarea" class="list">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="write">Example of textarea</li>
-                    <li><textarea placeholder="Textarea sample"></textarea></li>
-                </ul>
-            </div>
-        </article>
-
-        <article id="form-select" class="list">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="write">Example of select</li>
-                    <li>
-                        <label>Select a number:</label>
-                        <label class="select">
-                            <select class="custom">
-                                <option value="1">One</option>
-                                <option value="2">Two</option>
-                                <option value="3">Three</option>
-                            </select>
-                        </label>
-                    </li>
-                    <li class="tip darker" data-icon="help mini">It's a special form element you must set the label with class "select"</li>
-                </ul>
-            </div>
-        </article>
-
-        <article id="form-checkbox" class="list">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="write">Example of checkbox</li>
-                    <li style="height: 32px;">
-                        <label class="onleft" data-icon="twitter"></label>
-                        <label class="checkbox onleft"><input type="checkbox" id="checkbox-0"/></label>
-                    </li>
-                </ul>
-            </div>
-        </article>
-
-        <article id="form-radio" class="list">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="write">Example of radio</li>
-                    <li>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
-                    </li>
-                </ul>
-            </div>
-        </article>
-
-        <article id="form-radio" class="list">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="write">Example of radio</li>
-                    <li>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
-                    </li>
-                </ul>
-            </div>
-        </article>
-
-        <article id="form-label" class="list scrollable">
-            <div class="container indented" style="height: 512px;">
-                <h1 class="title">Tips examples</h1>
-                <ul class="form">
-                    <li class="anchor">Examples of tips</li>
-                    <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                    <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                    <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-
-                    <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                    <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                    <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                </ul>
-
-                <h1 class="title">Anchor & Label example</h1>
-                <ul class="form">
-                    <li class="anchor" data-icon="home">Example of anchor</li>
-                    <li><label>Example of label</label></li>
-                </ul>
-            </div>
-        </article>
-    </section>
-
     <!-- ============================= lists ============================= -->
 
     <section id="lists">

src/lib/iscroll-lite.js

@@ -75,7 +75,15 @@ var m = Math,
 
 			// Events
 			onRefresh: null,
-			onBeforeScrollStart: function (e) { e.preventDefault(); },
+			onBeforeScrollStart: function (e) {
+				//e.preventDefault();
+				var target = e.target;
+                while (target.nodeType != 1) target = target.parentNode;
+
+                if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
+					e.preventDefault();
+                }
+			},
 			onScrollStart: null,
 			onBeforeScrollMove: null,
 			onScrollMove: null,
@@ -103,7 +111,7 @@ var m = Math,
 		that.scroller.style[vendor + 'TransitionDuration'] = '0';
 		that.scroller.style[vendor + 'TransformOrigin'] = '0 0';
 		if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)';
-		
+
 		if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose;
 		else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
 
@@ -121,7 +129,7 @@ iScroll.prototype = {
 	y: 0,
 	steps: [],
 	scale: 1,
-	
+
 	handleEvent: function (e) {
 		var that = this;
 		switch(e.type) {
@@ -141,7 +149,7 @@ iScroll.prototype = {
 	_resize: function () {
 		this.refresh();
 	},
-	
+
 	_pos: function (x, y) {
 		x = this.hScroll ? x : 0;
 		y = this.vScroll ? y : 0;
@@ -167,7 +175,7 @@ iScroll.prototype = {
 		if (!that.enabled) return;
 
 		if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
-		
+
 		if (that.options.useTransition) that._transitionTime(0);
 
 		that.moved = false;
@@ -190,7 +198,7 @@ iScroll.prototype = {
 				x = getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '') * 1;
 				y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '') * 1;
 			}
-			
+
 			if (x != that.x || y != that.y) {
 				if (that.options.useTransition) that._unbind('webkitTransitionEnd');
 				else cancelFrame(that.aniTime);
@@ -212,7 +220,7 @@ iScroll.prototype = {
 		that._bind(END_EV);
 		that._bind(CANCEL_EV);
 	},
-	
+
 	_move: function (e) {
 		var that = this,
 			point = hasTouch ? e.touches[0] : e,
@@ -231,7 +239,7 @@ iScroll.prototype = {
 		if (newX > 0 || newX < that.maxScrollX) {
 			newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
 		}
-		if (newY > 0 || newY < that.maxScrollY) { 
+		if (newY > 0 || newY < that.maxScrollY) {
 			newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= 0 || that.maxScrollY >= 0 ? 0 : that.maxScrollY;
 		}
 
@@ -265,10 +273,10 @@ iScroll.prototype = {
 			that.startX = that.x;
 			that.startY = that.y;
 		}
-		
+
 		if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
 	},
-	
+
 	_end: function (e) {
 		if (hasTouch && e.touches.length != 0) return;
 
@@ -334,7 +342,7 @@ iScroll.prototype = {
 		that._resetPos(200);
 		if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
 	},
-	
+
 	_resetPos: function (time) {
 		var that = this,
 			resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
@@ -351,7 +359,7 @@ iScroll.prototype = {
 
 		that.scrollTo(resetX, resetY, time || 0);
 	},
-	
+
 	_mouseout: function (e) {
 		var t = e.relatedTarget;
 
@@ -361,7 +369,7 @@ iScroll.prototype = {
 		}
 
 		while (t = t.parentNode) if (t == this.wrapper) return;
-		
+
 		this._end(e);
 	},
 
@@ -371,7 +379,7 @@ iScroll.prototype = {
 		if (e.target != that.scroller) return;
 
 		that._unbind('webkitTransitionEnd');
-		
+
 		that._startAni();
 	},
 
@@ -409,7 +417,7 @@ iScroll.prototype = {
 			else that._resetPos(0);
 			return;
 		}
-		
+
 		animate = function () {
 			var now = Date.now(),
 				newX, newY;
@@ -429,21 +437,21 @@ iScroll.prototype = {
 			that._pos(newX, newY);
 			if (that.animating) that.aniTime = nextFrame(animate);
 		};
-		
+
 		animate();
 	},
 
 	_transitionTime: function (time) {
 		this.scroller.style[vendor + 'TransitionDuration'] = time + 'ms';
 	},
-	
+
 	_momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
 		var deceleration = 0.0006,
 			speed = m.abs(dist) / time,
 			newDist = (speed * speed) / (2 * deceleration),
 			newTime = 0, outsideDist = 0;
 
-		// Proportinally reduce speed if we are outside of the boundaries 
+		// Proportinally reduce speed if we are outside of the boundaries
 		if (dist > 0 && newDist > maxDistUpper) {
 			outsideDist = size / (6 / (newDist / speed * deceleration));
 			maxDistUpper = maxDistUpper + outsideDist;
@@ -465,11 +473,11 @@ iScroll.prototype = {
 	_offset: function (el) {
 		var left = -el.offsetLeft,
 			top = -el.offsetTop;
-			
+
 		while (el = el.offsetParent) {
 			left -= el.offsetLeft;
 			top -= el.offsetTop;
-		} 
+		}
 
 		return { left: left, top: top };
 	},
@@ -501,7 +509,7 @@ iScroll.prototype = {
 		that._unbind(CANCEL_EV);
 		that._unbind('mouseout', that.wrapper);
 		if (that.options.useTransition) that._unbind('webkitTransitionEnd');
-		
+
 		if (that.options.onDestroy) that.options.onDestroy.call(that);
 	},
 
@@ -540,7 +548,7 @@ iScroll.prototype = {
 		that.stop();
 
 		if (!step.length) step = [{ x: x, y: y, time: time, relative: relative }];
-		
+
 		for (i=0, l=step.length; i<l; i++) {
 			if (step[i].relative) { step[i].x = that.x - step[i].x; step[i].y = that.y - step[i].y; }
 			that.steps.push({ x: step[i].x, y: step[i].y, time: step[i].time || 0 });
@@ -575,11 +583,11 @@ iScroll.prototype = {
 		this._unbind(END_EV);
 		this._unbind(CANCEL_EV);
 	},
-	
+
 	enable: function () {
 		this.enabled = true;
 	},
-	
+
 	stop: function () {
 		cancelFrame(this.aniTime);
 		this.steps = [];
@@ -591,4 +599,4 @@ iScroll.prototype = {
 if (typeof exports !== 'undefined') exports.iScroll = iScroll;
 else window.iScroll = iScroll;
 
-})();
+})();