PHP Classes

File: demo.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in Bookmark in
  Classes of Peter Klauer  >  Info Box  >  demo.php  >  Download  
File: demo.php
Role: Example script
Content type: text/plain
Description: simple demonstration of how it is done
Class: Info Box
Generate help tooltips for Web pages using DHTML
Author: By
Last change: Tidy error with "options" corrected.
Date: 9 years ago
Size: 5,717 bytes


Class file image Download
include '../ezhtml/class_html.php';

$html= new html('Infobox Demo', '../ezhtml/');
$html->doctype_strict = true;

if( !isset(
$lastname ) ) $lastname = '';
if( !isset(
$firstname ) ) $firstname = '';



$html->metaname( 'keywords', 'PHP class javascript div floating layer infobox demo');
$html->metaname( 'description', "A demonstration of how to generate DHTML floating div layers with the PHP class 'infobox' by using PHP and javascript.");


<style type="text/css">
a img{ border:none; }
a { color: #ff0000; }
a:hover{ background-color: #ffe0e0; color: #800000; }
label{ float:left;width:100px;text-align:right;padding: 0 1em 0 0 }


= new infobox();



# the first call to newtip() generates a hidden screenreader link to make it
# possible to switch the infobox into titles at the very beginning of the document.
# This hidden link is located on a div positioned "absolute" out of the way.
# Some browsers make the text flow "break" when such a div is put into the middle
# of text. It is recommended to call newtip() once at the very beginning of the body.
$box->newtip('',''); // generate screenreader-tip

$html->h(1, $html->title );
$html->h(2, 'Infoboxes for links using $box-&gt;link(...)');


<p>Using infobox one can have floating mousetips for
nearly every situation one could think of.
<br>Normally, they are used for links:


->link( '',
'Knopper Net',
'Home of the Knoppix Linux',
'That is where I saw the infoboxes the first time. '.
'Klaus Knopper distributes the code infobox.js under the GPL. '.
'Knoppix is a Linux distribution that boots directly from cd - '.
'it does not need a installation procedure.<br>'.
'<img src="" alt="Knopper Net">');
$box->link( '',
'My Classes',
'Classes of Peter Klauer',
'The classes page of Peter Klauer at '.
'Maybe there is something interesting for you.<br>'.
'<img src="" '.
'alt="PHP Classes Elephant">');
$box->link( '',
'Easy HTML',
'This class simplyfies a PHP programmers life. '.
'I used it for this demo. '.
'The class ezhmtl is NOT required to make infobox work. '.
'It just makes things easier.');
$box->link( '',
'Home of PHP',
'This site is a very important site where new versions of PHP '.
'and manuals can be downloaded.<br>'.
'<img src="" alt="PHP Logo">');

$box->showinfobox )
"<BR>The images in the boxes are only available via an open internet connection.\n".
"They are used to demonstrate that <b>any</b> HTML can be used on them.\n";
"<br>Now all the infoboxes have become title attributes which can be read from screenreaders.\n";

$html->h(2,'Infoboxes for other elements using $box-&gt;newtip(...)');

"<p>Maybe you want to highlight some extra piece of text, a input box ".
"or an image. This can easily be done.<BR>";

$mouse = $box->newtip( 'Rectangular Area', 'This area should look like a square of 150x150 Pixels.');

"<div$mouse style='background-color:#ffdfdf;border:solid red 1px;width:150px;height:150px;float:left;margin:0 8px 0 0;text-align:center;overflow:scroll'><br>$firstname<br>$lastname</div>";

"<div style='background-color:#dfffdf;border:solid 1px green;float:left;padding:12pt;margin:0 8px 0 0'>";

"<form name='Test' action='$PHP_SELF' method='POST'><div>";

$texttip = $box->newtip( 'Textbox', 'Here you may enter a text value' );
$labeltip = $box->newtip( 'Label', 'This is a descriptive field for an input box.');

$selboxtip= $box->newtip( 'Selectbox', 'In earlier times, there was a problem with selectboxes. Infoboxes did not float above selectboxes, but floated <b>under</b> them. This is now fixed with the iframe-hack for IE.' );

'<b>Simple test form</b><br>
.$labeltip.' for="vorname">First Name: </label>
.$texttip.' type=text name="firstname" value="'.$firstname.'" id="vorname"><br>
.$labeltip.' for="nachname">Last Name: </label>
.$texttip.' type=text name="lastname" value="'.$lastname.'" id="nachname"><br>
.$selboxtip.' for="options">Options: </label>
.$selboxtip.' id="options" name="options"><option>Pure</option><option>Sugar</option><option>Milk</option></select>';

$mouse = $box->newtip('Submit button', 'Click on this button to make the form work.');

"<input$mouse onClick='untip()' type=submit value=' OK '></div></form></div>";

'<div style="float:left;background-color:#ffffe0;border:solid 1px #ffc000;padding:12pt;margin:0 8px 0 0">'.
'Please, try this link: ';

$box->onoff(); // User may switch boxes on or off

$img_valid_html = '<img src="" alt="Valid HTML 4.01!" height="31" width="88">';

$mouse = $box->newtip(
'Valid HTML 4.01 STRICT',
'Infobox does not disturb the validation of your page against the W3C validator.<br>'.
$img_valid_html );

"<br><br><a$mouse href=''>".