spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column17

Logo

View a spreadsheet with synchronized frames.

View a map with synchronized frames.

Developer News
Metasploit 3.2 Offers More 'Evil Deeds'
'Thank You Apple. Seriously.'
The Buzz: BlackBerry App Store Seen Next

Dynamic Synchronized Frames
freeze columns and rows for DHTML browsers

This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4 and Microsoft Internet Explorer 4 for Windows.

Important Prerequisite:
To fully appreciate this column, you must be familiar with frames, both conceptually and with the HTML required to create them. This knowledge will be assumed. Wouldn't you know it, we have an excellent introduction-to-frames article, right here at WebReference. For quick catch-up, or as a refresher, read Dan Brown's Framing The Web.

Introduction

Frames are dying on the Web, or are they? In recent months, high traffic sites like WebReview and developer.com have done away with frameset documents in response to user request. Others, like net@ddress, have reduced the number of frames used. On the other hand, Microsoft and Netscape remain as frame-heavy as ever, especially Microsoft.

Frames have always been controversial. Although introduced in Netscape Navigator 2, they have only just now been included in the HTML standard (HTML 4.0). Authors find them efficient, navigational tools, while users gripe about the extra connections necessary, the difficult bookmarking, and the persistence of the frameset's TITLE in the browser titlebar.

Here, at WebReference, we have avoided frames-for-frames-sake authoring. Framesets are used only when absolutely necessary. See our web headlines page, for an excellent example of when frames actually make sense: the main frame is used for off-site pages, while a permananet navigation frame on the left is used to load them. This could only have been accomplished with frames.

Our present technique is another good use for frames. Use the links in the left column to view live applications in a new window. When the frameset has completely loaded, scroll the main frame in either direction. What happens to the left and top frames? The top and left frames behave like frozen row and column headers in regular spreadsheet applications. The top frame scrolls horizontally in tandem with the main frame. The left frame follows the main frame in a vertical scroll. (Excuse the poor quality of the images. All in the interest of faster download time.)

There are many uses for this technique:

  • spreadsheet and accounting ledger publication
  • longitude/latitude tracking on large maps
  • distance charts
  • any large, scrollable page that requires x-y coordinate tracking

In This Column

We will discuss:

For the first time, in our columns, we will learn to use:

Let's begin with a look at the creation of our frameset.

Produced by Peter Belesis and



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
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2 · How to Use JavaScript to Validate Form Data
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Choosing the Right Online Backup Provider · Mother Avaya Nurtures Her Technology Partners · Software as a Service a Winning Model for Hotspot Provider

All Rights Reserved. Legal Notices.
Created: Mar. 25, 1998
Revised: Mar. 25, 1998

URL: http://www.webreference.com/dhtml/column17/