JavaScript

Javascript & DOM Order: getElementById() is 'null'

Just a gentle reminder: looking to modify an element on the page using JavaScript's getElement or querySelector? Make sure your script appears further down the DOM than the element you're trying to change!

I have a feeling this a pretty basic concept in JavaScript, but for those of us who come to the language with a "fake it until you make it" kind of mentality, sometimes you need a simple reminder. Today isn't the first time I've hit this wall. I target a page element to affect some sort of change and JavaScript seems to bug out. Even though the element obviously exists--there's no mistake in the element ID--the console reports an error all the same: i.e., document.getElementById("some-target") is 'null'.

Tags

Flexbox: Styling Top Row Items in Scalable Columns

Touching again on the complexity of making flex-box columns scalable; this time I focus on one of the design challenges with this layout. When child items are burdened with the limits of CSS, sometimes the solution is to think outside of the box, literally, and work with the parent instead.

Background: the Design

I love Flexbox--it's a fundamental in responsive design. As empowering a device as it is, though, it's not without it's limits. It just so happens that I work with a designer who has a real knack for exposing these limits. The minute I think I've got flexbox under control, she'll throw me a design that challenges my every conception of what flexbox is or how it should work. Let's look at a specific point and case--a design I was recently asked to build out:

Tags

CSS & Javascript: Flexbox Columns that Grow with Content

I've had a long standing problem with flexbox--particularly with flexbox columns. The proverbial Elephant in the Room has always been this: a mechanism for automatically letting content grow in one column (i.e., adding consecutive child items) and then overflow into the next doesn't really exist. Today, I look at a fix for this problem--and, all it takes is a little JavaScript.

Outlining the Problem

Let's look at flexbox columns and see what's at stake.

Tags

Responsive Design: Don't Use the Same JavaScript Function Twice

Empty string passed to getElementByID()? Why you can't just duplicate javascript functions for mobile and desktop elements.
browser console showing empty string error
Arg!

I've got a simple JavaScript function that relies on getElementById(); for some reason, even though the element ID is 100% kosher (it exists), when I run the function my browser console gives me an error: "Empty string passed to getElementById()." Both the problem and the

Tags

Javascript: Change Parent Styling if Child Element Exists

SASS/CSS can accomplish magic. Sometimes, however, its logic doesn't go quite far enough, and you need a little help from Javascript.

In Sass/Css, the rules of specificity allow us to create styling at a high level and then override it with minimal effort when it comes to more specific cases. For example, I could go into my site theme and write out a general rule: color all links red. When an exception to that rule arises, I can target the parent element of that specific link (a div, for example) to create a new rule: color all links red, but color any link with the parent X blue.

Tags

Obtaining Cookie Consent with Tag Manager

Here's a simple way to ensure users opt into your site cookies; you won't even break a sweat!

The European Union is ahead of us when it comes to protecting your data on the web. I have a feeling we'll eventually see legislation here in the US, as well, mandating that we be a little more forthcoming with how readily we invade consumer privacy. The General Data Protection Regulation (GDPR) employed in the EU, however, has meant that sites there are now required to obtain free consent from their users in regard to cookies.

Tags

WTF is a Macro? Passing Variables to Tracking Code

A marketing company says they want to pass a "macro" to their tracking script, and that only I can do it. Tag Manager and JavaScript are the answer.

I've never pretended Analytics was my forte; I can handle it, but it's not where most of my energy winds up directed. Like all developers, though, I'm a pro at leveraging Google and StackOverflow to fill in the gaps. Still, every now and then, these vast fonts of wisdom fail to deliver and I come that much closer to developing chronic ulcers.

Tags

Subscribe to JavaScript