Location: PHPKode > scripts > Info Box > info-box/demo.php
<?PHP
include '../ezhtml/class_html.php';
include 'class_infobox.php';

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

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

$html->head();

$html->registerserver();

$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 }
-->
</style>

<?PHP


$box = new infobox();

$box->width=200;
$box->head();

$html->body();

#
# 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->div('container');
$html->h(1, $html->title );
$html->h(2, 'Infoboxes for links using $box-&gt;link(...)');

echo '<pre>'.$_SERVER['HTTP_USER_AGENT'].'</pre>';
?>

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

<?PHP

$box->link( 'http://www.knopper.net/knoppix/', 
  '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="http://www.knopper.net/pics/knoppernet-logo.gif" alt="Knopper Net">');
  
$box->link( 'http://www.phpclasses.org/browse/author/21464.html', 
  'My Classes', 
  'Classes of Peter Klauer', 
  'The classes page of Peter Klauer at phpclasses.org. '.
  'Maybe there is something interesting for you.<br>'.
  '<img src="http://files.phpclasses.org/graphics/elephpant_logo.gif" '.
  'alt="PHP Classes Elephant">');
  
$box->link( 'http://www.phpclasses.org/browse/package/1255.html', 
  'ezhtml', 
  '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( 'http://www.php.net', 
  'PHP.net', 
  'Home of PHP', 
  'This site is a very important site where new versions of PHP '.
  'and manuals can be downloaded.<br>'.
  '<img src="http://static.php.net/www.php.net/images/php.gif" alt="PHP Logo">');


if( $box->showinfobox )
{
  echo "<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";
}
else
{
  echo "<br>Now all the infoboxes have become title attributes which can be read from screenreaders.\n";
}

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

echo "<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.');

echo "<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>";

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

echo "<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.' );

echo '<b>Simple test form</b><br>
<label'.$labeltip.' for="vorname">First Name: </label>
<input'.$texttip.' type=text name="firstname" value="'.$firstname.'" id="vorname"><br>
<label'.$labeltip.' for="nachname">Last Name: </label>
<input'.$texttip.' type=text name="lastname" value="'.$lastname.'" id="nachname"><br>
<label'.$selboxtip.' for="options">Options: </label>
<select'.$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.');

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

echo '<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="http://www.w3.org/Icons/valid-html401" 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 );

echo "<br><br><a$mouse href='http://validator.w3.org/check?uri=referer'>".
$img_valid_html."</a></div>";


 $html->undiv();

$box->generate();

$html->foot();

?>
Return current item: Info Box