master_template/public/layout/assets/js/custom.js

$(".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