Handlebars: How to use templates

Handlebars supports multiple templates in the same Single Page Application. To use templates with Handlebars, you must define a template id in the opening Handlebars script tag. For example, in this case the name of the template is “verse-set-grid”: <script id=”verse-set-grid” type=”text/x-handlebars-template”> The pattern for a template is: <!– 1. Opening script tag with the … Continue reading Handlebars: How to use templates

JavaScript: How to create a custom range slider using bootstrap-slider

This article describes how to create a custom HTML range slider using Bootstrap 3, jQuery, HTML, CSS, and a JavaScript package called “bootstrap-slider”.  There are download and installation instructions for this package on github. This slider can be custom styled with CSS and comes with a built-in tooltip. See the graphic below for a description … Continue reading JavaScript: How to create a custom range slider using bootstrap-slider

jQuery: How to toggle switches programmatically

Let’s say you have some HTML/CSS switches in place of a traditional checkbox. jQuery makes it easy to toggle switches on or off. For example: function toggle(){ $(‘.slider’).click(); } Which can be called in a button like so: <button type=”button” class=”btn btn-primary” onClick=”toggle();”>Toggle</button> For example:   Note: This same jQuery can be triggered without clicking … Continue reading jQuery: How to toggle switches programmatically