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