In a react script, for every function in both the parent and child components we must have this magic line using .bind(this)in the constructors: this.nameOfFunction = this.nameOfFunction.bind(this); For example: // Parent with a incrementNumberTurns() function: this.incrementNumberTurns = this.incrementNumberTurns.bind(this); // Child with a handleClick() function: this.handleClick = this.handleClick.bind(this) Here is an example from the parent component … Continue reading React: Using .bind(this) on parent and child components
Author: Chris Nielsen
jQuery: How to scroll to a div
When you first land on a page, it is possible to have the page scroll down to some remote div further down the page, using a little bit of jQuery. For example, if the remote div is called “remoteDiv”, this jQuery will automatically scroll down to the div when the page loads: $(“.remoteDiv”).ready(function() { $(‘html,body’).animate({ … Continue reading jQuery: How to scroll to a div
HTML & CSS: How to change text color based on background color
Let’s say we have a progress bar with some text in it and the background is a light color. We want the font to be dark enough to contrast with the light background. Then as the progress bar or meter fills up with a darker color, we want the font color to adjust (lighter font … Continue reading HTML & CSS: How to change text color based on background color
Atom: How to enable and style editor scrollbars
To enable scrollbars in the Atom code editor, you will need to open and edit Atom’s styles.less file. This can be done by clicking File –> Stylesheet… For example: Step 1: Open the Atom styles.less file for editing Step 2: Paste the following webkit-scrollbar code Here is the code that can be pasted: .scrollbars-visible-always … Continue reading Atom: How to enable and style editor scrollbars
JavaScript: How to get N largest numbers in an array using sort( ) and slice( )
Where this previous article explained how to get the max number in an numeric array: JavaScript: How to get the largest number in an array using Math.max( ) There are times where we want more than just the single highest value in an array. What if we want the top 2, 3 or 5 numbers … Continue reading JavaScript: How to get N largest numbers in an array using sort( ) and slice( )
JavaScript: How to get the largest number in an array using Math.max( )
If we want the largest one number in an array, we can get that using JavaScript’s Math.max() function. Simply place the array of values (without square brackets) into the parenthesis of the function. Like so: console.log(Math.max(1, -5, 2, 8, 17, 0, -2)); Which yields: 17 A list of all negative numbers: console.log(Math.max(-11, -8, -2)); Which … Continue reading JavaScript: How to get the largest number in an array using Math.max( )
JavaScript: How to get a random index from an array
Let’s say I have an array of 100 integers that looks like this: let hundred = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, … Continue reading JavaScript: How to get a random index from an array
HTML & CSS: How to set up a Bootstrap 3 modal
In this article I will show how to set up a modal using Bootstrap 3. This example looks like this at 800px width: To set up a Bootstrap 3 modal, we will need these three resources: bootstrap.min.css bootstrap.min.js jquery.min.js These can be called via CDN at the top of our HTML file. For example: <link … Continue reading HTML & CSS: How to set up a Bootstrap 3 modal
jQuery: How to make room between divs when clicking a div to show hidden content
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: 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