html5 responsive notify 2 - index - dmxzone.com dynamic html5 responsive notify 2 ... images and...

HTML5 Responsive Notify 2 DMXzone

Copyright © 2015 DMXzone.com All Rights Reserved To get more go to DMXzone.com

of 24

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



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

http://www.dmxzone.com/go/23259/html5-responsive-notify-2

http://www.dmxzone.com/go/21863/html5-data-bindings

http://www.dmxzone.com/go/22072/dmxzone-database-connector-php



of 24

Features in Detail

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.



of 24

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.



of 24

Key positioning - To make sure your users notice the notification right away you can position it anywhere you’d like on your website.



of 24

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.



of 24

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.



of 24

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.



of 24

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!

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/

http://www.dmxzone.com/user/products

http://www.dmxzone.com/go/22670/dmxzone-extension-manager-for-dreamweaver

http://www.adobe.com/exchange/em_download/



of 24

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.


http://www.dmxzone.com/go/23262/using-html5-responsive-notify-2



of 24

How to do it 1. We’d like to show a notification when the user loads the page. In order to do that, select the body tag of your

page (1), open the behaviors panel (2) and click “add new behavior” button (3).



of 24

2. Form the DMXzone menu (1), select Control HTML5 Responsive Notify 2 (2) and its dialog will appear.



of 24

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



of 24

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.



of 24

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.



of 24

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.


http://www.dmxzone.com/go/23263/dynamic-html5-responsive-notify-2



of 24

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



of 24

2. From the DMXzone menu (1), select Control HTML5 Responsive Notify 2 (2) and its dialog will appear.



of 24

3. We’d like to greet the user that is logged in. So we need to use dynamic data here. Click the dynamic data button.



of 24

4. Now, select the dynamic data binding that you want to display in the notify title (1) and click OK (2).



of 24

5. Along with the dynamic data you can also add some static text too.



of 24

6. Then, customize the appearance and animation settings of HTML5 Responsive Notify and click OK when you’re done.



of 24

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.



of 24

Video: Using HTML5 Responsive Notify 2 With this movie we will show you how to add HTML5 Responsive Notify 2 on your page.

Video: Dynamic HTML5 Responsive Notify 2

With this movie we will show you how to use the HTML5 Responsive Notify 2 with dynamic data.

http://www.dmxzone.com/go/23262/using-html5-responsive-notify-2


http://www.dmxzone.com/go/23263/dynamic-html5-responsive-notify-2


html5 responsive notify 2 - index - dmxzone.com dynamic html5 responsive notify 2 ... images and...

Documents