AZ SlideIn

Default settings
new AZSlideIn(
{
    azSlideInId: "",
    azSlideInText: "",
    azSlideInTop: 30,
    azSlideInWidth: 300,
    azSlideInHeight: 0,
    azSlideInPosition: "right",
    azSlideInTabText: "",
    azSlideInTabIcon: "fas fa-bars",
    azSlideInTabBackgroundColor: "",
    azSlideInTabColor: "",
    azSlideInArticleBackgroundColor: "",
    azSlideInArticleColor: ""
});

Init AZSlideIn

There are two ways to initiate the AZSlideIn. The way you choose is important for further use of the function.

1. new AZSlideIn();
The function is initiated but you do not assign the function to a variable. This means you can use the azSlideInReady functions in relation to further interaction with the function.

2. var AZSlideIn = new AZSlideIn();
The function is initiated and assigned to a variable. This means you can use the variable in relation to further interaction with the function.



Additional Features

If you want to use your own buttons or links to open/close the AZSlideIn.

1. functionlib/azSlideInReady

$.subscribe("functionlib/azSlideInReady", function (e, data)
{
    data.azSelectSlideInTab();
});
 
2. var AZSlideIn


AZSlideIn.azSelectSlideInTab();


You also have the option to replace the content of the AZSlideIn.

1. functionlib/azSlideInReady

$.subscribe("functionlib/azSlideInReady", function (e, data)
{
    data.azChangeText("This is a text");
});
 
2. var AZSlideIn


AZSlideIn.azChangeText("This is a text");

azSlideInId Type: String Default: ""
azSlideInText Type: String Default: "" Values: Text or HTML
azSlideInTop Type: Integer Default: 30 Unit: pixels
azSlideInWidth Type: Integer Default: 300 Unit: pixels
azSlideInHeight Type: Integer Default: 0 Unit: pixels
azSlideInPosition Type: String Default: "right" Values: "right" or "left"
azSlideInTabText Type: String Default: "" Values: Text
azSlideInTabIcon Type: String Default: "fas fa-bars"
azSlideInTabBackgroundColor Type: Color Hex Default: ""
See also CSS .az-slidein > .az-slidein-tab
azSlideInTabColor Type: Color Hex Default: ""
See also CSS .az-slidein > .az-slidein-tab
azSlideInArticleBackgroundColor Type: Color Hex Default: ""
See also CSS .az-slidein-card > article
azSlideInArticleColor Type: Color Hex Default: ""
See also CSS .az-slidein-card > article
functionlib/azSlideInReady Type: Function
$.subscribe("functionlib/azSlideInReady", function (e, data)
{
    data.azSlideInId
    data.azSelectSlideInTab - ƒ ()
    data.azChangeText - ƒ (n)
});

This function is triggered when AZSlideIn is fully initiated.

AZ SlideIn CSS

AZ SlideIn has some CSS that you can find here: slidein.css

A CSS class is added to AZSlideIn when the AZSlideIn is active.

<div class="az-slidein az-slidein-active"></div>

This allows you to check if an AZSlideIn is active or deactivated, (open/closed).

1. new AZSlideIn();
$.subscribeonce("functionlib/azSlideInReady", function (e, data)
{
    data.$SlideIn.hasClass("az-slidein-active")
});

2. var AZSlideIn = new AZSlideIn();
AZSlideIn.$SlideIn.hasClass("az-slidein-active")