Your IP : 3.146.206.87


Current Path : /home/lentoinv/finationglobal.com/arch/Documentation/
Upload File :
Current File : //home/lentoinv/finationglobal.com/arch/Documentation/others.html

<!DOCTYPE html>
<html>
<head>
<!-- Meta data -->
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Zanex – Bootstrap5  Admin & Dashboard Template">
<meta name="author" content="Spruko Technologies Private Limited">
<meta name="keywords" content="admin template,admin dashboard,bootstrap 5 admin template,html template,html admin template,admin,bootstrap 5 html template,html dashboard,dashboard,crm,admin pane,admin dashboard template,html responsive template,crm admin template,dashboard template.">
<!-- Title -->
<title>Zanex – Bootstrap5  Admin & Dashboard Template</title>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="assets/plugins/iconfonts/icons.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/main.css" rel="stylesheet">
<!---Internal  Prism css-->
<link href="assets/plugins/prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism-treeview.css" rel="stylesheet">
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
</head>

<body class="theme-blush">
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="preloader">
            <div class="spinner-layer pl-blush">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- #END# Page Loader -->

<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->

<!-- Sidebarover lay -->
<div class="sidebar-overlay" data-toggle="sidebar"></div>

<!-- #Top Bar -->
<section>
    <!-- Left Sidebar -->
    <aside id="leftsidebar" class="sidebar">
        <!-- User Info -->
        <div class="admin-image"> <img src="assets/images/logo-3.png" alt="" > </div>
        <!-- Menu -->
        <div class="menu main-sidebar">
			<ul class="list" id="documenter_nav">
				<li class="nav-item"><a class="nav-link" href="index.html"><i class="fe fe-airplay sidemenu-icon"></i><span class="sidemenu-label">Introduction</span></a></li>
				<li class="nav-item"><a class="nav-link" href="folder-structure.html"><i class="fe fe-folder sidemenu-icon"></i><span class="sidemenu-label">Folder structure</span></a></li>
				<li class="nav-item"><a class="nav-link" href="layouts.html"><i class="fe fe-layout sidemenu-icon"></i><span class="sidemenu-label">Layouts</span></a></li>
				<li class="nav-item"><a class="nav-link" href="faqs.html"><i class="fe fe-help-circle sidemenu-icon"></i><span class="sidemenu-label text-primary fw-bold mr-5">Faqs </span><i class="fa fa-star float-right sidemenu-icon-2 text-warning"></i></a></li>
				<li class="nav-item"><a class="nav-link" href="switcher.html"><i class="fe fe-grid sidemenu-icon"></i><span class="sidemenu-label">Switcher</span></a></li>
				<li class="nav-item"><a class="nav-link" href="gulp.html"><i class="fe fe-settings sidemenu-icon"></i><span class="sidemenu-label">Gulp</span></a></li>
				<li class="nav-item"><a class="nav-link" href="html-structure.html"><i class="fe fe-codepen sidemenu-icon"></i><span class="sidemenu-label">html-structure</span></a></li>
				<li class="nav-item"><a class="nav-link" href="apps.html"><i class="fe fe-briefcase sidemenu-icon"></i><span class="sidemenu-label">Apps</span></a></li>
				<li class="nav-item"><a class="nav-link" href="elements.html"><i class="fe fe-aperture sidemenu-icon"></i><span class="sidemenu-label">Elements</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-elements.html"><i class="fe fe-file-text sidemenu-icon"></i><span class="sidemenu-label">Form-elements</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-advanced.html"><i class="fe fe-cpu sidemenu-icon"></i><span class="sidemenu-label">Form-advanced</span></a></li>
				<li class="nav-item"><a class="nav-link" href="treeview.html"><i class="fe fe-lock sidemenu-icon"></i><span class="sidemenu-label">Treeview</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-wizard.html"><i class="fe fe-hard-drive sidemenu-icon"></i><span class="sidemenu-label">Form-wizard</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-editor.html"><i class="fe fe-edit sidemenu-icon"></i><span class="sidemenu-label">Form-editor</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-validation.html"><i class="fe fe-file-plus sidemenu-icon"></i><span class="sidemenu-label">Form-validation</span></a></li>
				<li class="nav-item"><a class="nav-link" href="maps.html"><i class="fe fe-map-pin sidemenu-icon"></i><span class="sidemenu-label">Maps</span></a></li>
				<li class="nav-item"><a class="nav-link" href="charts.html"><i class="fe fe-pie-chart sidemenu-icon"></i><span class="sidemenu-label">Charts</span></a></li>
				<li class="nav-item"><a class="nav-link" href="tables.html"><i class="fe fe-database sidemenu-icon"></i><span class="sidemenu-label">Tables</span></a></li>
				<li class="nav-item"><a class="nav-link" href="icons.html"><i class="fe fe-anchor sidemenu-icon"></i><span class="sidemenu-label">Icons</span></a></li>
				<li class="nav-item"><a class="nav-link" href="others.html"><i class="fe fe-link sidemenu-icon"></i><span class="sidemenu-label">Others</span></a></li>
				<li class="nav-item"><a class="nav-link" href="plugins.html"><i class="fe fe-droplet sidemenu-icon"></i><span class="sidemenu-label">Plugins</span></a></li>
				<li class="nav-item"><a class="nav-link" href="theme.html"><i class="fe fe-layers sidemenu-icon"></i><span class="sidemenu-label">Theme Style</span></a></li>
			</ul>
		</div>
        <!-- #Menu -->
    </aside>
    <!-- #END# Left Sidebar -->
