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 > <?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.
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).
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
|