This time we are going to improve the Help feature that we have been implementing via this article: How to Add Help Feature into Websites that Generated by PHPMaker 9.0.2. As you can see from that article above, the Help window will be shown up using pop up window Javascript. Now we will switch it become using YUI Panel widget, so the Help window will look more professional and more beautiful.
By implementing this customization below, we will also get another advantage from it. We will see an animation loading icon while the YUI Panel widget that contains the Help information is derived from database and loads the results to the browser.
Please note that before implementing the customization below, you have to implement the customization from the following article:
- How to Add Help Feature into Websites that Generated by PHPMaker 9.0.2
- Improving Breadcrumb Links Feature in Websites that Generated by PHPMaker 9.1.0
Updated on February 10, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.
Updated on June 17, 2013: This customization below has been handled by using MasinoFixedWidthSite extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.
[hidepost]
-
Open your \Script\template.php file, and find this code:
</style>
before that line, please insert the following code:
#helppanel .bd { overflow:auto; background-color:fff; padding:10px; } #helppanel .ft { height:15px; padding:0; } #helppanel .yui-resize-handle-br { right:0; bottom:0; height: 8px; width: 8px; position:absolute; }
-
Still in that \Script\template.php file, find again this code:
<script language="JavaScript"> <!-- function popupWindow(url) { var SecondaryWin; SecondaryWin = window.open(url,"secondary","toolbars=0,statusbars=0,menubars=0,scroll=1,fullscreen=0,resizable=1,width=450,height=580"); self.name="main"; } --> </script>
after the last line of that code, please insert the following code:
<?php $helptext = ""; $helpcat = ""; if (MS_HELP_TABLE != "") { global $conn; $sSql = "SELECT Topic, Description FROM ".MS_HELP_TABLE." WHERE Display_in_Page = '".ew_CurrentPage()."' AND Language = '".$gsLanguage."'"; $rs = $conn->Execute($sSql); if ($rs->RecordCount() > 1) { $helpcat = $rs->fields("Topic"); $helptext = $rs->fields("Description"); } else { $helpcat = $Language->Phrase("Help"); $helptext = $Language->Phrase("HelpNotAvailable"); } } else { $helpcat = $Language->Phrase("Help"); $helptext = $Language->Phrase("HelpNotAvailable"); } ?> <script type="text/javascript"> YAHOO.util.Event.onDOMReady(function(){var a=new YAHOO.widget.Panel("helppanel",{draggable:true,visible:false,width:"300px",height:"530px",autofillheight:"body",constraintoviewport:true,context:["showbtn","tl","bl"]});a.render();a.setHeader("<?php echo $helpcat; ?>");a.setBody("<?php echo $helptext; ?>");var b=new YAHOO.util.Resize("helppanel",{handles:["br"],autoRatio:false,minWidth:300,minHeight:300,status:false});b.on("startResize",function(c){if(this.cfg.getProperty("constraintoviewport")){var d=YAHOO.util.Dom;var f=d.getClientRegion();var e=d.getRegion(this.element);b.set("maxWidth",f.right-e.left-YAHOO.widget.Overlay.VIEWPORT_OFFSET);b.set("maxHeight",f.bottom-e.top-YAHOO.widget.Overlay.VIEWPORT_OFFSET)}else{b.set("maxWidth",null);b.set("maxHeight",null)}},a,true);b.on("resize",function(c){var d=c.height;this.cfg.setProperty("height",d+"px")},a,true);YAHOO.util.Event.on("helponline","click",a.show,a,true)}); </script>
-
Still in that \Script\template.php file, find again this code:
<td class="ewContentColumn"> <!-- right column (begin) -->
after the last line of that code, please insert the following code:
<div id="helppanel"><div class="hd"></div><div class="bd"><p><?php echo '<img src="phpimages/loading.gif" border="0" style="vertical-align:middle"> '.$Language->Phrase("loading"); ?></p></div><div class="ft"></div></div> <div id="tacpanel"><div class="hd"></div><div class="bd"><p></p></div><div class="ft"></div></div>
-
Open your \Script\list-script.php file, and find this code (there are four occurances):
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="javascript:popupWindow('help.php?page=<?php echo ew_CurrentPage(); ?>')"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
then replace it with the following code (there are four occurances):
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\add-script.php file, and find this code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="javascript:popupWindow('help.php?page=<?php echo ew_CurrentPage(); ?>')"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a></span><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
then replace it with the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\delete-script.php file, and find this code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="javascript:popupWindow('help.php?page=<?php echo ew_CurrentPage(); ?>')"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a></span><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
then replace it with the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\edit-script.php file, and find this code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="javascript:popupWindow('help.php?page=<?php echo ew_CurrentPage(); ?>')"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a></span><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
then replace it with the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\update-script.php file, and find this code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="javascript:popupWindow('help.php?page=<?php echo ew_CurrentPage(); ?>')"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a></span><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
then replace it with the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?><?php echo $<!--##=gsTblVar##-->->TableCaption() ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a><?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\view-script.php file, and find this code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="javascript:popupWindow('help.php?page=<?php echo ew_CurrentPage(); ?>')"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
then replace it with the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\login.php file, and find this code:
<a href="javascript:popupWindow('help.php?page=<?php echo ew_CurrentPage(); ?>')"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a>
then replace it with the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\forgotpwd.php file, and find this code:
<font class="option"> <strong><!--##@RequestPwdPage##--></strong></font>
after that line, please insert the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\register.php file, and find this code:
<font class="option"> <strong><!--##@RegisterPage##--></strong></font>
after that line, please insert the following code:
<?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?>
-
Open your \Script\changepwd.php file, and find this code:
<font class="option"> <strong><!--##@ChangePwdPage##--></strong></font></td>
then replace it with the following code:
<font class="option"> <strong><!--##@ChangePwdPage##--></strong></font> <?php // Begin of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> <a href="#" id="helponline" onclick="MGJS.goTop();return false;"><img src="phpimages/question.ico" title="<?php echo ew_HtmlEncode($Language->Phrase("help")) ?>" width="16" height="16" border="0"></a> <?php // End of modification Add Help Feature, by Masino Sinaga, June 6, 2012 ?> </td>
- Finally, re-generate your script file using PHPMaker as always.
[/hidepost]
Leave a Reply
You must be logged in to post a comment.