</section>

<section class="content home">
    <div class="container-fluid">
        <div class="block-header mt-3 ml-3">
            <h1>Zanex – Bootstrap 5  Admin & Dashboard HTML Template</h1>
        </div>
		<div class="">
			<div class="alert alert-primary-transparent">
				<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true">×</button>
				<strong>Note:-</strong>
				<hr class="message-inner-separator">
				<p>Please refer <a href="faqs.html" class="text-primary fs-6 fw-bold">Faq's</a>page in documentation itself for queries like customization like color ,rtl ,dark style..etc.</p>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-sm-12 col-lg-12 col-xl-9">
				<div class="card" id="others-stickyheader">
					<div class="body">
						<h5 class="mt-0 mb-0">How to add Sticky Header</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#accordion-wizard" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#accordion-wizard1" data-toggle="tab" class="mr-4 nav-link "> JS</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="accordion-wizard">
								<p class="m-3">Add <code>sticky</code> class as shown below For Particular div </p>
									<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">

<div class="sticky">
	............
	............
</div>

		</script>
	</code>
	</pre>
</figure>
<!-- End Prism Precode -->
								</div>
								<div class="tab-pane" id="accordion-wizard1">

<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- STICKY JS --&gt;
&lt;script src="../assets/js/stiky.js"&gt;&lt;/script&gt;

	</code>
	</pre>
</figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-pscroll">
					<div class="body">
						<h5 class="mt-0 mb-0">How to Add Perfect pscroll</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#pscroll" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#pscroll1" class="mr-4 nav-link" data-toggle="tab"> SCSS</a></li>
							<li class="nav-item"><a href="#pscroll2" data-toggle="tab" class="mr-4 nav-link "> JS</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="pscroll">
								<p class="m-3">You can Declare Both id's and classes</p>

									<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">

<!--APP-SIDEBAR-->
<div class="app-sidebar__overlay" data-bs-toggle="sidebar"></div>
<aside class="app-sidebar">
	............
	............
</aside>


		</script>
	</code>
	</pre>
</figure>
<!-- End Prism Precode -->
								</div>
								<div class="tab-pane" id="pscroll1">
								<p class="m-3">You can Declare classes in place of <b>pscroll</b></p>

									<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">

<!-- P-scroll bar scss-->
assets/scss/plugins/_perfect-scrollbar.scss

	</script>
		</code>
	</pre>
</figure>

<!-- End Prism Precode -->
								</div>
								<div class="tab-pane" id="pscroll2">

<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">

&lt;!-- Perfect SCROLLBAR JS --&gt;
&lt;script src="../assets/plugins/p-scroll/perfect-scrollbar.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/p-scroll/pscroll.js"&gt;&lt;/script&gt;

	</code>
</pre>

<p class="ml-3 mt-3 mb-3">Below js is in <b>p-scroll-1.js</b>(assets/js/p-scroll-1.js)</p>
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
	<pre title="jQuery" class="javascript" data-codetype ="JQueryku"><code class="language-javascript">

