After adding jQuery slideDown and slideUp effects into search panel in the list pages (please read this article), now we will add jQuery auto hide message after 3 seconds effect for the Success Message.
As we know, PHPMaker now separate the error and success message using the different style. The error message is displayed in red font color, whereas the success message is displayed in the green font color. Unfortunately, the success message is displayed permanently, so we will add the auto hide message after 3 seconds effect only for the Success Message. We will not do the same thing for the error message, since that error message needs more attention from the user.
[hidepost]
-
Open your \Script\phpcommon-scripts.php file, and find this code:
echo "<p class=\"ewSuccessMessage\">" . $sSuccessMessage . "</p>";
then replace it with this following code:
echo "<p class=\"ewSuccessMessage\" id=\"ewSuccessMessage\">" . $sSuccessMessage . "</p>"; // Add id=\"ewSuccessMessage\" for jQuery auto hide message after 3 seconds, by Masino Sinaga, October 18, 2011
- Make sure you have already activated the jQuery Library extension from your PHPMaker application. Click on the Tools -> Extensions menu, and then make sure you have already checked the jQuery Library item. Also, make sure you have already checked the LocaljQueryFiles from the Advanced tab when you select that jQuery Library item above
-
Still from your PHPMaker application, copy this following code into your Server Events/Client Scripts -> Client Scripts -> Global -> Pages with header/footer -> Client Script. Since this will be needed in all pages (that have header and footer), then we only add this following code into that section.
// jQuery for auto hide message after 3 seconds, by Masino Sinaga, October 18, 2011 $(document).ready(function() { $("p#ewSuccessMessage").show().delay(3000).queue(function(n) { $(this).hide('slow'); n(); }); }); // jQuery for auto hide message after 3 seconds, by Masino Sinaga, October 18, 2011
[/hidepost]
Adam Burgoyne says
How should this be implemented so that the Welcome message auto-hides in v9.10?
The…
echo “” . $sSuccessMessage . “”;
…code mentioned above is now implemented as a table row in phpcommon-scripts.php
Masino Sinaga says
Yeah. Since jQuery uses id that belongs to the element as its key, then you should implement the similar code above into v9.1.0.
Adam Burgoyne says
Can you show how to do that?
Masino Sinaga says
I just published a new article regarding it. Please visit: Adding jQuery Auto Hide Message After 3 Seconds for the Success Message in Websites that Generated by PHPMaker 9.1.0. Hope that helps.