Plug in PHP 100 POWER SOLUTIONS- P66 pptx

C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
291
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
291
How It Works
This program creates two <div> elements and then displays the contents of $text1 and
$link1 in one of them and $text2 and $link2 in the other. The first <div> is made visible
and the second invisible.
Using JavaScript and the display property, the links in each <div> are then set to make
the other <div> visible and their own one invisible, having the effect of toggling between
the two.
The links are created by setting the <a href= targets to JavaScript:// and their onClick
methods to change the display properties of the <div> contents. In order to allow you to use
this plug-in multiple times within a document, the values assigned to the id property of each
<div> also incorporate a random number between 0 and 1,000,000, created in $tok using the
rand() function, which is appended to the id strings PIPHP_TT1_ and PIPHP_TT2_.
All of this JavaScript is assembled into the string $out, which is then returned by the
plug-in.
How to Use It
To use this plug-in, pass the two sets of texts and links to it and the string returned will be
JavaScript that you can output to your document at the current location. For example, if you
are writing about photosynthesis, you might like to create the following strings:
$text1 = " Photosynthesis is a process that converts carbon " .
"dioxide into organic compounds, especially sugars, " .
"using the energy from sunlight.";
$link1 = "Choose long definition";

FIGURE 11-6 After clicking the toggle link, an alternative text and link are displayed.

292
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s

292
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s
$text2 = $text1 .
" Photosynthesis occurs in plants, algae, and many " .
"species of Bacteria, but not in Archaea. " .
"Photosynthetic organisms are called photoautotrophs, " .
"since it allows them to create their own food.";
$link2 = "Choose short definition";
You can then allow for the toggling between each of them by calling up the plug-in
like this:
echo PIPHP_ToggleText($text1, $link1, $text2, $link2);
I have deliberately kept this all very simple so that you can replace the link text with
any other text you like, or even a button or other image if you prefer, as you are also not
restricted to only text in the $text1 and $text2 variables, and can include any HTML you
like, including graphics and other tags.
If you would like to have your toggle link appear after (rather than before) the text,
you’ll have to modify the plug-in, moving the variables $text1 and $text2 to before the
<a href= sections. In fact, now that you see how this works, you should be able to come
up with a range of plug-ins for your own purposes to handle multiple <div> sections, not
just two.
The Plug-in
function PIPHP_ToggleText($text1, $link1, $text2, $link2)
{
$tok = rand(0, 1000000);
$out = "<div id='PIPHP_TT1_$tok' style='display:block;'>" .
"<a href=\"javascript://\" onClick=\"document." .
"getElementById('PIPHP_TT1_$tok').style.display=" .
"'none'; document.getElementById('PIPHP_TT2_$tok')" .
".style.display='block';\">$link1</a>$text1</div>\n";

$out .= "<div id='PIPHP_TT2_$tok' style='display:none;'>" .
"<a href=\"javascript://\" onClick=\"document." .
"getElementById('PIPHP_TT1_$tok').style.display=" .
"'block'; document.getElementById('PIPHP_TT2_$tok')" .
".style.display='none';\">$link2</a>$text2</div>\n";
return $out;
}
Status Message
Sometimes it’s useful to be able to change one element in an HTML page when the mouse
passes over another one. A typical use for such a facility is offering a status message, or some
additional informational text. This technique can also be used to good effect by replacing an
image with some HTML as the mouse passes over different items. Figure 11-7 shows this
plug-in used to provide a simple status message feature.

86
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
293
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
293
About the Plug-in
This plug-in takes some text to display, for which an onMouseOver event will be created, the
ID of an HTML element into which a status is to be inserted, and the status message itself.
Both the $text and $status can include text and HTML. It requires the following arguments:
• $text The main text and/or HTML to display
• $id The ID of an element such as a <span> or <div>
• $status The message text and/or HTML
Variables, Arrays, and Functions
• None
How It Works

Although short and sweet, this is a powerful piece of code. What it does is create the JavaScript
necessary to provide onMouseOver and onMouseOut events to any HTML element, provided
in $text, by getting the contents of the element ID of $id (its innerHTML property) and
then saving it in the JavaScript variable PIPHP_temp, before replacing it with the contents
of $status.
When the mouse then leaves the area, the contents of PIPHP_temp are replaced back
into the innerHTML property of $id.
How to Use It
To use this plug-in, decide on a part of your web page that will contain the status message.
In the following example, a <span> with the ID of status is used. Then call the plug-in,
passing it some text or HTML to display, and which, when the mouse passes over it, will
trigger the status change (in other words, it will be a hotspot), the ID of the target element
(in this case status), and the status message, like this:
echo "The ";
echo PIPHP_StatusMessage('JavaScript', 'status',
'The mouse is over the word &lsquo;JavaScript&rsquo;');
echo " language is unconnected with the Java language.";
echo "<br /><br /><b>Status message</b>: <span id='status'>" .
"Nothing to report</span>";
FIGURE 11-7 The opening words of Dickens’ A Tale of Two Cities with the mouse over the hotspot word “wisdom”

294
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s

294
P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s
This will then display the following:
The JavaScript language is unconnected with the Java language.
Status message: Nothing to report
But when the mouse passes over the word JavaScript (the hotspot), this changes to the

following:
The JavaScript language is unconnected with the Java language.
Status message: The mouse is over the word 'JavaScript'
However, because you can pass HTML as well as text to it, you can do much more with
this plug-in than simply displaying a status message. For example, you could create a photo
gallery in which each of the image names is passed to the plug-in, along with the associated
HTML to display the photo, like in the following example, which will work if you have the
files camping.jpg, fishing.jpg, hiking.jpg, and swimming.jpg in the current directory:
echo "View some recent photos: ";
echo PIPHP_StatusMessage('Camping ', 'photos',
'<img echo PIPHP_StatusMessage('Fishing ', 'photos',
'<img src=fishing.jpg width=640 height=320 />');
echo PIPHP_StatusMessage('Hiking ', 'photos',
'<img src=hiking.jpg width=640 height=320 />');
echo PIPHP_StatusMessage('Swimming', 'photos',
'<img src=swimming.jpg width=640 height=320 />');
echo "<br /><span id='photos'>(Photo will appear here)</span>";
You can also use HTML in the $text argument, too, so you could place images or other
elements there instead of text. You can even take this effect to the extreme and display
different subsections of HTML, including images and other content, when the mouse passes
over the various hotspots.
There’s only one slight drawback to this plug-in, which is that, due to combining the two
languages of PHP and JavaScript, it doesn’t like any quotation marks, because each language
has used up one of the two types. Therefore you should replace any you need to display with
HTML entities such as &quot; for a double quotation mark, or &lsquo; and &rsquo; for left
and right single quotation marks, and so on. This means that where you would normally
enclose HTML elements within quotes, such as <img src='image.jpg' />, you should
ignore them like this: <img src=image.jpg />. But don’t worry. Your HTML will still work
without them.
The Plug-in

function PIPHP_StatusMessage($text, $id, $status)
{
$target = "getElementById('$id').innerHTML";
return "<span onMouseOver=\"PIPHP_temp=$target; " .
"$target='$status';\" onMouseOut=\"$target=" .
"PIPHP_temp;\">$text</span>";
}
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
295
C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t
295
Slide Show
If you have a collection of photos that you’d like to display in a smooth fading slide show,
then this plug-in is just what you need. With it you simply pass an array of image URLs to
it, and the JavaScript code you need to create a slide show is returned by it. Figure 11-8
shows the plug-in being used to display a series of photographs from a Flickr image str
eam.
About the Plug-in
This plug-in takes an array of image URLs and returns the JavaScript required to display
them in a slide show. It requires the following argument:
• $images An array of image URLs
Variables, Arrays, and Functions
$count PHP integer containing the number of URLs in $images
$out
PHP string containing the JavaScript to return
$j PHP integer counter for iterating through $images
images JavaScript array containing the image URLs from $images
counter JavaScript integer for stepping through the images in images
step
JavaScript integer containing the amount to step through opacity values

fade
JavaScript integer containing the opacity amount
delay JavaScript integer counter that counts up to pause
pause
JavaScript integer containing delay between changing images
startup
JavaScript integer containing the initial startup delay
opacity()
JavaScript function to set the degree of opacity of an image
load()
JavaScript function to load an image from a URL
$() JavaScript function shorthand for document.getElementById()
FIGURE 11-8 This plug-in can display slideshows of images such as those in a Flickr stream.

87