//P-scrolling
const ps = new PerfectScrollbar('.app-sidebar', {
	useBothWheelAxes:true,
	suppressScrollX:true,
});

		</code>
	</pre>
</figure>

								</div>
								
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
							</div>
						</div>
					</div>
						<table class="table table-bordered bg-primary-transparent mt-4">
							<thead>
								<tr>
									<th>Type</th>
									<th>URL</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><strong>Plugin Link</strong></td>
									<td><a href="https://plugins.jquery.com/perfect-scrollbar/" target="_blank">https://plugins.jquery.com/perfect-scrollbar/</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="card" id="others-loader">
					<div class="body">
						<h5 class="mt-0 mb-0">How to Add Loader</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#Loader" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#Loader1" class="mr-4 nav-link" data-toggle="tab"> CSS</a></li>
							<li class="nav-item"><a href="#Loader2" data-toggle="tab" class="mr-4 nav-link "> JS</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="Loader">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">
<!-- GLOBAL-LOADER -->
<div id="global-loader">
	<img src="../assets/images/loader.svg" class="loader-img" alt="Loader">
</div>
<!-- /GLOBAL-LOADER -->
</script>
	</code>
	</pre>
	</figure >							</div>
								<div class="tab-pane" id="Loader1">
									<!-- Prism Code -->
<pre class="language-css"><code class="language-css"><script type="html-Cino/script">/*----- Global Loader -----*/
#global-loader {
	position: fixed;
	z-index: 50000;
	background: white;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.loader-img {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 43%;
    left: 0;
    margin: 0 auto;
    text-align: center;
}
	</script>
	</code>
	</pre>
								</div>
								<div class="tab-pane" id="Loader2">
									<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;

</code>
	</pre>
	</figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->

<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
	<pre title="jQuery" class="javascript" data-codetype ="JQueryku"><code class="language-javascript">
// ______________ PAGE LOADING
$(window).on("load", function(e) {
	$("#global-loader").fadeOut("slow");
})

	</code>
	</pre>
</figure>
								</div>
								
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-backtotop">
					<div class="body">
						<h5 class="mt-0 mb-0">How to Add Back To Top</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#backtotop" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#backtotop1" class="mr-4 nav-link" data-toggle="tab"> CSS</a></li>
							<li class="nav-item"><a href="#backtotop2" data-toggle="tab" class="mr-4 nav-link "> JS</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="backtotop">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<!-- BACK-TO-TOP -->
<a href="#top" id="back-to-top"><i class="fe fe-chevron-up"></i></a>
	</script>
		</code>
	</pre>
</figure>
								</div>
								<div class="tab-pane" id="backtotop1">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
#back-to-top {
	color: #fff;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99;
	display: none;
	text-align: center;
	z-index: 10000;
	height: 50px;
	width: 50px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color 0.1s linear;
	-moz-transition: background-color 0.1s linear;
	-webkit-transition: background-color 0.1s linear;
	-o-transition: background-color 0.1s linear;
	border-radius: 5px;
}
	</script>
		</code>
	</pre>
</figure>
								</div>
								<div class="tab-pane" id="backtotop2">

								<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;

</code>
</pre>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
	<pre title="jQuery" class="javascript" data-codetype ="JQueryku"><code class="language-javascript">
// ______________ BACK TO TOP BUTTON
$(window).on("scroll", function(e) {
	if ($(this).scrollTop() > 0) {
		$('#back-to-top').fadeIn('slow');
	} else {
		$('#back-to-top').fadeOut('slow');
	}
});
$(document).on("click", "#back-to-top", function(e) {
	$("html, body").animate({
		scrollTop: 0
	}, 600);
	return false;
});

		</code>
	</pre>
</figure>
								</div>
								
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-fullscreen">
					<div class="body">
						<h5 class="mt-0 mb-0">How to Add FullScreen in Header</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#fullscreen" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#fullscreen2" data-toggle="tab" class="mr-4 nav-link "> JS</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="fullscreen">
								<p class="m-3">Add  class <code>fullscreen-button</code> to icon as shown below For Particular Icon </p>
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">
<a class="nav-link icon full-screen-link nav-link-bg">
	<i class="fe fe-minimize fullscreen-button"></i>
