Categories
JavaScript Selecting

JavaScript for optimizers #1: Hiding class elements

Our hypothetical case for this chapter is about hiding class elements.

Our client’s research showed that websites should avoid using meaningless design elements because that burdens cognitive load.

Numerous surveys showed that users on their website find the design very confusing.

Business case: Hiding class elements

We use this insight to create a testing hypothesis:

“Because we saw that users find our website confusing, we expect that hiding meaningless design elements will cause an increase in sales. We’ll measure this using conversion-rate.”

We are going to test this hypothesis with the following change: 

Hiding class elements result on testing page
Hiding class elements result on testing page

Code

We will execute this change by running the following JavaScript code on the testing page. Try it out for yourself to see how it works!

var logo = document.querySelector(".custom-logo");
var title = document.querySelector(".entry-header-inner > h1");
logo.style.display = "none";
title.style.visibility = "hidden";

Breakdown

New syntax

The breakdown starts by going over all the new syntax in the example. Future articles will not repeat any of the discussed syntaxes. All the explanations have a link to the full documentation of the syntax if you need more information.

var creates a container for storing data values. This keyword will declare a variable in the global or function scope.

logo is an identifier. This is a sequence of characters that identifies variables, functions, and property’s.

= is an assignment operator and is used to assign a value to the variable.

document.querySelector(selector) returns the first element it matches in the DOM tree. You can select elements by giving a selector as the argument.

.custom-logo is an example of selector. This is the type of selector that we use to select the logo. We tell the method to match the first element with the class custom-logo. You can look for selectors with the chrome browser.

Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS) opens the inspect element feature. 

Hovering over elements will highlight the code that matches it. Here we can see how the custom-logo class is attached to the logo.

Looking at the testing page with the inspect tool.
Looking at the testing page with the inspect tool

; is the end of a JavaScript statement. Each statement tells the computer to do something. You can download a good code editor like Atom and install prettier, so it automatically formats the semicolons and indentations correctly.

.entry-header-inner > h1 is another example of a selector. This example selects the h1 child element of the entry-header-inner class.

.style is a method of an element that allows you to change the CSS styling. It’s followed by another method that specifies the CSS property that you want to change.

.display is a CSS property that controls if an element is treated as a block or inline. It also controls the layout of its children.

= “none” is a display value that removes an element from the accessibility tree. This value makes sure it doesn’t get rendered on the web page anymore.

.visibility is the CSS property that allows you to show or hide elements without the layout shifting.

hidden is the visibility value that hides the elements without affecting the layout.

Logic

In this part, we discuss the actual logic of all the lines of code. I will try to describe what happens in every line of the code.

var logo = document.querySelector(".custom-logo");

The first line of code saves the penguin to a variable with the name logo. It does this by selecting the logo with the querySelector. The logo has the class custom-logo, so this is used as the parameter in the querySelector method. We want to save it to the variable so we can easily hide it later.

var title = document.querySelector(".entry-header-inner > h1");

The second line of code saves the title of the page to the title variable. It looks inside the element with entry-header-inner class to find the first h1.

logo.style.display = "none";

The third line of code hides the logo using the display method. This way will shift the layout up.

title.style.visibility = "hidden";

The fourth and last line of code hides the logo using the visibility method. This way will not shift the layout up. Notice how the title keeps its space even though it’s hidden.

Exercise

The best way to learn JavaScript is to try it. On the testing page, I added an image of myself. I want you to try and hide the image by changing the code. Check out the solution.

This is the image you need to hide on the testing page
This is the image you need to hide on the testing page