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;
}