</a>
</script></code></pre></figure>
								</div>
								<div class="tab-pane" id="fullscreen2">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;


</code></pre></figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
	<pre title="jQuery" class="javascript" data-codetype ="JQueryku"><code class="language-javascript">
// ______________Full screen
$(document).on("click", ".fullscreen-button", function toggleFullScreen() {
	$('html').addClass('fullscreen-button');
	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
		if (document.documentElement.requestFullScreen) {
			document.documentElement.requestFullScreen();
		} else if (document.documentElement.mozRequestFullScreen) {
			document.documentElement.mozRequestFullScreen();
		} else if (document.documentElement.webkitRequestFullScreen) {
			document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
		} else if (document.documentElement.msRequestFullscreen) {
			document.documentElement.msRequestFullscreen();
		}
	} else {
		$('html').removeClass('fullscreen-button');
		if (document.cancelFullScreen) {
			document.cancelFullScreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}
})
		</code>
	</pre>
</figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-tooltip">
					<div class="body">
						<h5 class="mt-0 mb-0">How to Add Tooltip</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#tooltip" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#tooltip2" data-toggle="tab" class="mr-4 nav-link "> JS</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="tooltip">
								<p class="m-3">Add The HTML Properties  <code>data-bs-toggle</code>, <code>data-bs-placement</code>, <code>title</code> and Property Values to Button as shown below For the Particular button</p>
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">
<button class="btn btn-primary" data-bs-placement="top" data-bs-toggle="tooltip" title="Tooltip on top" >Hover me</button>
</script></code></pre></figure>
								</div>
								<div class="tab-pane" id="tooltip2">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;


</code></pre></figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
// ___________TOOLTIP
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	return new bootstrap.Tooltip(tooltipTriggerEl)
})
</code></pre></figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-popover">
					<div class="body">
						<h5 class="mt-0 mb-0">How to Add Popover</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#popver" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#popver2" data-toggle="tab" class="mr-4 nav-link "> JS</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="popver">
								<p class="m-3">Add The HTML Properties  <code>data-bs-toggle</code>, <code>data-bs-container</code>, <code>data-bs-placement</code>, <code>title</code>,<code>data-bs-content</code> and Property Values to Button as shown below For the Particular button</p>
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">
<button class="btn btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-bs-placement="top" data-bs-popover-color="default" data-bs-toggle="popover" title="Popover top" >Click me</button>
</script></code></pre></figure>
								</div>
								<div class="tab-pane" id="popver2">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;

</code></pre></figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
// __________POPOVER
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</code></pre></figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-card">
					<div class="body">
						<h5 class="mt-0 mb-0">Card</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#card" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="card">
								<!-- Prism Code -->
<figure class="highlight clip-widget mb-0"><pre class="language-css language-markup m-0"><code class="language-css language-markup"><script type="html-Cino/script">
<div class="card">
	<div class="card-header">
		<div class="card-title">Card-Header</div>
	</div>
	<div class="card-body">
		.............
		.............
	</div>
</div>
</script></code></pre></figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-removecard">
					<div class="body">
						<h5 class="mt-0 mb-0">Remove Card</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#remove-card" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#remove-card2" class="mr-4 nav-link" data-toggle="tab"> Js</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="remove-card">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">
<div class="card">
	<div class="card-header">
		<h3 class="card-title">Remove card</h3>
		<div class="card-options">
			<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
		</div>
	</div>
	<div class="card-body">
		...........
		...........
	</div>
</div>
</script></code></pre></figure>
								</div>
								<div class="tab-pane" id="remove-card2">
									<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;


</code></pre></figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________ FUNCTION FOR REMOVE CARD
$(document).on('click', '[data-bs-toggle="card-remove"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.remove();
	e.preventDefault();
	return false;
});

</code></pre></figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-cardcollapse">
					<div class="body">
						<h5 class="mt-0 mb-0">Card Collapse</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#collapse-card" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#collapse-card2" class="mr-4 nav-link" data-toggle="tab"> Js</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="collapse-card">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">
<div class="card">
	<div class="card-header">
		<h3 class="card-title">Collapse card</h3>
		<div class="card-options">
			<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
		</div>
	</div>
	<div class="card-body">
		...........
		...........
	</div>
