Gowell - Travel HTML Listing 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/perfect-scrollbar/perfect-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/scripts.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;
});

<!-- Scripts js-->
<script src="../assets/js/scripts.js"></script>

// Chatpopup
	$(document).on("click", "#chat-popup", function(event) {
		event.preventDefault();
		$('.chat-message-popup').toggleClass('active');
		$('#chat-popup').removeClass('chat-popup-active');
	});

	// ChatEnd Chat
	$(document).on("click", ".popup-minimize-normal", function(event) {
		event.preventDefault();
		$('.chat-message-popup').addClass('popup-endchat');
	});

	// Go Back
	$(document).on("click", ".goback-chat", function(event) {
		event.preventDefault();
		$('.chat-message-popup').removeClass('popup-endchat');
	});

	// Chat Rating
	$(document).on("click", ".end-chat-button", function(event) {
		event.preventDefault();
		$('.chat-message-popup').addClass('rating-section-body');
		$('.chat-message-popup').removeClass('popup-endchat');
	});
	$(document).on("click", ".btn-chat-close", function(event) {
		event.preventDefault();
		$('.chat-message-popup').removeClass('card-fullscreen');
		setTimeout(function() {
			$('.chat-message-popup').removeClass('active');
		}, 500);
	});

	// Chat Minimize in fullscreen
	$(document).on("click", ".popup-minimize-fullscreen", function(event) {
		event.preventDefault();
		$('.chat-message-popup').removeClass('card-fullscreen');
		$('#chat-popup').addClass('chat-popup-active');
		setTimeout(function() {
			$('.chat-message-popup').removeClass('active');
		}, 500);
	});

	// Chat Minimize in Normal
	$(document).on("click", ".popup-minimize", function(event) {
		event.preventDefault();
		$('.chat-message-popup').removeClass('active');
		$('.chat-message-popup').removeClass('card-fullscreen');
		$('#chat-popup').addClass('chat-popup-active');
	});

How to Add Tooltip

HTML
JS

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
$('[data-bs-toggle="tooltip"]').tooltip();

How to Add Popover

HTML
JS

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

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

// ______________Popover
$('[data-bs-toggle="popover"]').popover({
	html: true
});

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