Home arrow HTML arrow Page 3 - Preloading HTML Content with CSS

Preloading HTML Content with CSS

Website designers often use JavaScript to expose dynamic content to visitors. Sadly, updating JavaScript can be painful at best. CSS can help to overcome JavaScript's limitations -- and the two together open up some lovely possibilities. Alejandro Gervasio explains, with dynamic examples.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 48
January 12, 2005
  1. · Preloading HTML Content with CSS
  2. · Rotating HTML content with JavaScript
  3. · Hiding HTML content with CSS
  4. · Building a HTML content rotator with CSS
  5. · Building a simple drop-down menu with CSS
  6. · Code explanation to the rescue

print this article

Preloading HTML Content with CSS - Hiding HTML content with CSS
(Page 3 of 6 )

As mentioned previously, hiding regular HTML content from being viewed initially, and then presenting it to the user based on a programmatic schema, is a two-step process which can be easily achieved with the use of CSS and JavaScript respectively. First we select which page’s sections will be hidden from view by applying the display: none property to each of the selected elements, preloading that content in a background process (while the page is loading into the browser). In the second step, we manipulate those elements by the logic of JavaScript code, to be showed to the end user according to the desired functionality and visual effect.

The CSS code for hiding selected content is basically the following:

.hidden {
 display: none;

Having defined the “hidden” class, with the display property set to “none,” each element which the class is applied to will be initially hidden, creating a set of elements susceptible to being deployed by utilizing a controllable script.

As you may have guessed, building a hidden structure as a transparent process to the visitor, and having the ability to manipulate it as we wish, is an extremely powerful technique that can be exploited to achieve a huge range of effects, with little effort from us.

From dynamic forms, to content rotators, drop-down menus, or image galleries, to name a few, Web designers can use this technique for almost endless creative possibilities. For the scope of this article, we’ll show some detailed examples implementing this approach. The rest of the possible applications will be left as homework for your own future inspiration. So, what are we waiting for? Let’s dive into the first example, which involves rewriting the content rotator previously presented using the new technique.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials