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 . $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. $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. 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