O'Reilly logo

PHP Hacks by Jack D. Herrington

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

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="up.gif" border="0" id="img_<?php echo($id); ?>"/> </a> </td> <td width="90%"> <h1><?php echo( $title ); ?></h1> <div style="visibility:hidden;position:absolute;" id="<?php echo($id); ?>" class="spin-content"> <?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( ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required