Login   Register  
PHP Classes
elePHPant
Icontem

File: demo.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  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: 8 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();

?>