Below you will find pages that utilize the taxonomy term “JavaScript”


The JavaScript Document Events. Various examples and resources. DOMContentLoaded Checking whether loading is already complete function doSomething() {'DOM loaded'); } if (document.readyState === 'loading') { // Loading hasn't finished yet document.addEventListener('DOMContentLoaded', doSomething); } else { // `DOMContentLoaded` has already fired doSomething(); }

Lory Carousel uiCookbook Updates

I’ve added a couple examples for using Lory, the vanilla javascript carousel to my uiCookbook repo on GitHub. What is vanilla javascript? It’s plain JS. These javascript examples will run without jQuery in modern web browsers. Lory Carousel Recipies Lory carousel is a touch enabled minimalistic slider written in vanilla JavaScript. This is a Sandbox Demo of a Lory slider with a dot style pager, next and previous navigation.


Image Lazy Loader <img data-src="" alt="Above it All. A photo by @anthonyintraversato on Unsplash"/> const imgList = document.querySelectorAll('img[data-src]'); // lazy load images Array.from(imgList).forEach(el => { el.setAttribute('src', el.getAttribute('data-src')); el.onload = function() { el.removeAttribute('data-src'); }; }); const nodeList = document.querySelectorAll('myclassname'); Array.from(nodeList).forEach(el => { if (el !== null) { (async() => { await import(`app/module/${el.dataset.component}`); })(); } });

Slick Carousel Responsive slidesToShow Recipe

Designs typically require more than the out of the box demos provide, which is understandable. The slick carousel demos will get you most of the way there and provide examples for various settings. This post is an example of how to dynamically update the slick slidesToShow value as the viewport is resized, demo. Getting Started In this tutorial, we’re using the Parcel web application bundler to compile all of source code and load it in a development web server.

How To Create a WordPress Shortcode for flickr Albums

How to create a WordPress custom shortcode to display photos from flickr. This post documents using the Slick Lazy Load Photo Grid along with the flickr API to render photo albums in Wordpress Posts wherever the shortcode is entered. Webpack 4, autoprefixer, and babel are included for building the JS and CSS. Requirements flickr API key. From their API page, select the Create an App link for more information on how to request an API key.

CSS Flexbox with Sidebars Toggle

This post documents how to create a fully responsive flexbox content layout that contains a pure CSS open/close toggle for the left and right sidebars. The CSS is built from Sass using Webpack with Autoprefixer. For development, a Webpack Dev Server is included. Features Pure CSS Sidebar toggle Sass CSS preprocessor PostCSS Autoprefixer CSSnano Webpack 4 Webpack Dev Server demo and edit this code in our online sandbox

Webpack 3 Sass cssnano Autoprefixer Workflow II - Page 2

Sass Install the loaders to preprocess the Sass files. SASS Loader compiles Sass to CSS, also requires node-sass. npm install --save-dev sass-loader node-sass PostCSS Loader processes CSS with PostCSS. npm install --save-dev postcss-loader CSS Loader resolves import at-rules and url functions in the CSS. npm install --save-dev css-loader Style Loader inlines <style></style> in the DOM. npm install --save-dev style-loader URL Loader and Resolve URL Loader handle relative paths.

Webpack 3 Sass cssnano Autoprefixer Workflow II

This follow up to the basic Webpack 3 Sass preprocessor workflow I wrote about here includes how to handle processing of relative URLs in the Sass for things like fonts and images. Ken Wheeler’s popular Slick carousel contains these asset types in its Sass, so let’s use that for this exercise. Getting Started Prerequisite: Node.js with npm. Navigate to the project root in your CLI, such as Terminal, Cygwin or PowerShell.

Slick Lazy Load Photo Grid Using Webpack 3

How to layout and lazy load images in a flexible grid similar to how facebook displays them in a post. Selected images open a lightbox for previewing within a carousel. Image alt text is converted into a caption below the image. YouTube Video Features Lazy image loading ES6 transpiler JavaScript source maps Sass CSS preprocessor PostCSS Autoprefixer CSSnano Webpack 3 Demo Source Code Getting Started If you don’t already have Node.

Google Maps API with Webpack

Google Map application that uses a draggable location marker to set address, longitude and latitude geocode inputs. This post covers some of the Webpack tools for both a local development environment and production build of the app constructed of a few JavaScript modules and css. For application details, I encourage you to read my Google Maps API with Browserify post from a year ago. The following overview highlights building the refactored code with Webpack.

Laravel User Authentication with Ajax Validation

This post documents how to add Ajax form validation to Laravel User Authentication that is generated by the Artisan console. Requirements An instance of Laravel 5.2 setup for local development is required. Head over to the Laravel 5.2 docs to get setup as needed. For my setup on Windows 10, I am using XAMPP 5.6.12 which meets all of the requirements. Note that your document root will need to be the laravel/public directory.

Design Patterns

Design patterns are reusable solutions to commonly occurring problems in software design. – Addy Osmani Constructor Pattern All methods and properties of the object are added in the constructor. function Track(artist, title, year) { this.artist = artist; this.title = title; this.year = year; this.trackInfo = function() { return this.title + ", by " + this.artist + ", Year released: " + this.year; }; } var theFixer = new Track("Pearl Jam", "The Fixer", 2009); var lazaretto = new Track("Jack White", "Lazaretto", 2014); console.

Google Maps API with Browserify

This post documents how to use local JavaScript modules with Browserify and the Google Maps JavaScript API. In this example, the Google Map contains a marker that can be dragged to reset the browser form with the marker position location data. Additionally, Browserify shim is used to require jQuery since it is already being loaded from a CDN. Requirements Node.js which includes NPM. Browserify Gulp Command shell such as terminal, Cygwin or Windows Command prompt.

Javascript Frameworks

After discovering yet another interesting Javascript framework for the web application development recently (Vue.js), I decided to put together this short list of some the emerging and more popular frameworks out there today for building user interfaces. Emerging []( “Mithril”)Mithril is a light-weight robust MVC framework with no dependencies, a small API and small learning curve. Mithril implements a virtual DOM tree similar to React.js, however Mithril’s uncompiled templates run natively in the browser and compile into static Javascript data structures.

Google Maps API RequireJS Module

This post documents how to create a RequireJS module that loads the Google Maps JavaScript API and is used by a web page to populate form inputs with location data. The Google Map contains a marker that can be dragged to reset the form with the marker position location data. Source Code Development Environment In order to use the package managers, Gulp task runner, BrowserSync and RequireJS optimizer, you will need to have the following installed.

Browserify with Sourcemaps

Browserify lets you write modular JavaScript in node.js style. At the beginning of each module you write, the respective dependencies are added using require statements. Then Browserify compiles the modules along with all of the dependencies into an optimized JavaScript file for use in the browser. If jQuery has already been loaded by a CDN or otherwise, a Browserify Shim can be used to include global jQuery as a module.

AngularJS v2:

At ng-conf 2015 last month it was announced that AngularJS 1.X will continue to reside at and Angular 2.0 will be hosted at The new version of Angular is not a major update, it is a complete rewrite. In February, Brad Green announced that Angular 2 was officially Alpha in this First look at App Development in Angular2 video. During the ng-conf 2015 keynote, Brad and Igor talked about some of the big work that is being done on Angular 1 is work that will be shared in Angular 2, including:

Best Practices

Here are a few Best Practices to follow when coding in JavaScript. White Space Follow these recommendations so commits and diffs will be easier to read. Do not mix spaces and tabs. Configure the editor to “show invisibles”. For example, in Sublime Text, the setting is "draw_white_space": "all". Configure the editor to remove end of line whitespace. Choose one, spaces or tab indentation for all JavaScript the team is writing for the project.

Callback Functions

Simple Callback Function Example <button id="brew">Brew</button> //init when window loaded function init() { document.getElementById('brew').onclick = function() { brew(param, function() { alert('Finished brewing ' + param + ' coffee'); }); }; var param = 'dark roast'; function brew(param, callback) { alert('Started brewing ' + param + ' coffee'); callback(); }; } window.onload = init;

JavaScript Templating Options

Javascript templating is a technique to render JSON data in HTML markup with JavaScript. Handlebars is a semantic web template system, started by Yehuda Katz in 2010. Handlebars.js is a superset of Mustache, and can render Mustache templates in addition to Handlebars templates. The document body will need an element that the template will be injected into. Since the template in this example will be a list item for each artist, an unordered list element is the logical choice.

Wordpress Theme Javascript Optimization

This post shows how to combine and minify multiple javascript files in a Wordpress theme into one javascript file. The benefit is a single request to a javascript file that has been compressed by minification - Wikipedia”) instead of multiple request to larger javascript files. package.json The package.json file contains meta data about your app or module and it includes the list of dependencies to install from Node Package Manager (NPM) when running npm install.

