Back to the Web Developer's Journal Main Page
internet.com
side nav bar

Normal DHTML pages are limited by their number of layers. More than fifteen is unusual - the file size gets too high. So why not get JavaScript to write all the HTML for the layers using its Write function and a few equations? Amazingly, it works. The result is hundreds of layers and weird and wonderful patterns produced by a tiny file (<2k).
Javascript Articles:

HOW DID THEY DO THAT???

Find out in:
Amazing HTML



Site Map

Jobs at webdeveloper.com


Check out our Web-based
Discussion Groups:

Check out and join our email-based Mailing Lists for Web developers.


Developer Channel
FlashKit
Jobs.webdeveloper
JavaScript.com
JavaScriptSource
JustSMIL
ScriptSearch
Streaming Media World
WebDeveloper.com
WebReference
XMLFiles
WDVL
Discussion Groups Book Reviews Software Reviews Download Web Tools

Over The Top With DHTML

JavaScript Generated Patterns

Andrew Starling

If you're familiar with DHTML, you'll know that layers are widely used. Text and pictures are placed between <div> and </div> tags so they can be moved around the page and selectively displayed.
May 30, 2000

But if you use lots of layers, the page soon becomes large and cumbersome. In practice it's rare to use more than fifteen.

A sneaky way round this is to get JavaScript to write the HTML for the layers, using its Write function and a few equations. And amazingly, it works. The result is hundreds of layers and weird and wonderful patterns produced by a tiny file (<2k) containing a few dozen lines of JavaScript.

Warning - Browser Compatibility

This is on-the-edge stuff and not very safe. All the demonstrations below seem to work on Netscape Navigator 4+. Internet Explorer 5 is also safe. The first four work on IE 4, but the others don't, so watch out. All other browsers (including AOL Explorer) are not recommended.

Note that IE5 is sometimes confusingly referred to as
"Explorer 4 (compatible; MSIE 5...)".

Examples

Each example launches in a new window. Please close the new window to return here. The Back button can cause these pages to crash, so the new window doesn't include one.

  • Diagonal Line

  • Ring

  • Ellipse

  • Small Circular Pattern

  • Wide Circular Pattern

  • Spiralling Pattern

  • Flower Bloom

  • Random (changes each time)

    Note, if an example fails to launch for a second viewing, it's probably because the window it launches into is already open. Find the extra window and close it to see the example again.

    More details about how it all works, including code.

  • Back to the Web Developer's Journal
    Contact WDJ   •    Suits!   •    Propheads!   •    Ponytails!
    Discuss   •    Subscribe   •    Search

    Access FREE EMC OEM Tools:
    Whitepaper:
    XML Processing in Applications--Take the Next Step
    Get the fastest, most scalable, and most complete native XML database.
    Whitepaper:
    Embeddable Content Platform for OEM's
    Save time and money with an easily embeddable content platform with comprehensive content management functionality.

    internet.com

    IT | Developer | Internet News | Small Business | Personal Technology | International | Search internet.com | Advertise | Corporate Info
    Newsletters | Tech Jobs | E-mail Offers

    internet.commerce
    Be a Commerce Partner   Disney World Tickets    Computer Deals    Find Software    Hurricane Shutters    Promotional Gifts    KVM Switch over IP    Cell Phones            
      

    JupiterOnlineMedia

    internet.comearthweb.comDevx.commediabistro.comGraphics.com

    Search:

    Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

    Jupitermedia Corporate Info


    Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

    Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

    Solutions
    Whitepapers and eBooks
    Microsoft Article: HyperV-The Killer Feature in WinServer ‘08
    Avaya Article: How to Feed Data into the Avaya Event Processor
    Microsoft Article: Install What You Need with Win Server ‘08
    HP eBook: Putting the Green into IT
    Whitepaper: HP Integrated Citrix XenServer for HP ProLiant Servers
    Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 1
    Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 2--The Future of Concurrency
    Avaya Article: Setting Up a SIP A/S Development Environment
    IBM Article: How Cool Is Your Data Center?
    Microsoft Article: Managing Virtual Machines with Microsoft System Center
    HP eBook: Storage Networking , Part 1
    Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
    MORE WHITEPAPERS, EBOOKS, AND ARTICLES
    Webcasts
    Intel Video: Are Multi-core Processors Here to Stay?
    On-Demand Webcast: Five Virtualization Trends to Watch
    HP Video: Page Cost Calculator
    Intel Video: APIs for Parallel Programming
    HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
    Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
    MORE WEBCASTS, PODCASTS, AND VIDEOS
    Downloads and eKits
    Sun Download: Solaris 8 Migration Assistant
    Sybase Download: SQL Anywhere Developer Edition
    Red Gate Download: SQL Backup Pro and free DBA Best Practices eBook
    Red Gate Download: SQL Compare Pro 6
    Iron Speed Designer Application Generator
    MORE DOWNLOADS, EKITS, AND FREE TRIALS
    Tutorials and Demos
    How-to-Article: Preparing for Hyper-Threading Technology and Dual Core Technology
    eTouch PDF: Conquering the Tyranny of E-Mail and Word Processors
    IBM Article: Collaborating in the High-Performance Workplace
    HP Demo: StorageWorks EVA4400
    Microsoft How-to Article: Get Going with Silverlight and Windows Live
    MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES