HTML
  Home arrow HTML arrow Preloading HTML Content with CSS
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Preloading HTML Content with CSS
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 32
    2005-01-12

    Table of Contents:
  • Preloading HTML Content with CSS
  • Rotating HTML content with JavaScript
  • Hiding HTML content with CSS
  • Building a HTML content rotator with CSS
  • Building a simple drop-down menu with CSS
  • Code explanation to the rescue

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Preloading HTML Content with CSS


    (Page 1 of 6 )

    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.

    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.

    More HTML Articles
    More By Alejandro Gervasio


       · But two things should be considered:1) Don't hide things with CSS and show them...
       · I agree with you about your points 1-2. The subject of this article was showing an...
       · Well, that a lot of sites fail is not a reason to keep it that way. In fact,...
       · Hi again,You're correct about that. I'm on the side of doing web development the...
     

    HTML ARTICLES

    - Comparing Browser Response to Active Client ...
    - Testing Browser Response to Active Client Pa...
    - Active Client Pages: Completing the Code for...
    - ACP and Browsers: Setting up an Example
    - How Browsers Respond to Active Client Pages
    - Completing a Tree with Active Client Pages
    - HTML Form Verification and ACP
    - Building an ACP Tree
    - Completing an ACP 3D HTML Table Image Gallery
    - Building an ACP 3D HTML Table Image Gallery
    - A Multiple Page Image Gallery with Active Cl...
    - Building an Image Gallery with Active Client...
    - Concluding a Menu for All Browsers
    - A Vertical Menu for All Browsers
    - Downloading Long HTML Pages with ACP







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 Hosted by Hostway
    Stay green...Green IT