Helper Functions

These are some JavaScript functions I saved here because I couldn’t find an equivalent in Underscore.js or lodash or didn’t need the overhead of the whole library. find index by key value // find index of an object in an array by key and value var _findIndexOf = function(array, key, value) { var i; for(i = 0; i < array.length; i++) { if(array[i].hasOwnProperty(key) && array[i][key] === value) { return i; } } return -1; } filename from path // get the filename from a path without using regex var _filename = function(path) { return path.

Grunt JavaScript Task Runner

This tutorial describes how to setup and use the Grunt JavaScript task runner to automate repetitive tasks such as minification and compilation. Grunt is installed using npm, the Node.js package manager. You will also need Git to work with the tagged source code. This makes it easy to reset and compare your working copy of the code at each step. I discovered commit tags while using the AngularJS tutorial.


Window The window object represents the browser window or frame and also inherits all of the global JavaScript core properties History Location Navigator Screen Document The Document object represents the root node of HTML, XHTML and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects.


The JavaScript Document object is the root node of the document tree in HTML, XHTML and XML documents.[]( “search?q=javascript+window.document”) Properties Anchor The anchor object represents the HTMLAnchorElement. // show the number of anchors in the document alert(document.anchors.length); BaseURI The baseURI object is a string that represents the absolute base URL of a node. Not supported in Internet Explorer. alert(node.baseURI); Body The body object represents the HTML body element.

DotNetNuke CSS and JS Module Development - Part One

During module development, to see all of the js and css files in firebug or your favorite client debugging tool of choice, turn off the file combination provider. In this section at or near the bottom of your web.config, set the provider enableCompositeFiles attributes from true to false as shown in the example below. <clientDependency version="2" fileDependencyExtensions=".js,.css"> <fileRegistration defaultProvider="LoaderControlProvider"> <providers> <add name="DnnBodyProvider" type="DotNetNuke.Web.Client.Providers.DnnBodyProvider, DotNetNuke.Web.Client" enableCompositeFiles="false" /> <add name="DnnFormBottomProvider" type="DotNetNuke.

ISO Date Time

Useful javascript for converting an iso DateTime string into a javacript Date object. The Date.prototype.setISO8601 function is from  Go Converted Date Time: Fiddle with this function isoToDateTime(value) { var output = ''; if (value != '0001-01-01T00:00:00') { var d = new Date(); d.setISO8601(value); //desired output format: 5/17/2011 8:34:56 AM - below does not return local time output = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.