Loading, please wait...

ARTDESIGN PANEL CONTENT

SETTINGS

Attributes

data-plugin-ad-panel-content="ad-panel-content"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-panel-content="ad-panel-content" data-ad-panel-content-title="TITLE" data-ad-panel-content-title-icon="icon-info-4" data-ad-panel-content-status="Open">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl.
</div>

data-ad-panel-content-options="Blue"

This attribute overwrites the settings of the plugin
<div data-plugin-ad-panel-content="ad-panel-content" data-ad-panel-content-title="TITLE" data-ad-panel-content-title-icon="icon-info-4" data-ad-panel-content-status="Open" data-ad-panel-content-options="Blue">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl.
</div>

data-ad-panel-content-title="TITLE"

This attribute sets title of the panel
<div data-plugin-ad-panel-content="ad-panel-content" data-ad-panel-content-title="TITLE" data-ad-panel-content-title-icon="icon-info-4" data-ad-panel-content-status="Open">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl.
</div>

data-ad-panel-content-title-icon="icon-info-4"

This attribute sets icon to the title of the panel
<div data-plugin-ad-panel-content="ad-panel-content" data-ad-panel-content-title="TITLE" data-ad-panel-content-title-icon="icon-info-4" data-ad-panel-content-status="Open">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl.
</div>

data-ad-panel-content-status="Open"

This attribute sets status Open to the content
<div data-plugin-ad-panel-content="ad-panel-content" data-ad-panel-content-title="TITLE" data-ad-panel-content-title-icon="icon-info-4" data-ad-panel-content-status="Open">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl. Nulla rutrum luctus arcu eget pellentesque. Maecenas pharetra mauris blandit orci fermentum, nec congue eros egestas. Nunc facilisis leo enim, a sodales augue placerat sed. Vestibulum sapien dui, commodo et nisl vel, suscipit consectetur nulla. Fusce placerat nulla eget nulla aliquet, faucibus mattis est molestie. Proin quis arcu ac lacus interdum gravida.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar. Aenean efficitur quis eros vitae faucibus. Pellentesque euismod, nisl id rhoncus vulputate, ante augue rhoncus arcu, eu rutrum turpis erat a nisl.
</div>

Public Methods

Destroy

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

Default Options

<script type="text/javascript">
    Global: { // Global settings of the element
        ClassPrefix: "PC_", // 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: "PC_"
        MaxWidth: "100%", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: "100%"
        Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "100%"
        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 6px 0 0", // Set the BorderRadius (top, right, bottom, left); Must be String; By default: "6px 6px 0 0"
            BorderColor: "#C6D7E6" // Set the BorderColor; Must be String; By default: "#C6D7E6"
        }
    },
    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
    },
    InfoNavigation: { // Settings for the InfoNavigation
        Height: "36px", // Set the Height; Must be string (px, %, auto); By default: "36px"
        BackgroundColor: "#E8EFF5", // Set the BackgroundColor; Must be String; By default: "#E8EFF5"
        HorizontalPadding: "15px", // Set the horizontal padding of the element; Must be string (px, %, auto); By default: "15px"
        BorderBottom: { // Settings for the BorderBottom
            BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderColor: "#C6D7E6" // Set the BorderColor; Must be String; By default: "#405569"
        },
        Text: { // Settings of the text of the element
            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"
            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"
            FontSize: "13px", // Set the size of the font; Must be string; By default: "13px"
            Color: "#719AC1", // Set the color without gradient; Must be string; By default: "#FFFFFF"
            LineHeight: "2.4em" // The line-height property specifies the line height of the element, negative values are not allowed; Must be integer or decimal; By default: "2.4em"
        },
        Icon: { // Settings for the Icon
            FontSize: "18px", // Set the size of the font; Must be string; By default: "18px"
            Padding: "5px 5px 0 5px", // Set the padding of the element; Must be string (px, %, auto); By default: "5px 5px 0 5px"
            Color: "#719AC1" // Set the color without gradient; Must be string; By default: "#719AC1"
        },
        OpenCloseButton: { // Settings for the OpenCloseButton
            AnimationSpeed: 0.3, // Set the AnimationSpeed; Must be decimal; By default: 0.3
            Position: "Right", // Set position of the element; Must be string; By default: "Right"
            Icon: { // Settings for Icon
                Icon: "icon-menu-1", // Set the Icon from the ArtDesignIcons PlugIn; Must be string; By default: "icon-menu-1"
                FontSize: "20px", // Set the size of the font; Must be string; By default: "20px"
                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"
                Padding: "0 5px 0 5px", // Set the padding of the element; Must be string (px, %, auto); By default: "0 5px 0 5px"
                Normal: {
                    Color: "#719AC1" // Normal color; By default: "#719AC1"
                },
                Hover: {
                    Color: "#719AC1" // Hover color without gradient; By default: "#719AC1"
                }
            }
        }
    },
    Content: { // Settings for the Content
        AnimationSpeed: 0.35, // Set the AnimationSpeed; Must be decimal; By default: 0.35
        BackgroundColor: "#FFFFFF", // Set the BackgroundColor; Must be String; By default: "#FFFFFF"
        Color: "#719AC1", // Set the color without gradient; Must be string; By default: "#3C5266"
        Padding: "20px 20px 20px 20px" // Set the padding of the element (top, right, bottom, left); Must be string; By default: "20px 20px 20px 20px"
    }
</script>