PHP Classes
elePHPant
Icontem

File: demo.php

Recommend this page to a friend!
  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: 10 years ago
Size: 5,717 bytes
 

Contents

Class file image Download
<?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();

?>