</div>
</script></code></pre></figure>
								</div>
								<div class="tab-pane" id="collapse-card2">
									<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;


</code></pre></figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________ FUNCTIONS FOR COLLAPSED CARD
$(document).on('click', '[data-bs-toggle="card-collapse"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.toggleClass('card-collapsed');
	e.preventDefault();
	return false;
});
</code></pre></figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
				<div class="card" id="others-cardfullscreen">
					<div class="body">
						<h5 class="mt-0 mb-0">Card FullScreen</h5>
						<div class="bg-primary-transparent">
						<ul class="nav nav-tabs border panel-tabs main-nav-line mt-4">
							<li class="nav-item"><a href="#fullscreen-card" class="active mr-4 nav-link" data-toggle="tab"> HTML</a></li>
							<li class="nav-item"><a href="#fullscreen-card2" class="mr-4 nav-link" data-toggle="tab"> Js</a></li>
						</ul>
						<div class="panel-body tabs-menu-body border border-top-0">
							<div class="tab-content">
								<div class="tab-pane active" id="fullscreen-card">
								<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
	<code class="language-markup line-numbers mt-0 pt-0">
		<script type="html-Zanex/script">
<div class="card">
	<div class="card-header">
		<h3 class="card-title">fullscreen button</h3>
		<div class="card-options">
			<a href="javascript:void(0);" class="card-options-fullscreen" data-bs-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
		</div>
	</div>
	<div class="card-body">
		...........
		...........
	</div>
</div>
</script></code></pre></figure>
								</div>
								<div class="tab-pane" id="fullscreen-card2">
									<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- Custom js--&gt;
&lt;script src="../assets/js/custom.js"&gt;&lt;/script&gt;


</code></pre></figure>
<p class="ml-3 mt-3 mb-3">Below js is in <b>custom.js</b>(assets/js/custom.js)</p>
<!-- Prism Code -->
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________Card Full Screen
$(document).on('click', '[data-bs-toggle="card-fullscreen"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
	e.preventDefault();
	return false;
});

</code></pre></figure>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
			<div class="col-xl-3 col-lg-12 d-none d-xl-block custom-leftnav">
				<div class="main-content-left-components">
					<div class="card custom-card">
						<div class="card-body component-item">
							<div class="collapse  navbar-collapse justify-content-end" id="main-menu">
								<ul class="navbar-nav">
									<li class="nav-item active">
										<a class="nav-link" href="#others-stickyheader">Sticky Header</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-pscroll"> p Scoll</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-loader"> Loader</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-backtotop"> Back to top</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-fullscreen"> Full Screen</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-tooltip"> Tooltip</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-popover"> Popover</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-card"> Card</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-removecard"> Remove Card</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-cardcollapse"> Card Collapse</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-cardfullscreen">Card Full Screen</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#others-fonts">Google Fonts</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-sm-12">
				<div class="card" id="fonts">
					<div class="body">
						<h5  class="mt-0">Font Used</h5>
					</div>
					<div class="body pt-0">
						<p>Google fonts are used in the template. They are as follows: <a href="https://fonts.google.com" class="text-primary">Google Fonts </a></p>
						<p>Images are credited by : <a href="https://www.vecteezy.com/" class="text-primary">vecteezy.com.</a> All images are used from vecteezy website. Only we used for preview purpose if you want to use purchase vecteezy</p>
						<p>Icons are used from iconscout website: <a href="https://iconscout.com/" class="text-primary">iconscout.com.</a></p>
					</div>
				</div>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-sm-12">
				<div class="card" id="thank_you">
					<div class="body">
						<h6 class="mt-0">THANK YOU!</h6>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="color-bg">
	<div class="sidebar__toggle" data-toggle="sidebar">
		<a class="open-toggle" href="javascript:void(0);"><i class="fe fe-menu"></i></a>
	</div>
	<ul class="nav navbar-nav">
	  <li class="nav-item mr-8"><a class="btn btn-primary btn-header " href="https://themeforest.net/item/zanex-bootstrap-5-admin-dashboard-template/32984858" target="_blank"><i class="icon-help2"></i> Buy Now</a></li>
	  <li class="nav-item mr-8"><a class="btn btn-secondary btn-header " href="https://1.envato.market/MGEaN" target="_blank"><i class="icon-bag3"></i> Portfolio</a></li>
	  <li class="nav-item"><a class="btn btn-danger text-white mr-3 btn-header" href="https://spruko.com/licenses.html" target="_blank"><i class="icon-bag3"></i> Licenses</a></li>
	</ul>
