https://kaznmu.in/js/scripts.js

1/* Description: Custom JS file */
2
3/* Navigation*/
4// Collapse the navbar by adding the top-nav-collapse class
5window.onscroll = function () {
6	scrollFunction();
7	scrollFunctionBTT(); // back to top button
8};
9
10window.onload = function () {
11	scrollFunction();
12};
13
14function scrollFunction() {
15	if (document.documentElement.scrollTop > 30) {
16		document.getElementById("navbarExample").classList.add("top-nav-collapse");
17	} else if ( document.documentElement.scrollTop < 30 ) {
18		document.getElementById("navbarExample").classList.remove("top-nav-collapse");
19	}
20}
21
22// Navbar on mobile
23let elements = document.querySelectorAll(".nav-link:not(.dropdown-toggle)");
24
25for (let i = 0; i < elements.length; i++) {
26	elements[i].addEventListener("click", () => {
27		document.querySelector(".offcanvas-collapse").classList.toggle("open");
28	});
29}
30
31document.querySelector(".navbar-toggler").addEventListener("click", () => {
32  	document.querySelector(".offcanvas-collapse").classList.toggle("open");
33});
34
35// Hover on desktop
36function toggleDropdown(e) {
37	const _d = e.target.closest(".dropdown");
38	let _m = document.querySelector(".dropdown-menu", _d);
39
40	setTimeout(
41		function () {
42		const shouldOpen = _d.matches(":hover");
43		_m.classList.toggle("show", shouldOpen);
44		_d.classList.toggle("show", shouldOpen);
45
46		_d.setAttribute("aria-expanded", shouldOpen);
47		},
48		e.type === "mouseleave" ? 300 : 0
49	);
50}
51
52// On hover
53const dropdownCheck = document.querySelector('.dropdown');
54
55if (dropdownCheck !== null) { 
56	document.querySelector(".dropdown").addEventListener("mouseleave", toggleDropdown);
57	document.querySelector(".dropdown").addEventListener("mouseover", toggleDropdown);
58
59	// On click
60	document.querySelector(".dropdown").addEventListener("click", (e) => {
61		const _d = e.target.closest(".dropdown");
62		let _m = document.querySelector(".dropdown-menu", _d);
63		if (_d.classList.contains("show")) {
64			_m.classList.remove("show");
65			_d.classList.remove("show");
66		} else {
67			_m.classList.add("show");
68			_d.classList.add("show");
69		}
70	});
71}
72  
73
74/* Card Slider - Swiper */
75var cardSlider = new Swiper('.card-slider', {
76	autoplay: {
77		delay: 4000,
78		disableOnInteraction: false
79	},
80	loop: true,
81	navigation: {
82		nextEl: '.swiper-button-next',
83		prevEl: '.swiper-button-prev'
84	}
85});
86
87
88/* Image Slider - Swiper */
89var imageSlider = new Swiper('.image-slider', {
90	autoplay: {
91		delay: 3000,
92		disableOnInteraction: false
93	},
94	loop: true,
95	spaceBetween: 50,
96	slidesPerView: 5,
97	breakpoints: {
98		// when window is <= 575px
99		575: {
100			slidesPerView: 1,
101			spaceBetween: 10
102		},
103		// when window is <= 767px
104		767: {
105			slidesPerView: 2,
106			spaceBetween: 20
107		},
108		// when window is <= 991px
109		991: {
110			slidesPerView: 3,
111			spaceBetween: 20
112		},
113		// when window is <= 1199px
114		1199: {
115			slidesPerView: 4,
116			spaceBetween: 20
117		},
118
119	}
120});
121
122
123/* Back To Top Button */
124// Get the button
125myButton = document.getElementById("myBtn");
126
127// When the user scrolls down 20px from the top of the document, show the button
128function scrollFunctionBTT() {
129	if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
130		myButton.style.display = "block";
131	} else {
132		myButton.style.display = "none";
133	}
134}
135
136// When the user clicks on the button, scroll to the top of the document
137function topFunction() {
138	document.body.scrollTop = 0; // for Safari
139	document.documentElement.scrollTop = 0; // for Chrome, Firefox, IE and Opera
140}