I created some div bars with HTML & CSS that look like this: and I wanted functionality such that when I click any of the gray div bars, the rest of the divs make room for a hidden blue div to appear below the bar. For example: Then, clicking the bar again will make the … Continue reading jQuery: How to make room between divs when clicking a div to show hidden content
JavaScript Language
JavaScript: How to compare dates
For an explanation of how to get an ISO date-time string, see this previous article: JavaScript: How to create a formatted date time string Let’s say we have two ISO date-time strings that we pulled from a MySQL database and we want to programmatically compare them to see which date is newer. Let’s set them … Continue reading JavaScript: How to compare dates
JavaScript: How to add and subtract days from ISO date-time strings
For an explanation of what an ISO date-time string is, see this previous article: JavaScript: How to create a formatted date time string Now let’s say we get today’s date and we want to also get dates for one week ago and one week in the future. We can get today’s date in the form … Continue reading JavaScript: How to add and subtract days from ISO date-time strings
jQuery: How to use jQuery to reset select menus and text fields
jQuery is a powerful tool in that it allows us to select any DOM element and perform some action on it. In this example, I will show how to use jQuery to select IDs from select menus and a text field and reset them when clicking a div. Example 1 – Resetting selected This … Continue reading jQuery: How to use jQuery to reset select menus and text fields
JavaScript: How to find the count of an element in an array using filter( )
Let’s say we have an array of numbers in JavaScript that looks like this: let array = [1, 2, 3, 5, 2, 8, 9, 2]; and we want to count the number of 2’s in the array. A quick and direct way to get the count of 2’s would be to do something like this: … Continue reading JavaScript: How to find the count of an element in an array using filter( )
JavaScript: How to create a formatted date time string
In JavaScript, to get today’s date and time, all we need to do is use a call to Date() For example: let today = new Date(); This gives us today’s date and the current time, in the form of a Date object that looks like this: ‘Date’ is the key (left), and the value is … Continue reading JavaScript: How to create a formatted date time string
jQuery: How to use jQuery in a project and confirm it is working
The fastest way to make jQuery available for a project is to use a CDN in the HEAD portion of the HTML. For example, here is a CDN for jQuery 3.3.1: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> With this in place, you can confirm that jQuery is available and working by adding this block of JavaScript code to the … Continue reading jQuery: How to use jQuery in a project and confirm it is working
Spacebars: How to handle an empty data container when iterating with #each
In a Meteor project, when using Blaze (Spacebars) to set up iteration through a data container in an HTML template, the normal pattern is to use an ‘each’ block. For example: {{ #each dataContainer }} … HTML tags here … … HTML tags here … {{ /each }} An each block starts with #each and … Continue reading Spacebars: How to handle an empty data container when iterating with #each
Node.js: How to install Node + npm and confirm the installation in less than 5 minutes
To install node.js, start at the nodejs.org website: https://nodejs.org/en/ Then click the green box to download the .msi. This will download the “node-v9.8.0-x64.msi” to your downloads folder. Then click the .msi to install node. I chose to change the path to C:\nodejs . Then once the installation is complete, restart your computer. Once the computer … Continue reading Node.js: How to install Node + npm and confirm the installation in less than 5 minutes
Meteor: How to use an image background in your CSS
To use images in Meteor, we must first create a top level ‘public’ folder and place our images folder inside of it. This is because Meteor is a full stack framework that takes care of both the client side and the server side. On the server side, images would normally be placed in a public/images … Continue reading Meteor: How to use an image background in your CSS