185 lines
4.0 KiB
JavaScript
185 lines
4.0 KiB
JavaScript
$(".js-select2-dela").select2({
|
|
placeholder: "Select Tags",
|
|
width: 'resolve',
|
|
theme: "classic"
|
|
|
|
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
window.addEventListener('scroll', function () {
|
|
if (window.scrollY > 20) {
|
|
document.getElementById('navbar_top').classList.add('fixed-top');
|
|
// add padding top to show content behind navbar
|
|
navbar_height = document.querySelector('.navbar').offsetHeight;
|
|
document.body.style.paddingTop = navbar_height + 'px';
|
|
} else {
|
|
document.getElementById('navbar_top').classList.remove('fixed-top');
|
|
// remove padding top from body
|
|
document.body.style.paddingTop = '0';
|
|
}
|
|
});
|
|
});
|
|
|
|
function checkScroll() {
|
|
var startY = $('.navbar').height() * 0.5; //The point where the navbar changes in px
|
|
|
|
if ($(window).scrollTop() > startY) {
|
|
$('.navbar').addClass("scrolled");
|
|
} else {
|
|
$('.navbar').removeClass("scrolled");
|
|
}
|
|
}
|
|
|
|
if ($('.navbar').length > 0) {
|
|
$(window).on("scroll load resize", function () {
|
|
checkScroll();
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
|
|
window.onscroll = function () { scrollFunction() };
|
|
|
|
function scrollFunction() {
|
|
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 40) {
|
|
document.getElementById("navbar_top").style.padding = "30px 10px";
|
|
} else {
|
|
document.getElementById("navbar_top").style.padding = "20px 10px";
|
|
}
|
|
|
|
|
|
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
|
|
document.getElementById("navbar_top").style.boxShadow = "rgba(0, 0, 0, 0) 0px 10px 20px, rgba(0, 0, 0, 0.02196) 0px 6px 6px";
|
|
|
|
} else {
|
|
document.getElementById("navbar_top").style.boxShadow = "rgba(0, 0, 0, 0) 0px 10px 20px, rgba(0, 0, 0, 0.03156) 0px 6px 6px";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/** Owl Carousel */
|
|
|
|
/** Owl Carousel */
|
|
$('#clients').owlCarousel({
|
|
loop: true,
|
|
margin: 10,
|
|
nav: false,
|
|
dots: false,
|
|
autoplay: true,
|
|
autoplayTimeout: 4000,
|
|
autoplayHoverPause: false,
|
|
margin: 10,
|
|
loop: true,
|
|
responsive: {
|
|
0: {
|
|
items: 0
|
|
},
|
|
400: {
|
|
items: 2
|
|
},
|
|
600: {
|
|
items: 3
|
|
},
|
|
1000: {
|
|
items: 5
|
|
}
|
|
}
|
|
})
|
|
$('#category').owlCarousel({
|
|
loop: true,
|
|
margin: 10,
|
|
nav: false,
|
|
dots: false,
|
|
autoplay: true,
|
|
autoplayTimeout: 4000,
|
|
autoplayHoverPause: false,
|
|
margin: 30,
|
|
loop: true,
|
|
responsive: {
|
|
0: {
|
|
items: 0
|
|
},
|
|
400: {
|
|
items: 1
|
|
},
|
|
600: {
|
|
items: 1
|
|
},
|
|
1000: {
|
|
items: 3
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
$('.owl-carousel').owlCarousel({
|
|
loop: true,
|
|
margin: 10,
|
|
nav: false,
|
|
dots: false,
|
|
autoplay: true,
|
|
autoplayTimeout: 4000,
|
|
autoplayHoverPause: false,
|
|
margin: 30,
|
|
loop: true,
|
|
responsive: {
|
|
0: {
|
|
items: 0
|
|
},
|
|
400: {
|
|
items: 1
|
|
},
|
|
600: {
|
|
items: 1
|
|
},
|
|
1000: {
|
|
items: 3
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
var owl = $('#category');
|
|
owl.owlCarousel();
|
|
// Go to the next item
|
|
$('.customNextBtn').click(function () {
|
|
owl.trigger('next.owl.carousel');
|
|
})
|
|
// Go to the previous item
|
|
$('.customPrevBtn').click(function () {
|
|
// With optional speed parameter
|
|
// Parameters has to be in square bracket '[]'
|
|
owl.trigger('prev.owl.carousel', [300]);
|
|
})
|
|
|
|
|
|
|
|
// make it as accordion for smaller screens
|
|
if (window.innerWidth > 992) {
|
|
document.querySelectorAll('.navbar .nav-item').forEach(function (everyitem) {
|
|
everyitem.addEventListener('mouseover', function (e) {
|
|
let el_link = this.querySelector('a[data-bs-toggle]');
|
|
if (el_link != null) {
|
|
let nextEl = el_link.nextElementSibling;
|
|
el_link.classList.add('show');
|
|
nextEl.classList.add('show');
|
|
}
|
|
});
|
|
everyitem.addEventListener('mouseleave', function (e) {
|
|
let el_link = this.querySelector('a[data-bs-toggle]');
|
|
if (el_link != null) {
|
|
let nextEl = el_link.nextElementSibling;
|
|
el_link.classList.remove('show');
|
|
nextEl.classList.remove('show');
|
|
}
|
|
})
|
|
});
|
|
}
|
|
// end if innerWidth
|
|
// DOMContentLoaded end
|