Let’s say you have a situation where you need to read JSON data from an API and you don’t have plug-in credentials to access the API directly, but you can see the JSON data that is output from the API on a page. In this case, you can still get the data if you “scrape” … Continue reading JavaScript: How to call a Python script and get the results via jQuery
JavaScript Language
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
Handlebars: How to iterate through an array of objects
When using the Handlebars.js templating system, a common need is to be able to iterate through an array of JavaScript objects in order to build an HTML list. This is useful for ‘Atomic’ web programming, where a component is defined, and you may have a dynamic number of such components in your database. For example, … Continue reading Handlebars: How to iterate through an array of objects
jQuery: How to launch a file upload dialog from a text field
I have a text field with placeholder text that says “No file chosen”. I wanted to add functionality to this so that if the text field is clicked it launches a file upload dialog. Then when a file is chosen, I want the name of the chosen file to appear in the text field. This … Continue reading jQuery: How to launch a file upload dialog from a text field
jQuery: How to create a textarea character countdown for Twitter
Twitter has a 280 character limit for tweets. If you need to build an input form that will remotely post tweets to Twitter, you will need to make sure that the messages are not too long. In this article I will show how to build a textarea that has a text counter attached to it … Continue reading jQuery: How to create a textarea character countdown for Twitter
JavaScript: How to create a looping tabindex cycle
Let’s say you have a modal with a form in it and you want to have tighter control over what happens when the user uses the Tab button on their keyboard. Without setting controls, it is possible for the user to tab through the text boxes in the modal and change the focus to other … Continue reading JavaScript: How to create a looping tabindex cycle
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
AngularJS: How to write a simple To Do app
In this article I will describe how to create a simple “To Do” app in AngularJS and write about some of the basic concepts of AngularJS. The app I will be describing looks like this: Step 1: AngularJS CDN To create an AngularJS app, the first thing you will need is a CDN in … Continue reading AngularJS: How to write a simple To Do app
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
JavaScript: How to calculate the number of days between two dates
The following function takes in two dates and returns the number of days between them: // Calculate the difference of two dates in total days function diffDays(d1, d2) { let numDays = 0; let tv1 = d1.getTime(); // msec since 1970 let tv2 = d2.getTime(); numDays = (tv2 – tv1) / 1000 / 86400; numDays … Continue reading JavaScript: How to calculate the number of days between two dates