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

AZSlideIn has some basic CSS that you should not initially need to adjust. slidein.css
You can find the CSS which you can change yourself in the file CSS Team

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. functionlib/azSlideInReady

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

2. var AZSlideIn


AZSlideIn.$SlideIn.hasClass("az-slidein-active")


/*---------------------
Slidein
slidein.css
---------------------*/

.az-slidein > .az-slidein-tab
{
    background-color: #0078D7;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.az-slidein-card
{
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.az-slidein-card > article
{
    background-color: #FFFFFF;
    color: #000000;
}

.az-slidein-card > article > *
{
    font-size: 14px;
}