Home arrow HTML arrow 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
(Page 1 of 6 )

When we’re dealing with the common task of fetching some dynamic content to our Web pages to make them more appealing and juicy to visitors, usually we retrieve some database records with dynamic information, properly format them for visual presentation, and finally deliver the visual output to the user’s browser. We congratulate ourselves for that efficient and versatile process; it’s really a nice and straightforward task.

Although most well-structured websites heavily rely on database contents, at times, it’s necessary and even desirable to expose some dynamic content based on client-side techniques. JavaScript becomes extremely handy when we’re dealing with this scenario, since it is used extensively for displaying content on demand in our Web pages. However, one of the great drawbacks of using JavaScript to perform that task is that all of the contents have to be stored in variables, within the scripts. This approach makes adding and updating content a very painful and annoying experience.

With the help of CSS, we can improve this situation. CSS helps us to break out of some of the intrinsic JavaScript limitations, so that common HTML content can be displayed dynamically accordingly to the logic of the master script, without having to deal directly with JavaScript variables. This way, updating or adding content to our Web page can be a more pleasant process.

Over the next few paragraphs, we’ll be demonstrating how to preload regular HTML content by hiding it from view initially, utilizing the well supported CSS attribute display: none. By implementing this attribute, we can selectively hide different sections of Web pages, and then programmatically bring them back to life, according to the script’s logic. With the core idea in hand, we’ll see some examples employing this CSS technique, proving how powerful it can be. So, let’s move on to find out more.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials