improve documentation + fixed keyboard navigation in chapters and sub…

…title menu

demos/css/styles.css

@@ -37,7 +37,7 @@ div#sidebar {
 	ul.toc_section {
 		font-size: 11px;
 		line-height: 14px;
-		margin: 5px 0 0 0;
+		margin: 5px 0 15px;
 		padding-left: 0px;
 		list-style-type: none;
 		font-family: Lucida Grande;

demos/demo-js/src/behavior.js

@@ -20,7 +20,7 @@ webshims.ready('jquery', function($){
 
 		var headings = $('h2[id],h3[id]').map(function(i, el){
 			return {
-				top: $(el).offset().top,
+				top: $(el).offset().top - 10,
 				id: el.id
 			};
 		});
@@ -55,7 +55,7 @@ webshims.ready('jquery', function($){
 			};
 			return function(){
 				clearTimeout(timer);
-				timer = setTimeout(fn, 1);
+				timer = setTimeout(fn, 9);
 			};
 		})();
 

demos/demos/cfgs/list-datalist.html

@@ -260,7 +260,7 @@
 												<div class="checkbox">
 													<label>
 														<input type="checkbox" name="valueCompletion" />
-														valueCompletion
+														valueCompletion (typeahead)
 													</label>
 												</div>
 												<div class="checkbox">

demos/index.html

@@ -1718,11 +1718,27 @@ <h3 id="Changeing-UI">Customizing styles and UI</h3>
 
 			<p>Webshim offers a lot of different config options to change the behavior of widgets and controls. The pre-defined styles loaded by webshim are just an offer. A developer is appealed to enhance/change those styles. Even all animation are done with CSS and can be changed.</p>
 			<p>Webshim pre-defined selectors are sometime overqualified to minimize conflicts with existing page styles.</p>
-			<p>There are two main different strategies to write custom styles. In case you only want to make small changes, you can simply override the styles with your own modification. But in case you either want to have full control or need to make more changes, it is wise to set <code class="i">loadStyles</code> to <code>false</code> and write you own styles.</p>
+			<p>There are two different main strategies to customize webshim widget's styles. In case you only want to make small changes, you can simply override the styles with your own modification. But in case you either want to have full control or need to make more changes, it is wise to set <code class="i">loadStyles</code> to <code>false</code> and write you own styles.</p>
 			<p>In case you are setting <code class="i">loadStyles</code> to <code>false</code> you can either start from scratch or grab/copy the default styles from webshim included in the <a href="../js-webshim/dev/">dev folder</a>.</p>
 
 <pre><code class="language-javascript">
 webshim.setOptions('loadStyles', false);
+</code></pre>
+
+			<p>Some widget's also use inline styles to calculate the position or the dimension of the widget. This can be turned off depending on the widget settings. (Pro Tip: This can also improve performance, especially in old IE8 or some mobile browsers.):</p>
+
+<pre><code class="language-javascript">
+webshim.setOptions({
+	loadStyles: false,
+	'forms-ext': {
+		widgets: {
+			calculateWidth: false
+		}
+	},
+	track: {
+		positionDisplay: false
+	}
+});
 </code></pre>
 
 			<p>In case you have made some nice changes and want to share those with the community, feel free to add those to the <a href="demos/themes/themes.html">themes-directory</a> and do start a <abbr title="pull request">pr</abbr>.</p>

js-webshim/dev/shims/jme/mediacontrols-lazy.js

@@ -1418,8 +1418,8 @@ webshims.register('mediacontrols-lazy', function($, webshims, window, doc, undef
 				var buttons = this.buttons.not(':disabled');
 				var activeButton = buttons.filter(':focus');
 
-				activeButton = buttons[buttons.index(activeButton) + dir] || buttons.filter(dir > 0 ? ':first' : ':last');
-				activeButton.trigger('focus');
+				activeButton = (activeButton[0] && buttons[buttons.index(activeButton) + dir]) || buttons[dir > 0 ? 'first' : 'last']();
+				$(activeButton).trigger('focus');
 				e.preventDefault();
 			}
 		},

src/shims/jme/mediacontrols-lazy.js

@@ -1418,8 +1418,8 @@ webshims.register('mediacontrols-lazy', function($, webshims, window, doc, undef
 				var buttons = this.buttons.not(':disabled');
 				var activeButton = buttons.filter(':focus');
 
-				activeButton = buttons[buttons.index(activeButton) + dir] || buttons.filter(dir > 0 ? ':first' : ':last');
-				activeButton.trigger('focus');
+				activeButton = (activeButton[0] && buttons[buttons.index(activeButton) + dir]) || buttons[dir > 0 ? 'first' : 'last']();
+				$(activeButton).trigger('focus');
 				e.preventDefault();
 			}
 		},