Hack15.Section Your Content with Spinners | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 15. Section Your Content with Spinners

Use spinners to divide your page content into sections, each of which you can show or hide individually.

Sometimes there is just too much great content to have visible on a single page at one time. One approach is to use tabs [Hack #6], and another is to section the content with spinners that allow the user to open up specific sections of content. This hack shows how to create sections on your page with spinners that open and show sections of the content interactively.

3.6.1. The Code

The code for index.php is shown in Example 3-6.

Example 3-6. PHP allowing for user selection of a specific spinner

 <?php function start_section( $id, $title ) { ?> <table cellspacing="0" cellpadding="0"> <tr> <td width="30" valign="top"> <a href="javascript: void twist('<?php echo($id); ?>');"> <img src="/books/1/201/1/html/2/up.gif" border="0" /> </a> </td> <td width="90%"> <h1><?php echo( $title ); ?></h1> <div style="visibility:hidden;position:absolute;"    > <?php } function end_section( ) { ?> </div> </td> </tr> </table> <?php } function spinner_header( ) { ?> <style type="text/css"> body { font-family: arial, verdana; } h1 { font-size: medium; border-bottom: 1px solid black; } .spin-content { font-size: small; margin-left: 10px; padding: 10px; } </style> <script language="Javascript"> function twist( sid ) {   imgobj = document.getElementById( "img_"+sid );   divobj = document.getElementById( sid );   if ( imgobj.src.match( "up.gif" ) )   { imgobj.src = "down.gif"; divobj.style.position = "relative"; divobj.style.visibility = "visible";   }   else   { imgobj.src = "up.gif"; divobj.style.visibility = "hidden"; divobj.style.position = "absolute";   } } </script> <?php } ?> <html> <head> <?php spinner_header( ) ?> </head> <body> <?php start_section( "one", "Report part one" ) ?> This report will tell you a lot of stuff you didn't know before. And that's good. Because that's what a report should do.<br/><br/> But it will tell you so much that it needs to be rolled up into sections so that you don't have to gasp as you see it all at once. <?php end_section( ) ?> <?php start_section( "two", "Report part two" ) ?> This is a table of numbers and such:<br/> <table> <tr><th>State</th><th>Total</th></tr> <tr><td>CA</td><td>$35M</td></tr> <tr><td>PA</td><td>$22M</td></tr> <tr><td>NC</td><td>$5M</td></tr> <tr><td>FL</td><td>$15M</td></tr> </table> <?php end_section( ) ?> </body> </html>

The script starts by defining the start_section and end_section functions, which bracket the blocks of content on the page that will be shown (or hidden) interactively. The top section also defines a spinner_header function that will define the CSS and JavaScript used by the DHTML portion of the system.

You can move all of this code to another PHP file if you want to modularize the code.

The start_section function creates a table where the first column has the spinner graphic, and the second has the title of the section and a div element that will hold the content. The div element is initially set to be invisible, and its position attribute is set initially to "absolute" (a div element that is positioned as "relative" will still be accounted for in the layout). To make the div element and its content disappear, the position attribute's value is set to "absolute"; it can then be set back to "relative" for a reappearance.

3.6.2. Running the Hack

Upload the code and images to the server, and point your browser at index.php. You should see something that looks like Figure 3-8.

Figure 3-8. The sections closed up

Click on the arrow next to the first part of the report, and watch it spin to expose the report section (as shown in Figure 3-9).

up.gif and down.gif are two graphics that were created with Macromedia Fireworks. They could just as easily have been created with Adobe's Photoshop or the open source GIMP graphics editor. If you don't want to create your own graphics, I suggest using Google's image search to look for arrow graphics.

Figure 3-9. The first section opened up

When writing code that does dynamic repositioning, as with this hack, it's very important to test it on every browser you intend to support. Positioning visible and invisible elements is one of those "gotcha" areas in DHTML.

3.6.3. See Also

"Add Tabs to Your Web Interface" [Hack #6]