Back to Home

Instantly Hide Page Elements

To hide page elements without IE showing them for a split second when the page loads, add an id to your body tag as soon as the DOM loads. You'll want to do this even before you load any JavaScript libraries like jQuery or Prototype.

This is what your page layout should look like:

<!DOCTYPE HTML>  
<html>  
<head>  
  <!-- Header content -->  
</head>  
<body>  
  <!-- Page content -->  
  <script type="text/javascript">  
document.getElementsByTagName('body')[0].id = 'js';  
  </script>  
  <!-- Load your JS libraries and scripts here -->  
</body>  
</html>

This will add the 'js' id to your body tag only if the user has Javascript enabled. Adding the script right away makes sure that the elements are hidden as soon as possible, rather than having to wait for jQuery/Prototype to load, etc...

Then, in your CSS file create a selector for your element like so:

#element {  
  /* css for all users */  
}  
body#js #element {  
  /* css for javascript enabled browsers */  
  display: none;  
}

This will hide the element so you can display it later with your JavaScript code, but show it for non-JavaScript users. Ahhh, beautiful degradation.

Related Posts

The essential design concepts I use when developing an evolvable, distributed system.

Read More

How can we continuously integrate small changes while practicing acceptance test-driven development?

Read More

TDD and Testing Behavior

January 24, 2024

The importance of testing behavior when using test-driven development

Read More

When is it appropriate to use centralized orchestration versus event-driven choreography?

Read More

When defining a business problem and planning its solution, keep the two conversations separate...

Read More

Modern message brokers provide many important benefits to a distributed system...

Read More

Printable cheat sheets to help remember some of Uncle Bob's valuable contributions to the industry

Read More

Why Terraform?

December 25, 2019

Terraform leads the way in the infrastructure-as-code world...

Read More

I was looking for a quick and easy way to put together a personal static site and...

Read More

A few weeks ago, I decided to try Svelte's Sapper framework to handle the front-end of a simple app...

Read More

After years of consulting, I find myself continually coming back to three basic principles of system design...

Read More

In this fifth and final part of the Go middleware tutorial series, we'll use what we've learned to create a more structured API example...

Read More

Go Middleware - Part 4

February 24, 2019

In this fourth part of the Go middleware tutorial series, we'll discuss passing custom state along the request chain.

Read More

Go Middleware - Part 3

February 15, 2019

In this third part of the Go middleware tutorial series, we'll quickly look at a common variant on the recursive middleware implementation from part 2.

Read More

Go Middleware - Part 2

February 9, 2019

In this second part of the Go middleware tutorial series, we'll cover a recursive approach that provides a couple benefits beyond the simple loop chain example from part 1.

Read More

Go Middleware - Part 1

February 6, 2019

This is the first in a series of simple tutorials explaining the usage of HTTP middleware in Go.

Read More

How do we manage the architectural complexity that inevitably arises from using cloud services?

Read More

This Old Blog

January 20, 2019

I've decided to resurrect this old blog to publish some nuggets about software architecture and development, and perhaps...

Read More

Drupal 6 Theme Info Error

September 14, 2011

Recently one of my client sites had an issue where the custom theme info was corrupted...

Read More

Here's a slight modification to the handy Google Bookmarks Bookmarklet...

Read More

While building a Drupal site for one of my clients, I was having a heck of a time integrating...

Read More