mercredi 7 octobre 2020

Is there a way to get the jquery function to always work?

I created a website for a client which seems to glitch now and then. The menu button works sometimes and other times it does not open/activate the menu.

Can someone please assist me in finding the error. I looked through it but cannot find the problem. When it does this it only works again after refreshing the page.

$(document).ready(function() {
  // Function to change the nav-bar on scroll
  $(window).scroll(function() {
    ($(window).scrollTop() >= 100) ? (
      $('.fixed-nav-bar').addClass('scrolled'),
      $('.the-bass').addClass('scrolled')
    ) : (
      $('.fixed-nav-bar').removeClass('scrolled'),
      $('.the-bass').removeClass('scrolled')
    );
  });

  // Drop Down Function
  $('#menuButton').on('change', function() {
    ($('#menuButton').is(':checked')) 
      ? ($('.the-bass').addClass('dropped')) 
      : ($('.the-bass').removeClass('dropped'));
  });
  var feedbackSlider = $('.feedback-slider');
  feedbackSlider.owlCarousel({
    items: 1,
    nav: true,
    dots: true,
    autoplay: true,
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
    responsive: {
      // breakpoint from 767 up
      767: {
        nav: true,
        dots: false
      }
    }
  });

  feedbackSlider.on("translate.owl.carousel", function() {
    $(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
  });

  feedbackSlider.on("translated.owl.carousel", function() {
    $(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
  });
  
  feedbackSlider.on('changed.owl.carousel', function(property) {
    var current = property.item.index;
    var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
    var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
    var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
    var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
    $('.thumb-prev').find('img').attr('src', prevThumb);
    $('.thumb-next').find('img').attr('src', nextThumb);
    $('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
    $('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
  });
  
  $('.thumb-next').on('click', function() {
    feedbackSlider.trigger('next.owl.carousel', [300]);
    return false;
  });
  
  $('.thumb-prev').on('click', function() {
    feedbackSlider.trigger('prev.owl.carousel', [300]);
    return false;
  });
});

The website is https://www.dinaledifs.co.za




Aucun commentaire:

Enregistrer un commentaire