WH

Getting the Right 'this'

With jQuery, you often find yourself using an event listener with a callback function like so:

// Common Event Handler

$(document).ready(function () {
  $(".my-element").click(function () {
    console.log("this is ", this);
  });
});

Detect Max Screen Width

When a browser is zoomed in or resized, the reported maximum device screen width may not be what you expect. For example, you have a 1280px by 800px screen and fully maximized browser screen at 100% zoom level, but when you zoom into the page and use window.innerWidth to determine the max width, the value may not be 1280px.

Run Mocha on the Client Side

Install Nvm to install Node by following instructions here. Nvm allows you to switch to different versions of Node to manage dependencies. Install Component after Node is properly setup from here. Component is an asset management tool for the client side. After Nvm, Node and Component are working properly, make a directory on the desktop and change to it.

Concatenating when Logging without the Plus Sign

You can use the comma in place of the plus sign when concatenation is needed.

// Give the Comma a Try When Logging

var stuff = "my stuff";
// the comma acts like the plus to concatenate your strings
console.log("some text:", stuff);

Get Element's Attribute Value or Status

With JQuery, you can do this $('#your-element').hasClass('a-class') to check if the element has a certain class. The problem is that you have to know the class name ahead of time when you use .hasClass. I wanted a general way to know if the class attribute actually exists on the element, so I created the getAttrStat function for JQuery to see if the attribute in question on the element is undefined, empty, or has a value without knowing the attribute value ahead of time.

Get Child Divs to Align Vertically with Spacing

You may find yourself having to align fixed-height divs that are nested within a parent div. For example, you might have images that need equal spacing at the top and the bottom. In order to do this, set a margin-bottom on all the child divs (B, C, D) within the parent div (A).

Solutions to Common JavaScript Problems

Problem

Alerting an object returns [object Object].