How to Make Web Page Boxes Disappear

When I started the recent refresh of this website all I knew was static pages: pages whose layout is fixed. I soon figured out, however, that I wanted something more dynamic: pages that could re-arrange themselves for different devices, and pages with ‘pop-up’ elements. And I had no idea how to achieve that.

This page gives an overview of what I learned. There is nothing here for experienced web developers, but hopefully it may be of interest to other novices out there.

Boxes and Divs

Web pages are laid out using rectangular areas, or boxes, typically represented in HTML code by divs. These boxes can follow each other down the page, or across. They can also be nested inside each other.

The key to flexibility is being able to make individual boxes appear or disappear in response to user actions. This page tells how to do that.

Class Attributes

In HTML5 page elements can have ‘class’ attributes. For example:

<div class = banner>
… content here …
<div>

defines a div and makes it belong to the class ‘banner’. Elements can belong to multiple classes simultaneously using a space-separated list. This div belongs to three classes.

<div class = banner flex noPrint>
… content here …
<div>

CSS3 - Styling Class Members

In CSS3 we can define rules whereby particular styles are only applied to elements belonging to particular classes. This rule sets font-size to 30px for all elements belonging to the ‘banner’ class.

.banner {
font-size: 30px;
}

Making Boxes Invisible

To make a box invisible we do not remove it from our HTML. It remains in our page code but we apply a style that prevents it being seen. Here are two possible approaches:

.banner {
display: none;
}

This method simply tells the browser not to display the box.

.banner {
margin-left: -500px;
}

This method displays the box, but off the page to the left – effectively making it invisible.

So now we have a mechanism to make specific boxes either visible or invisible: we assign them to a class then use a style rule associated with that class to control visibility. All we need to do is make it responsive.

CSS3 Media Queries

One way to do this is to use a CSS3 media query:

@media (max-width: 960px) {
.banner {
display: none;
}
}

This says: if the screen is less than 960px wide cause all members of the banner class not to be displayed. So boxes display or not depending on the viewing device.

Using JavaSript

A second way is to uses a little JavaScript code.

Using JavaScript we can dynamically modify the list of classes to which a div belongs. So here is the plan:

  • Attach a JavaScript script to a trigger/button area of the screen.
  • When the user clicks the trigger/button area this script runs and modifies the membership list of our target div by adding it to a new class.
  • CSS notices that the div now belongs to a new class and applies a rule hiding the div.

Putting It All Together

Here's the HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" media="screen, print" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<div class="button">
Click me ...
</div>
<div class="payload">
... and this will disappear.
</div>
</body>
</html>

And here's the stylesheet.

.button {
color: red;
background-color: pink;
}

.payload {
color: aquamarine;
background-color: darkcyan;
}

.hidden {
display: none;
}

And here is the JavaScript.

"use strict"; // Require variables to be declared prior to use
var button // Represents the 'button' div
var payload // Represents the div that will be hidden


// Called when the 'button' div is clicked.
// Toggles the 'payload' div's membership of the 'hidden' class.
function togglePayload() {
payload.classList.toggle('hidden');
}


// Sets everything up. Called when the page loads.
function init() {
// Connect the button variable with the button div
button = document.querySelector('.button')

// Connect the payload variable with the payload div
payload = document.querySelector('.payload')

// Call the togglePayload function when the button div is clicked
button.onclick = togglePayload;
}
// Run the init function when the page loads.
document.addEventListener("DOMContentLoaded", init, false);

Paste them into you editor and try them for yourself.

www.the-roberts-family.net