HTML5 Responsive Notify 2 - Index - DMXzone.COM Dynamic HTML5 Responsive Notify 2 ... images and other ... customize the appearance and animation settings of HTML5 Responsive Notify
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Table of contents Table of contents ........................................................................................................................................................ 1 About HTML5 Responsive Notify 2 .............................................................................................................................. 2 Features in Detail ........................................................................................................................................................ 3 The Basics: Insert HTML5 Responsive Notify 2 on your Page .................................................................................... 10 Advanced: Retrieve your Notifications from a Database Source ................................................................................ 16 Video: Using HTML5 Responsive Notify 2 .................................................................................................................. 24 Video: Dynamic HTML5 Responsive Notify 2 ............................................................................................................. 24
About HTML5 Responsive Notify 2 HTML5 Responsive Notify 2 is an excellent Dreamweaver extension if you want to inform your users of something important, capture their attention or notify them. The rich notifications allow you to give them feedback on the task that they’ve completed, about its status, success or failure. Fully customizable through the CSS, the notify boxes can be styled to fit your website design. With the proper color, the notifies are easy to notice and will draw your users’ attention instantly. The appearance of the messages is scaled to match the browser size. Whether it’s a desktop or a mobile device browser, the extensions will make it look great no matter what. You can even retrieve your notifications from a database driven source, because of its HTML5 Data Bindings and DMXzone Database Connector support.
Rich HTML5 notifications and alerts - Lets you simply inform your users of something important, capture their attention or notify them.
Provide users with proper feedback - The rich notifications give your users feedback on the task that they’ve
completed about status, success or failure. For example, if they have to provide their email and it’s verified as valid they’ll receive a successful message. If not, a different one to point out their mistake will be shown.
Different designs for the notifications - Fully customizable through the CSS, the notify boxes can be styled to fit your website design. With the proper color, the notifies are easy to notice and will draw your users ’ attention instantly.
Responsive notifies - The appearance of the messages is scaled to match the browser size. Whether it ’s a desktop or a mobile device browser, the extensions will make it look great no matter what.
Mobile integration - Due to its responsiveness, the notifies fit and appear awesomely on any mobile device, tablet or smart phone.
Notification title and content - If you want to improve your notification messages with links, images and other styling you can use the power of HTML.
Dynamic notifies - You can retrieve your notifications from a database driven source, because of the support for HTML5 Data Bindings and DMXzone Database Connector.
Beautiful animation effects - Allow your message boxes to fade in or out with different transitions and duration time for a greater user experience.
Great Dreamweaver integration - Last but definitely not least, the HTML5 Responsive Notify 2 has a great interactive dialogue in Dreamweaver with all the options you’ll need.
Before you begin Make sure to setup your site in Dreamweaver first before creating a page. If you don ’t know how to do that please read this.
Installing the extension Read the tutorial at http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/ Login, download the product, and look up your serial at http://www.dmxzone.com/user/products Get the latest DMXzone Extension Manager at http://www.dmxzone.com/go/22670/dmxzone-extension-manager-for-dreamweaver Open DMXzone Extension Manager and go to your Purchased products tab and click install. If you have a subscription, the extension is to be found and installed in the Explore tab. Get the latest extension manager from Adobe at http://www.adobe.com/exchange/em_download/ Open the .zxp file if you’re using Dreamweaver CC or the .mxp file for Dreamweaver CS+ with Adobe Extension manager and install the extension. If you experience any problems contact our Live Support!
The Basics: Insert HTML5 Responsive Notify 2 on your Page In this tutorial we will show you how to insert HTML5 Responsive Notify 2 on your page. *You can also check out the video.
3. We want to display the notify on page load therefor we select the “show notify” action (1). Enter a title for the notification (2) and your content, which can contain HTML tags (3).
4. Now, choose a layout for the notify box, we select “top center” position (1). Since our message is informative, we also select info type of notify (2). In addition, you can adjust the “fade in/out” animation duration and timeout settings but for this tutorial we leave them to their defaults. Click the “OK button” when you’re done.
5. You can see, that the info notify appears at the top center of your page, when you load it. That’s how easy it is to use HTML5 Responsive Notify 2 on your page.
Advanced: Retrieve your Notifications from a Database Source In this tutorial we will show you how to use dynamic data with HTML5 Responsive Notify 2. *You can also check out the video.
How to do it 1. We created a data source in order to get the user’s info when he/she is logged in. We’d like to use some of this
information, inside the HTML5 Responsive Notify 2. Now, let’s select the body tag (1) and from the behaviors panel (2) we click „add new behavior” button (3).
7. Here, you can see the greeting message that appears in the HTML5 Responsive Notify 2, when the user loads the page. That’s how easy it is to use HTML5 Responsive Notify 2 with dynamic data.