Autolist - Classifieds, Directory, Multipurpose Listing HTML Template

How to add Sticky Header in Horizontal Menu

JS

Just Add sticky.js in your Scripts Section

    
<!-- Sticky js -->
<script src="../assets/js/sticky.js"></script>

How to Add new pscroll

Add pscroll to div as shown below For Particular div

You can Declare Both id's and classes

You can Declare Both id's and classes in place of xyz and xyz1

    
	
	

.xyz{
	max-height:300px;   //// Add Particular max-height for this  class
	height:300px;       //// Add Particular height for this  class
}
#xyz1{
	max-height:300px;   //// Add Particular max-height for this  class
	height:300px;       //// Add Particular height for this  class
}

    

<!-- Perfect-scrollbar js -->
<script src="../assets/plugins/p-scrollbar/p-scrollbar.js"></script>


/*---Scroling ---*/
//P-scroll
new PerfectScrollbar('.xyz', {
	suppressScrollX: true
});

//P-scroll
new PerfectScrollbar('#xyz1', {
	suppressScrollX: true
});

Type	URL
Plugin Link	https://plugins.jquery.com/perfect-scrollbar/

How to Add Loader

<!-- Scripts js-->
<script src="../assets/js/custom.js"></script>
// ______________ Global Loader
$(window).on("load", function(e) {
	$("#global-loader").fadeOut("slow");
})

How to Add Back To Top

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

// ______________ Back to Top
$(window).on("scroll", function(e) {
	if ($(this).scrollTop() > 0) {
		$('#back-to-top').fadeIn('slow');
	} else {
		$('#back-to-top').fadeOut('slow');
	}
});
$("#back-to-top").on("click", function(e) {
	$("html, body").animate({
		scrollTop: 0
	}, 600);
	return false;
});

Add The HTML Properties data-bs-toggle, data-bs-placement, title and Property Values to Button as shown below For the Particular button

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

// ______________Tooltip
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

How to Add Popover

HTML
JS

Add The HTML Properties data-bs-toggle, data-bs-container, data-bs-placement, title,data-bs-content and Property Values to Button as shown below For the Particular button

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

// ______________Popover
	var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
	var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
	  return new bootstrap.Popover(popoverTriggerEl)
	})

Card

HTML

Remove Card

HTML
Js

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

/
// ______________Remove Card
$(document).on('click', '[data-bs-toggle="card-remove"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.remove();
	e.preventDefault();
	return false;
});

Card Collapse

HTML
Js

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

// ______________Card Collapse
	$(document).on('click', '[data-bs-toggle="card-collapse"]', function(e) {
		let $card = $(this).closest(DIV_CARD);
		$card.toggleClass('card-collapsed');
		e.preventDefault();
		return false;
	});

Card FullScreen

HTML
Js

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

// ______________Card Fullscreen
	$(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;
	});

Font Used

Google fonts are used in the template. They are as follows: Google Fonts

All Images are used: Pexels.com