top of page

Self Invoking Function jQuery

  • Writer: سُلَيْمَان بْن دَاوُوْد
    سُلَيْمَان بْن دَاوُوْد
  • Jan 25, 2023
  • 1 min read

The function starts with (function ($) { and you can use your own code inside it


(function ($) {
 
 
jQuery(document).ready(function () {
  jQuery(".banner .slider-wrapper").slick({
    dots: false,
    infinite: true,
    speed: 1000,
    autoplay: false,
    arrows: false,
    slidesToShow: 1,
    autoplaySpeed: 4000,
    pauseOnHover: false,
    pauseOnFocus: false,
  });
 
  jQuery(".events-slider").slick({
    dots: false,
    infinite: false,
    speed: 1000,
    autoplay: true,
    arrows: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplaySpeed: 5000,
    pauseOnHover: false,
    pauseOnFocus: false,
    responsive: [
      {
        breakpoint: 992,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  });
 
  jQuery("header .toggle").click(function () {
    jQuery("header nav").toggleClass("active");
    jQuery(".overlay-head").toggleClass("active");
    jQuery("body").toggleClass("scroll-hidden");
    jQuery(this).toggleClass("active");
  });
  jQuery(".direction .open_btn").click(function () {
    jQuery(".direction .hide").addClass("active");
  });
 
  /*jQuery(window).scroll(function () {
    if (this.scrollY > 0) {
      jQuery("header").addClass("sticky");
    } else {
      jQuery("header").removeClass("sticky");
    }
  });*/
  jQuery(".discover .pop-up-btn").click(function () {
    jQuery(".discover .video-popup").addClass("active");
    jQuery("body").addClass("scroll__hidden");
  });
 
  jQuery(".play-btn, .discover .play-button").click(function () {
    jQuery(".discover .video-cover").fadeOut();
    // jQuery(this).parents(".video-box").find("video")[1].play();
    jQuery(".hide-video video")[0].play();
  });
 
  jQuery(".close-btn").click(function () {
    jQuery(".discover .video-popup").removeClass("active");
    jQuery("body").removeClass("scroll__hidden");
  });
 
  $.fn.isInViewport = function () {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
 
    var viewportTop = $(window).scrollTop() - 300;
    var viewportBottom = viewportTop + $(window).height();
 
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };
 
  jQuery(window).on("resize scroll", function () {
    // $('.color').each(function() {
    //     var activeColor = $(this).attr('id');
    //   if ($(this).isInViewport()) {
    //     $('#fixed-' + activeColor).addClass(activeColor + '-active');
    //   } else {
    //     $('#fixed-' + activeColor).removeClass(activeColor + '-active');
    //   }
    // });
    if (jQuery(".animation-section").isInViewport()) {
      jQuery("body").addClass("bg-blue");
    } else {
      jQuery("body").removeClass("bg-blue");
    }
  });
 
  jQuery('.popup-btn').click(function(e){
    e.preventDefault()
    jQuery('.popup-box').toggleClass('active')
  })
 
  AOS.init({
    duration: 800,
    once: true,
  });
});
 
})(jQuery);


Recent Posts

See All
Google ReCAPTCHA with AJAX

This is how you can pass on AJAX .js var userdata = { 'action' : 'signin_member', 'username' : jQuery('#user_name').val(), 'password' :...

 
 
 
Smooth Scroll In JS and jQuery

jQuery(document).ready(function () { jQuery('.processreachfind').click(function(e){ e.preventDefault(); jQuery('html, body').animate({...

 
 
 

Comments


© 2020 by syednazrulhassan

bottom of page