Notification Boxes

A) * Version 3.0 - Features * - INDEX

"Notication Boxes" v3.0 has some new features:

• Added Notification Template:
  • - Notification Box without Description
  • - Notification Box with description (Template 1)
  • - Notification Box with description (Template 2)
• Added auto height for more line of text
• Added auto width (only for Notification Box Template without description)

B) Templates - INDEX

This project contains 3 Notification Boxes Teamplates located in the HTML folder.

• Notification Box - without Description - (path: HTML/NO-DESCRIPTION)
• Notification Box with description (Template 1) - (path: HTML/WITH-DESCRIPTION/TEMPLATE_1)
• Notification Box with description (Template 2) - (path: HTML/WITH-DESCRIPTION/TEMPLATE_2)

B.1) Notification Box - without Description - INDEX

HTML Structure

To insert a notification box in a html page, create a DIV tag and apply the class "notification". After that, choose a notication type applying one of the class below:

• "success": for success notification.
• "warning": for warning notification.
• "tip": for quick tip notification.
• "error": for error notification.
• "secure": for secure area notification.
• "info": for info notification.
• "message": for message notification.
• "download": for download notification.
• "purchase": for purchase notification.
• "print": for print notification.

To compleate the Notification Box follow the example below.

Line 2: The SPAN tag is used for the close button.
Line 3-5: The DIV tag with class "text" contains the Notification Box message
Line 4: The STRONG tag contains the title of Notification Box

Note:

Apply the CLASS "autoWidth" to the main div tag to fit Notification Box to bowser windodw.

<div class="notification success autoWidth"></div>

B.2) Notification Box - with Description (Template 1) - INDEX

The Notification Box with description Template 1 contains a section that allows to insert more information about notification message.

HTML Structure

The box is wrapped in a main DIV tag with a class: "notification-wrap". After that insert the structure of "Notification Box without description" (previously described), and an other DIV tag with a class "description" that contains info message.
Follow the example below.

B.3) Notification Box - with Description (Template 2) - INDEX

HTML Structure

The Notification Box with description Template 2 has the same structure as Template 1, but there are some modifications: As you can see in the example below, at line 6 there is a EM tag. It contains the text for button that allows to slide up and slide down message description.

You can customize the EM tag editing two javascript variables: go to script.js file and edit the variables text "infoText_slideDown" "infoText_slideUp".

C) CSS Files and Structure - INDEX

The CCS file are in the "css" folder. The notification boxes are based on CSS so link the file "style.css" in the HEAD tag.

D) Javascript & Plugins - INDEX

The theme uses the JQuery library. The file "script.js" contains the code used for animations and effects. Add to HEAD tag jQuery library and script.js file.

E) PSD Files - INDEX

The project contains two .psd files located in "PSD" folder. All notification boxes are designed in Photoshop so they can be modify.

F) Bugs - INDEX

To fix a Internet Explorer bug the theme use a "if" condition. In IE 7 and below the notification icons do not appear. So applying "IE8.js" file the problem is fixed.

G) Sources & Credits - INDEX

I've used the following library:

• jQuery - http://jquery.com/ (for fade out effect)

Do not forget to check the official website www.evographics.net