Better Look and Feel for Displaying Success, Warning, and Error Message

For those of you who have been implementing Masino Extensions for PHPMaker 10, now I have some good news for you. 🙂

If you see the displaying of messagebox either for Success, Warning, or Error message, then you will see that the size of messagebox will be static, right? In other words, it won't be auto-adjusted to the screen width in the mobile device which is narrower than the computer screen width. In addition, if you have been enabling jQuery Auto-Hide Message feature (one of so many new features provided from Masino Extensions) in your web application that generated by PHPMaker, then its style is differ with the Twitter Bootstrap style. So, the good news is: all of them now have been improved.

I switched to use Alertify jQuery Message Box kept using Twitter Bootstrap Modal Dialog for displaying the messagebox for Success, Warning, and Error message. Each message type will be displayed in the different color. Success uses green, Warning uses yellow, and Error uses red color; both for the fore font and background color. You will see also that the size of messagebox will be auto-adjusted to the mobile device.

If you want to see it in action, try to login to Demo of I Love PHPMaker 10 website (username: admin, password: master), then open (for example) Categories menu, and try to edit and save the record(s) in there. After successfully saving the record(s), you should see the Success message is displayed using Alertify jQuery Message Box.

You may also open the generated Request Password (forgotpwd.php) page of Demo of I Love PHPMaker 10 website, and then try to enter any valid email address you desire (and make sure that email has not been registered in that demo site), enter the CAPTCHA, and then submit the form. You should see the warning message which is displayed using Alertify jQuery Message Box Modal Dialog window.

If you open thoses pages using browser in your computer, then try to adjust the width of your browser window become narrower, just like when you are displaying them on your mobile phone device. You will see the width of the messagebox will be auto-adjusted to the screen of browser.

In addition, now the style of jQuery Auto-Hide Message uses the style that belongs to Twitter Bootstrap. this will make your web applications look better than before. The auto-hide function also will work as well as the previous style. All this improvement will make your web applications become better.

To implement all the changes above into your web applications, then simply download eight extensions (MasinoLogin10, MasinoChangePwd10, MasinoForgotPwd10, MasinoRegister10, MasinoHeaderFooter10, MasinoFixedWidthSite10, MasinoPreviewRow10, and MasinoVisitorStatistics10) that I just updated today; May 8, 2014. After downloading, then extract them into extensions sub-folder, afterwards, re-generate ALL your script files using PHPMaker, as always.

Enjoy it! 🙂