Chapter 3. DHTML

Hacks 11–26: Introduction

This chapter covers using Dynamic HTML (DHTML) in your web applications. DHTML is a term used to define the powerful combination of HTML, CSS, and JavaScript. The hacks in this chapter use DHTML to create all types of interactive interfaces for your web applications, from spreadsheets to dynamic graphs, pop ups, slideshows, vector graphics, and more.

Put an Interactive Spreadsheet on Your Page

Use the ActiveWidgets spreadsheet library to put an interactive JavaScript data control on your page.

Let’s face it: some data—particularly financial and statistical data—just looks better when it’s presented as a spreadsheet. Unfortunately, HTML does a poor job of giving you an interactive spreadsheet-style feel, especially when it comes to scrolling around, sorting, or any of the truly interactive user experience elements of a spreadsheet.

This hack uses the ActiveWidgets (http://activewidgets.com/) grid control to create a spreadsheet-style interface on a web page.

The Code

Save the code in Example 3-1 as index.php.

Example 3-1. A script that provides state-specific data in a spreadsheet format
<?php $states = array( array( "Alabama",4447100,1963711,52419.02,1675.01,50744,87.6,38.7 ), array( "Alaska",626932,260978,663267.26,91316,571951.26,1.1,0.5 ), array( "Arizona",5130632,2189189,113998.3,363.73,113634.57,45.2,19.3 ), array( "Arkansas",2673400,1173043,53178.62,1110.45,52068.17,51.3,22.5 ), array( "California",33871648,12214549,163695.57,7736.23,155959.34,217.2,78.3 ...

Get PHP Hacks now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.