</div>

<!-- Jquery Core Js -->
<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/morphingsearchscripts.bundle.js"></script> <!-- morphing search Js -->
<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/mainscripts.bundle.js"></script><!-- Custom Js -->
<script src="assets/bundles/morphingscripts.bundle.js"></script><!-- morphing search page js -->

<!-- Internal Prism js-->
<script src="assets/plugins/prism/prism.js"></script>

<!-- Treeview js-->
<script src="assets/plugins/treeview-prism/prism.js"></script>
<script src="assets/plugins/treeview-prism/prism-treeview.js"></script>

<!-- Perfectscroll js-->
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/p-scroll.js"></script>

<!-- Custom js-->
<script src="assets/js/custom.js"></script>
<script src="assets/js/menuspy.min.js.js"></script>

<script>
    var elm = document.querySelector('#main-menu');
    var ms = new MenuSpy(elm);

	(function () {

	if (typeof self === 'undefined' || !self.Prism || !self.document) {
		return;
	}

	/**
	 * Class name for <pre> which is activating the plugin
	 * @type {String}
	 */
	var PLUGIN_CLASS = 'line-numbers';

	/**
	 * Resizes line numbers spans according to height of line of code
	 * @param  {Element} element <pre> element
	 */
	var _resizeElement = function (element) {
		var codeStyles = getStyles(element);
		var whiteSpace = codeStyles['white-space'];

		if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
			var codeElement = element.querySelector('code');
			var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
			var lineNumberSizer = element.querySelector('.line-numbers-sizer');
			var codeLines = element.textContent.split('\n');

			if (!lineNumberSizer) {
				lineNumberSizer = document.createElement('span');
				lineNumberSizer.className = 'line-numbers-sizer';

				codeElement.appendChild(lineNumberSizer);
			}

			lineNumberSizer.style.display = 'block';

			codeLines.forEach(function (line, lineNumber) {
				lineNumberSizer.textContent = line || '\n';
				var lineSize = lineNumberSizer.getBoundingClientRect().height;
				lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
			});

			lineNumberSizer.textContent = '';
			lineNumberSizer.style.display = 'none';
		}
	};

	/**
	 * Returns style declarations for the element
	 * @param {Element} element
	 */
	var getStyles = function (element) {
		if (!element) {
			return null;
		}

		return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
	};

	window.addEventListener('resize', function () {
		Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
	});

	Prism.hooks.add('complete', function (env) {
		if (!env.code) {
			return;
		}

		// works only for <code> wrapped inside <pre> (not inline)
		var pre = env.element.parentNode;
		// Original regex check for class, leaving it here
		// for its redundancy check
		var clsReg = /\s*\bline-numbers\b\s*/;
		// New regex check for opt-out class
		var clsRegB = /\s*\bno-line-numbers\b\s*/;

		if (env.element.querySelector(".line-numbers-rows")) {
			// Abort if line numbers already exists
			return;
		}

		// Added to facilitate opting out
		if (clsRegB.test(pre.className)) {
			// Respect the opt-out
			return;
		}

		if (clsReg.test(env.element.className)) {
			// Remove the class "line-numbers" from the <code>
			env.element.className = env.element.className.replace(clsReg, ' ');
		}
		if (!clsReg.test(pre.className)) {
			// Add the class "line-numbers" to the <pre>
			pre.className += ' line-numbers';
		}

		var match = env.code.match(/\n(?!$)/g);
		var linesNum = match ? match.length + 1 : 1;
		var lineNumbersWrapper;

		var lines = new Array(linesNum + 1);
		lines = lines.join('<span></span>');

		lineNumbersWrapper = document.createElement('span');
		lineNumbersWrapper.setAttribute('aria-hidden', 'true');
		lineNumbersWrapper.className = 'line-numbers-rows';
		lineNumbersWrapper.innerHTML = lines;

		if (pre.hasAttribute('data-start')) {
			pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
		}

		env.element.appendChild(lineNumbersWrapper);

		_resizeElement(pre);
	});

}());
</script>

</body>
</html>

?>