Loading, please wait...

ARTDESIGN NOTIFICATION

SETTINGS

Attributes

data-plugin-ad-notification="ad-notification"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-notification="ad-notification" data-ad-notification-title="Notification Title" data-ad-notification-content="Notification Content" data-ad-notification-options="Blue">Notification</div>

data-ad-notification-options="Blue, CloseButton"

This attribute overwrites the settings of the plugin
<div data-plugin-ad-notification="ad-notification" data-ad-notification-title="Notification Title" data-ad-notification-content="Notification Content" data-ad-notification-options="Blue, CloseButton">Notification</div>

data-ad-notification-title="Notification Title"

This attribute sets title of the frame
<div data-plugin-ad-notification="ad-notification" data-ad-notification-title="Notification Title" data-ad-notification-content="Notification Content">Notification</div>

data-ad-notification-content="Notification Content"

This attribute sets content of the frame
<div data-plugin-ad-notification="ad-notification" data-ad-notification-title="Notification Title" data-ad-notification-content="Notification Content">Notification</div>

Public Methods

Destroy

<script type="text/javascript">
    var Notification = $(".ArtDesign").ArtDesignNotification();
    Notification.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "N_" // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "N_"
    },
    Global: { // Global settings of the element
        MaxWidth: "300px", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: "300px"
        ZIndex: 999999999, // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 999999999
        AnimationHoverSpeed: 0.3, // Set the AnimationHoverSpeed; Must be decimal; By default: 0.3
        AnimationSpeed: 0.6, // Set the AnimationSpeed; Must be decimal; By default: 0.6
        Event: "Click", // Set the waiting event: Must be string; By default: "Click"
        Position: "TopRight", // Set position of the element; Must be string (TopLeft, TopRight, BottomLeft, BottomRight); By default: "TopRight"
        AutoClose: true, // If it is true it sets Auto Close; Must be boolean; By default: true
        AutoCloseDelay: 4000 // Set the Auto Close Delay at milliseconds; Must be integer; By default: 4000
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    Close: { // Settings for Close
        Close: true, // If it is true, it sets the following settings for Close; By default: true
        Icon: { // Settings for the Icon
            Icon: "icon-cancel-circled", // Set the Icon from the ArtDesignIcons PlugIn; Must be string; By default: "icon-cancel-circled"
            Position: "Right", // Set position of the element; Must be string (left, right); By default: "Right"
            Horizontal: "6px", // Set the horizontal position; Must be string; By default: "6px"
            Vertical: "-28px", // Set the vertical position; Must be string; By default: "-28px"
            FontSize: "24px", // Set the size of the font; Must be string (px, %); By default: "24px"
            Normal: {
                Color: "#719AC1" // Normal color; By default: "#719AC1"
            },
            Hover: {
                Color: "#6488AA" // Hover color without gradient; By default: "#6488AA"
            },
            Click: {
                Color: "#52708C" // Click color; By default: "#405569"
            }
        }
    },
    Containers: { // Settings for the Containers
        Margin: { // Settings for the Margin (TopLeft, TopRight, BottomLeft, BottomRight)
            TopLeft: "10px 0px 0px 30px", // Set the TopLeft; Must be String; By default: "10px 0px 0px 30px"
            TopRight: "16px 30px 0px 0px", // Set the TopRight; Must be String; By default: "16px 30px 0px 0px"
            BottomLeft: "0px 0px 10px 30px", // Set the BottomLeft; Must be String; By default: "0px 0px 10px 30px"
            BottomRight: "0px 30px 10px 0px" // Set the BottomRight; Must be String; By default: "0px 30px 10px 0px"
        }
    },
    Body: { // Settings for the Body
        Padding: "0px", // Set the padding of the element; Must be string (px, %, auto); By default: "0px"
        Background: { // Background setting (for different browsers)
            BackgroundColor: "#FFFFFF",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 1)))",
            WebkitLinearGradien: "-webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF', GradientType=0)"
        },
        Border: { // Settings for the Border
            BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderRadius: "6px", // Set the BorderRadius; Must be String; By default: "6px"
            BorderColor: "#C6D7E6", // Set the BorderColor; Must be String; By default: "#C6D7E6"
            Shadow: { // Settings for the Shadow
                Outer: { // Setting for the outer shadow of the element
                    Shadow: "0px 0px 1px 0px rgba(47, 64, 80, 0.4)"
                }
            }
        },
        Title: { // Settings for the Title
            SeparatorBottom: "solid 1px #C6D7E6", // Set the bottom border (type, width, color) of the title; Must be string; By default: "solid 1px #C6D7E6"
            Padding: "8px 10px 8px 10px", // Set the padding of the title; Must be string (top, right, bottom, left); By default: "8px 10px 8px 10px"
            Background: { // Background setting (for different browsers)
                BackgroundColor: "#E8EFF5",
                MozLinearGradient: "-moz-linear-gradient(top, rgba(232, 239, 245, 1) 0%, rgba(232, 239, 245, 1) 100%)",
                WebkitGradient: "-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(232, 239, 245, 1)), color-stop(100%, rgba(232, 239, 245, 1)))",
                WebkitLinearGradien: "-webkit-linear-gradient(top, rgba(232, 239, 245, 1) 0%, rgba(232, 239, 245, 1) 100%)",
                OLinearGradient: "-o-linear-gradient(top, rgba(232, 239, 245, 1) 0%, rgba(232, 239, 245, 1) 100%)",
                MSLinearGradient: "-ms-linear-gradient(top, rgba(232, 239, 245, 1) 0%, rgba(232, 239, 245, 1) 100%)",
                LinearGradient: "linear-gradient(to bottom, rgba(232, 239, 245, 1) 0%, rgba(232, 239, 245, 1) 100%)",
                FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8EFF5', endColorstr='#E8EFF5', GradientType=0)"
            },
            Text: { // Text settings
                FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
                FontSize: "14px", // Set the size of the font; Must be string; By default: "14px"
                FontWeight: "bold", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "bold"
                FontStyle: "normal", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "normal"
                TextAlign: "left", // Set the text-align property which specifies the horizontal alignment of text in an element; Must the string (left, right, center, justify, initial, inherit); By default: "left"
                LineHeight: "1.4em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.4em"
                Color: "#719AC1" // Set the color without gradient; By default: "#719AC1"
            }
        },
        Content: { // Settings for the Content
            Padding: "10px 10px 10px 10px", // Set the padding of the content; Must be string (top, right, bottom, left); By default: "10px 10px 10px 10px"
            Background: { // Background setting (for different browsers)
                BackgroundColor: "#FFFFFF",
                MozLinearGradient: "-moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
                WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 1)))",
                WebkitLinearGradien: "-webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
                OLinearGradient: "-o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
                MSLinearGradient: "-ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
                LinearGradient: "linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%)",
                FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF', GradientType=0)"
            },
            Text: {
                FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
                FontSize: "12px", // Set the size of the font; Must be string; By default: "12px"
                FontWeight: "normal", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "normal"
                FontStyle: "normal", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "normal"
                TextAlign: "left", // Set the text-align property which specifies the horizontal alignment of text in an element; Must the string (left, right, center, justify, initial, inherit); By default: "left"
                LineHeight: "1.4em", // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "1.4em"
                Color: "#719AC1" // Set the color without gradient; By default: "#719AC1"
            }
        }
    }
</script>