Loading, please wait...

ARTDESIGN WINDOW CONTENT

SETTINGS

Attributes

data-ad-window-content-options="LeftNavigation"

This attribute overwrites the settings of the plugin

data-ad-window-content-animation="Scale"

This attribute sets the type of the element animation (Scale, Fade, TopBottom, BottomTop, LeftRight, RightLeft)

data-ad-window-panel-delay="0.8"

This attribute specifies the start delay of the element animation

data-ad-window-panel-animation-speed="0.75"

This attribute sets the speed of the element animtion
<ul class="ArtDesignWindowContent" data-ad-window-content-options="LeftNavigation">
    <li data-ad-window-panel-tooltip="Page one">
        <table class="WindowContent">
            <tbody>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Scale" data-ad-window-panel-animation-speed="0.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Scale animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="TopBottom" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">TopBottom animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="LeftRight" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">LeftRight animation</div></td>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="RightLeft" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">RightLeft animation</div></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="BottomTop" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">BottomTop animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Fade" data-ad-window-panel-animation-speed="1.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Fade animation</div></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </li>
    <li data-ad-window-panel-tooltip="Page two">
        <table class="WindowContent">
            <tbody>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Scale" data-ad-window-panel-animation-speed="0.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Scale animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="TopBottom" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">TopBottom animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="LeftRight" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">LeftRight animation</div></td>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="RightLeft" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">RightLeft animation</div></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="BottomTop" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">BottomTop animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Fade" data-ad-window-panel-animation-speed="1.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Fade animation</div></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </li>
    <li data-ad-window-panel-tooltip="Page three">
        <table class="WindowContent">
            <tbody>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Scale" data-ad-window-panel-animation-speed="0.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Scale animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="TopBottom" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">TopBottom animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="LeftRight" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">LeftRight animation</div></td>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="RightLeft" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">RightLeft animation</div></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="BottomTop" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">BottomTop animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Fade" data-ad-window-panel-animation-speed="1.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Fade animation</div></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </li>
</ul>

Public Methods

Destroy

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

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "WC_", // 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: "WC_"
        ElementClass: "Element" // Specifies the element class; Must be string; By default: "Element"
    },
    Global: { // Global settings of the element
        InitDelay: 1,
        LoadDelay: 100,
        StartSector: 1
    },
    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
    },
    Content: {
        ContentVerticalPosition: "top", // Set the vertical position of the content; Must be string (top, middle, bottom); By default: "top"
        Exclude: ".NotWindowContent" ////
    },
    Navigation: { // Navigation settings
        NavigationToolTipStyle: "DefaultWindowContent",
        NavigationPositionHorizontal: "Right",
        NavigationPositionVertical: "Middle",
        NavigationMargin: "20px 0 0 20px",
        NavigationButtonSize: 20,
        NavigationButtonBorderSize: 0,
        NavigationButtonBackgroundColor: "#A1BDD6",
        NavigationButtonBorderColor: "#A1BDD6",
        NavigationButtonBackgroundColorActive: "#719AC1",
        NavigationButtonBorderColorActive: "#719AC1",
        NavigationButtonMargin: 16,
        NavigationButtonHoverScale: 1,
        NavigationButtonHoverSpeed: 0.6,
        NavigationButtonEasingConfig: 1.3
    },
    Animation: { // Animation settings
        Delay: 0.4,
        Margin: 50,
        Scale: 0.5,
        Opacity: 0,
        Speed: 1,
        Ease: "Back.easeOut.config(3)"
    }
</script>