• IT
  • internet.com/IT
  • internet.com/CIO
  • internet.com/Security
  • internet.com/Networking
  • internet.com/Storage
  • bITa Planet
  • CIO Update
  • Database Journal
  • Datamation
  • Enterprise IT Planet
  • Enterprise Networking Planet
  • Enterprise Storage Forum
  • eSecurity Planet
  • Hardware Central
  • Intranet Journal
  • ISP Planet
  • ITSMwatch
  • IT Channel Planet
  • Linux Planet
  • Open Networks Today
  • ServerWatch
  • VoIP Planet
  • WebVideoUniverse
  • Wi-Fi Planet
  • WinDrivers.com
  • Network Map
• Developer
  • internet.com/Developer
  • 15 Seconds
  • 4GuysFromRolla.com
  • ASP101
  • CodeGuru
  • Developer.com
  • DevX
  • FlashKit.com
  • Gamelan
  • JARS
  • JavaScript.com
  • JavaScriptSource
  • PHPBuilder.com
  • ScriptSearch
  • VB Forums
  • VB Wire
  • WebDeveloper.com
  • Webreference
  • Network Map
• News
  • Internetnews.com
  • Linux Today
  • Network Map
• Small Business
  • Ecommerce Guide
  • Refer-It
  • SmallBusinessComputing
  • Webopedia
  • WinPlanet
  • Network Map
• Personal Tech
  • BlackBerryToday
  • iPhoneGuide
  • Jumbo
  • Megapixel.net
  • Palm Boulevard
  • PDAStreet
  • PocketPCWire
  • SharkyExtreme
  • Smart Phone Today
  • The List: ASPs
  • The List: Broadband
  • The List: ISPs
  • The List: WebHosts
  • The List: WebDesigners
  • Wi-FiHotSpotList
  • WindowsMobileToday
  • Network Map

• Events
  • JupiterEvents
  • internet.com/webcasts
• Jobs
• Partners
• Solutions
  • eBooks
  • Video
• Shop

• Login
  • Manage My Profile
• Register
  • Why Join?

WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column11

Developer News SaaS Tool Offers Custom Database Development Microsoft’s Automated Agent: Can We Talk? Borland Finally Sells CodeGear

The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
creating a cross-browser low-bandwidth customizable puzzle

This tutorial can be appreciated by users of any browser, any version. The in-line puzzle will work only in Netscape Navigator 4 or Internet Explorer 4, WIN95, Release.

The first Release version of Internet Explorer 4, for the Macintosh, does not support the CSS "clip" property, on which much of the puzzle is based.

This time, our example uses art masterpieces of another kind. WebReference's own Andrew King and Robert Peyser provide visuals of what they do on their days off.

All images Copyright (c) 1999-2000 internet.com Corp. ,
except Prometheus, Copyright (c) 1995 Robert C. Peyser.
All rights reserved. Used by permission.

Prerequisites

Previously, on Dynamic HTML Lab...

• we discussed coding concepts and began to create an Explorer-specific jigsaw puzzle
• we completed the Explorer puzzle
• we created a Navigator-specific version

Knowledge of the concepts and familiarity with the code will be assumed for our present, and final, puzzle column where we will create a cross-browser version of the puzzle and fix a few bugs found along the way.

The puzzle with the new images is reproduced below. All the code used can be found on the final three pages, and you may refer to it now, as a refresher, or as the tutorial progresses.

Screenshot of Puzzle for non-DHTML browsers

The puzzle can be dragged by grabbing the image. This feature can be turned off with the labeled toggle button. Break the puzzle into as many pieces as you want. Break it again. Move the pieces into position to solve it. Stuck? Use the Hint button. Fed up? Let the puzzle solve itself with the Solve button. Load a new puzzle image and play with that one for a while. The images have not been pre-loaded, so you will have to wait for a download when you switch images. At any stage, an optional grid can be turned on and off to assist in piece placement. If the puzzle has a low piece count, the grid may slow the puzzle down on IE4. In NN4, after a puzzle drag or a new image load, the form buttons may not display properly. Scroll the puzzle off the screen and back on to fix, or in WIN95, select View-Refresh.

In This Column

We will discuss:

• cross-browser considerations
• the requisite stylesheet and HTML
• puzzle initialization
• new Explorer code for shaping the puzzle
• creating the puzzle piece elements
• solving the puzzle
• the control panel functions
• dragging the puzzle and puzzle pieces

So, the sooner we get started, the sooner this puzzle madness will be over.

Produced by Peter Belesis and

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

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools How to Create an Ajax Autocomplete Text Field: Part 6 · Software Engineering for Ajax · Perl Pragma Primer Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Using File Virtualization for Disaster Recovery · VoIP Security: SIP—Versatile but Vulnerable · Around the World in 80 Nodes

All Rights Reserved. Legal Notices.
Created: Dec. 17, 1997
Revised: Jan. 18, 1998

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