JAVASCRIPT   39

scripts js

Guest on 29th June 2022 01:52:00 PM

  1. (function($){
  2.  
  3.     "use strict";      
  4.        
  5.     /* ---------------------------------------------------------------------------
  6.          * Sticky header
  7.          * --------------------------------------------------------------------------- */
  8.     var mfn_header_height = $('#Header').innerHeight();
  9.         function mfn_sticky(){
  10.                 if( $('body').hasClass('sticky-header') ){     
  11.                         var start_y = mfn_header_height - 17;
  12.                         var window_y = $(window).scrollTop();
  13.        
  14.                         if( window_y > start_y ){
  15.                                 if( ! ($('#Header').hasClass('is-sticky'))) {
  16.                                         $('.header_placeholder').css('margin-top', mfn_header_height);
  17.                                         $('#Header')
  18.                                                 .addClass('is-sticky')
  19.                                                 .css('top', $('#wpadminbar').innerHeight());
  20.                                 }
  21.                         }
  22.                         else {
  23.                                 if($('#Header').hasClass('is-sticky')) {
  24.                                         $('.header_placeholder').css('margin-top',0);
  25.                                         $('#Header')
  26.                                                 .removeClass('is-sticky')
  27.                                                 .css('top', 0);
  28.                                 }
  29.                         }
  30.                 }
  31.         }
  32.  
  33.        
  34.         /* ---------------------------------------------------------------------------
  35.          * $(document).ready
  36.          * --------------------------------------------------------------------------- */
  37.         $(document).ready(function(){
  38.                
  39.                 /* ---------------------------------------------------------------------------
  40.                  * Content sliders
  41.                  * --------------------------------------------------------------------------- */
  42.                 new MfnSlider();
  43.                 new MfnOfferSlider();
  44.                 new MfnPostsSlider();
  45.                 new MfnPortfolioSlider();
  46.                
  47.                
  48.                 /* ---------------------------------------------------------------------------
  49.                  * Testimonials
  50.                  * --------------------------------------------------------------------------- */
  51.                 $("ul.testimonials-slider").owlCarousel({
  52.                         autoPlay                        : 6000,
  53.                         goToFirst                       : true,
  54.                         stopOnHover                     : true,
  55.                         items                           : 1,
  56.                         itemsDesktop            : false,
  57.                         itemsDesktopSmall       : false,
  58.                         itemsTablet                     : false,
  59.                         itemsMobile                     : false,
  60.                 });
  61.                
  62.                
  63.                 /* ---------------------------------------------------------------------------
  64.                  * WP Gallery
  65.                  * --------------------------------------------------------------------------- */
  66.                 $('.gallery-icon').addClass('hover-mask')
  67.                         .children('a')
  68.                                 .attr('rel', 'prettyPhoto[gallery]')
  69.                                 .append('<span class="ico"><i class="fa fa-eye"></i></span>')
  70.                                 .children('img' )
  71.                                         .css('height', 'auto')
  72.                                         .css('width', '100%');
  73.                
  74.                
  75.                 /* ---------------------------------------------------------------------------
  76.                  * PrettyPhoto
  77.                  * --------------------------------------------------------------------------- */
  78.                 if( $(window).width() >= 768 ){
  79.                         $('a[data-gal^="prettyPhoto"], .prettyphoto').prettyPhoto({
  80.                                 show_title              : false,
  81.                                 deeplinking             : false,
  82.                                 social_tools    : false
  83.                         });
  84.                 }
  85.                                
  86.        
  87.                 /* ---------------------------------------------------------------------------
  88.                  * Add classes first/last
  89.                  * --------------------------------------------------------------------------- */
  90.                 $(".Recent_comments li:last-child, .Recent_posts li:last-child, .Twitter li:last-child, #Footer .container .column:last-child, .pricing-box .plan-inside ul li:last-child").addClass("last");
  91.                 $(".commentlist li li .comment-body:last-child").addClass("last");
  92.                 $(".commentlist li .comment-body:last-child").addClass("lastBorder");
  93.                 $(".widget ul.menu li:last-child, .widget_links ul li:last-child, .widget_meta ul li:last-child").addClass("last");
  94.        
  95.                 // portfolio / blog  -------------------------------------
  96.                 $('.portfolio_item.one-second:nth-child(2n+3), .post.one-second:nth-child(2n+3)').css("clear", "both");
  97.                 $('.portfolio_item.one-third:nth-child(3n+4),  .post.one-third:nth-child(3n+4)' ).css("clear", "both");
  98.                 $('.portfolio_item.one-fourth:nth-child(4n+5), .post.one-fourth:nth-child(4n+5)').css("clear", "both");
  99.                
  100.                
  101.                 /* ---------------------------------------------------------------------------
  102.                  * Responsive menu
  103.                  * --------------------------------------------------------------------------- */
  104.                 $('.responsive-menu-toggle').click(function(e){
  105.                         e.preventDefault();
  106.                         $(this).toggleClass('active');
  107.                         $('#Header #menu').stop(true,true).slideToggle(200);
  108.                 });
  109.                
  110.                
  111.                 /* ---------------------------------------------------------------------------
  112.                  * Main menu
  113.                  * --------------------------------------------------------------------------- */
  114.                
  115.                 // Muffin Menu -------------------------------
  116.                 $("#Header #menu > ul").muffingroup_menu({
  117.                         arrows  : true
  118.                 });
  119.                
  120.                 mfn_sticky();
  121.  
  122.                
  123.                 /* ---------------------------------------------------------------------------
  124.                  * Header search
  125.                  * --------------------------------------------------------------------------- */
  126.                 $("#Header #searchform .ico").click(function(e){
  127.                         e.preventDefault();
  128.                         $('#searchform').submit();
  129.                 });
  130.  
  131.                
  132.                 /* ---------------------------------------------------------------------------
  133.                  * Header icons expand
  134.                  * --------------------------------------------------------------------------- */
  135.                 $("#Header .addons .expand").click(function(){
  136.                         $(this).toggleClass('focus');
  137.                 });
  138.  
  139.                
  140.                 /* ---------------------------------------------------------------------------
  141.                  * IE fixes
  142.                  * --------------------------------------------------------------------------- */
  143.                 if ( $.browser.msie || !!navigator.userAgent.match(/Trident\/7\./) ) {
  144.                         $("body").addClass("browser-ie");
  145.                 }
  146.        
  147.                
  148.                 /* ---------------------------------------------------------------------------
  149.                  * Tabs
  150.                  * --------------------------------------------------------------------------- */
  151. //              $(".jq-tabs").tabs();
  152.  
  153.                
  154.                 /* ---------------------------------------------------------------------- */
  155.             /*  Contact Form
  156.             /* ---------------------------------------------------------------------- */
  157.  
  158.             var submitContact = $('#submit_contact'),
  159.                 message = $('#msg');
  160.  
  161.             submitContact.on('click', function(e){
  162.                 e.preventDefault();
  163.  
  164.                 var $this = $(this);
  165.                
  166.                 $.ajax({
  167.                     type: "POST",
  168.                     url: 'contact.php',
  169.                     dataType: 'json',
  170.                     cache: false,
  171.                     data: $('#contact-form').serialize(),
  172.                     success: function(data) {
  173.  
  174.                         if(data.info !== 'error'){
  175.                             $this.parents('form').find('input[type=text],textarea,select').filter(':visible').val('');
  176.                             message.hide().removeClass('success').removeClass('error').addClass('success').html(data.msg).fadeIn('slow').delay(5000).fadeOut('slow');
  177.                         } else {
  178.                             message.hide().removeClass('success').removeClass('error').addClass('error').html(data.msg).fadeIn('slow').delay(5000).fadeOut('slow');
  179.                         }
  180.                     }
  181.                 });
  182.             });
  183.                
  184.                 /* ---------------------------------------------------------------------------
  185.                  * Anchor Fix for Sticky header + Smooth scroll
  186.                  * --------------------------------------------------------------------------- */
  187.                 var hash = window.location.hash;
  188.                 if( hash && $(hash).length ){  
  189.                        
  190.                         var stickyH = $('#Header.is-sticky').innerHeight();
  191.                         var tabsHeaderH = $(hash).siblings('.ui-tabs-nav').innerHeight();
  192.                        
  193.                         $('html, body').animate({
  194.                                 scrollTop: $(hash).offset().top - stickyH - tabsHeaderH
  195.                         }, 500);
  196.                 }
  197.  
  198.                 $('#menu li.scroll > a, a.scroll').click(function(){
  199.                         var url = $(this).attr('href');
  200.                         var hash = '#' + url.split('#')[1];
  201.                        
  202.                         var stickyH = $('#Header.is-sticky').innerHeight();
  203.                         var tabsHeaderH = $(hash).siblings('.ui-tabs-nav').innerHeight();
  204.                        
  205.                         if( hash && $(hash).length ){
  206.                                 $('html, body').animate({
  207.                                         scrollTop: $(hash).offset().top - stickyH - tabsHeaderH
  208.                                 }, 500);
  209.                         }
  210.                 });
  211.                
  212.                
  213.                 /* ---------------------------------------------------------------------------
  214.                  * Muffin Accordion & FAQ
  215.                  * --------------------------------------------------------------------------- */
  216.                 $(".mfn-acc.open1st .question:first")
  217.                         .addClass("active")
  218.                         .children(".answer")
  219.                                 .show();
  220.                
  221.                 $(".mfn-acc .question > h5").append('<span class="icon"></span>');
  222.                 $(".mfn-acc .question > h5").click(function(){
  223.                         if($(this).parent().hasClass("active")) {
  224.                                 $(this).parent().removeClass("active").children(".answer").slideToggle(200);
  225.                         }
  226.                         else
  227.                         {
  228.                                 $(this).parents(".mfn-acc").children().each(function() {
  229.                                         if($(this).hasClass("active")) {
  230.                                                 $(this).removeClass("active").children(".answer").slideToggle(200);
  231.                                         }
  232.                                 });
  233.                                 $(this).parent().addClass("active");
  234.                                 $(this).next(".answer").slideToggle(200);
  235.                         }
  236.                 });
  237.                
  238.                
  239.                 /* ---------------------------------------------------------------------------
  240.                  * Skills
  241.                  * --------------------------------------------------------------------------- */
  242.                 $('.bars_list').waypoint({
  243.                         offset          : '100%',
  244.                         triggerOnce     : true,
  245.                         handler         : function(){
  246.                                 $(this).addClass('hover');
  247.                         }
  248.                 });
  249.                        
  250.                
  251.                 /* ---------------------------------------------------------------------------
  252.                  * Quick Fact
  253.                  * --------------------------------------------------------------------------- */
  254.                 $('.animate-math .number').waypoint({
  255.                         offset          : '100%',
  256.                         triggerOnce     : true,
  257.                         handler         : function(){
  258.                                 var el                  = $(this);
  259.                                 var duration    = Math.floor((Math.random()*1000)+1000);
  260.                                 var to                  = el.attr('data-to');
  261.  
  262.                                 $({property:0}).animate({property:to}, {
  263.                                         duration        : duration,
  264.                                         easing          :'linear',
  265.                                         step            : function() {
  266.                                                 el.text(Math.floor(this.property));
  267.                                         },
  268.                                         complete        : function() {
  269.                                                 el.text(this.property);
  270.                                         }
  271.                                 });
  272.                         }
  273.                 });
  274.                
  275.                
  276.                 /* ---------------------------------------------------------------------------
  277.                  * Animations
  278.                  * --------------------------------------------------------------------------- */
  279.                 $('[data-animation]').waypoint({
  280.                         offset          : '100%',
  281.                         triggerOnce     : true,
  282.                         handler         : function(){
  283.                                 $(this).addClass('animated ' + $(this).attr('data-animation'));
  284.                         }
  285.                 });
  286.                
  287.                
  288.                 /* ---------------------------------------------------------------------------
  289.                  * Go to top
  290.                  * --------------------------------------------------------------------------- */      
  291.                 $('#back_to_top').click(function(){
  292.                         $('body,html').animate({
  293.                                 scrollTop: 0
  294.                         }, 500);
  295.                         return false;
  296.                 });
  297.                
  298.                
  299.                 /* ---------------------------------------------------------------------------
  300.                  * Iframe height
  301.                  * --------------------------------------------------------------------------- */              
  302.                 function iframeHeight( item, ratio ){
  303.                         var itemW = item.width();
  304.                         var itemH = itemW * ratio;
  305.                         if( itemH < 147 ) itemH = 147;
  306.                         item.height(itemH);
  307.                 }
  308.                
  309.                 function iframesHeight(){
  310.                         iframeHeight($(".posts_wrapper .post_photo iframe"),0.60);                      // blog - list
  311.                         iframeHeight($(".post_header .post_photo iframe"),0.38);                        // blog - single
  312.                         iframeHeight($(".single-portfolio .portfolio_photo iframe"),0.66);      // portfolio - single
  313.                         iframeHeight($(".offer_wrapper .image iframe"),0.56);                           // offer - item
  314.                 }
  315.                 iframesHeight();
  316.                
  317.  
  318.                 /* ---------------------------------------------------------------------------
  319.                  * Portfolio - Isotope
  320.                  * --------------------------------------------------------------------------- */
  321.                 function mfnIsotope(domEl,isoWrapper){
  322.                         var filter = domEl.attr('data-rel');
  323.                         isoWrapper.isotope({ filter: filter });
  324.                        
  325.                         domEl.parents('ul').find('li.current-cat').removeClass('current-cat');
  326.                         domEl.parent().addClass('current-cat');
  327.                 }
  328.                
  329.                 $('.portfolio-isotope .categories a').click(function(e){
  330.                         e.preventDefault();
  331.                         mfnIsotope($(this),$('.portfolio-isotope .Projects_inside_wrapper'));
  332.                 });
  333.                
  334.                 $('#Projects .categories a').click(function(e){
  335.                         e.preventDefault();
  336.                         mfnIsotope($(this),$('#Projects .Projects_inside_wrapper'));
  337.                 });
  338.                
  339.                
  340.                 /* ---------------------------------------------------------------------------
  341.                  * Debouncedresize
  342.                  * --------------------------------------------------------------------------- */
  343.                 $(window).bind("debouncedresize", function() {
  344.                         iframesHeight();
  345.                 });
  346.                
  347.         });
  348.  
  349.         /* ---------------------------------------------------------------------------
  350.          * $(window).load
  351.          * --------------------------------------------------------------------------- */
  352.         $(window).load(function(){
  353.                
  354.                 /* ---------------------------------------------------------------------------
  355.                  * isotope
  356.                  * --------------------------------------------------------------------------- */
  357.                 $('.portfolio-isotope .Projects_inside_wrapper').isotope({
  358.                         itemSelector: '.column',
  359.                         layoutMode: 'fitRows'
  360.                 });
  361.                 $('#Projects .Projects_inside_wrapper').isotope({
  362.                         itemSelector: '.column',
  363.                         layoutMode: 'fitRows'
  364.                 });
  365.                
  366.         });
  367.        
  368.        
  369.         /* ---------------------------------------------------------------------------
  370.          * $(window).scroll
  371.          * --------------------------------------------------------------------------- */
  372.         $(window).scroll(function(){
  373.                 mfn_sticky();
  374.     });
  375.        
  376.        
  377.         /* ---------------------------------------------------------------------------
  378.          * $(document).mouseup
  379.          * --------------------------------------------------------------------------- */
  380.         $(document).mouseup(function(e){
  381.                 if ($("#Header .addons .expand").has(e.target).length === 0){
  382.                         $("#Header .addons .expand").removeClass('focus');
  383.                 }
  384.                 if ($("#searchform").has(e.target).length === 0){
  385.                         $("#searchform").removeClass('focus');
  386.                 }
  387.         });
  388.        
  389.        
  390.         /* ---------------------------------------------------------------------------
  391.          * Sliders configuration
  392.          * --------------------------------------------------------------------------- */
  393.        
  394.         // --- MfnSlider ---------------------------------------------------------     
  395.         function MfnSlider(){
  396. //              var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints || $(document).width() <= 767;      
  397.                 var mfn_slider = window.mfn_slider_vertical;
  398.                
  399.                 mfn_slider.speed                                = 700;
  400.                 mfn_slider.loop                                 = true;
  401.                 mfn_slider.pagination                   = '.swiper-controls';
  402.                 mfn_slider.paginationClickable  = true;
  403. //              mfn_slider.mode                                 = supportsTouch ? 'horizontal' : 'vertical';
  404.                        
  405.                 var mfnSlider = new Swiper('.swiper-container',mfn_slider);
  406.                
  407.                 $('.swiper-prev').click(function(e){
  408.                         e.preventDefault();
  409.                         mfnSlider.swipePrev();
  410.                 });
  411.                 $('.swiper-next').click(function(e){
  412.                         e.preventDefault();
  413.                         mfnSlider.swipeNext();
  414.                 });
  415.                
  416.                 $('#configurator .text-select a').click(function(){
  417.                         mfnSlider.resizeFix();
  418.                 });
  419.         }
  420.        
  421.        
  422.         // --- MfnOfferSlider ---------------------------------------------------------
  423.         function MfnOfferSliderPager(slider){
  424.                
  425.                 // wrap -----------------------
  426.                 slider.find('.owl-pagination').wrap('<div class="owl-controls-inner"><div class="owl-pagination-wrapper"></div></div>');
  427.  
  428.                 // pager - arrow --------------
  429.                 var pager = slider.find('.owl-controls .owl-page');
  430.                 var itemH = slider.find('.owl-page').height();
  431.                 var count = pager.length;
  432.                 var visible = count < 5 ? count : 4;
  433.                 var firstVisible = 1;
  434.                 var lastVisible = visible;
  435.                
  436.                 if( count > 4 ){
  437.                         // arrows -----------------
  438.                         slider.find('.owl-controls').append('<a class="owl-pagination-arrow owl-arrow-prev" href="#"></a><a class="owl-pagination-arrow owl-arrow-next" href="#"></a>');
  439.                        
  440.                         // arrow click prev -------
  441.                         slider.find('.owl-arrow-prev').click(function(e){
  442.                                 e.preventDefault();
  443.                                 if( firstVisible > 1 ){
  444.                                         firstVisible--;
  445.                                         lastVisible--;
  446.                                         slider.find('.owl-pagination').css('top', - ( (firstVisible-1) * itemH - 5));
  447.                                 }
  448.                         });
  449.                        
  450.                         // arrow click next -------
  451.                         slider.find('.owl-arrow-next').click(function(e){
  452.                                 e.preventDefault();
  453.                                 if( lastVisible < count ){
  454.                                         firstVisible++;
  455.                                         lastVisible++;
  456.                                         slider.find('.owl-pagination').css('top', - ( (firstVisible-1) * itemH - 5));
  457.                                 }
  458.                         });
  459.                 }
  460.         }
  461.        
  462.         // pager - thumbnails
  463.         function MfnOfferSliderPagerThumbs(slider){
  464.                 var pager = slider.find('.owl-controls .owl-page');
  465.                 pager.each(function( index ) {
  466.                         var thumbnail = slider.find('.owl-item:eq('+index+') .thumbnail img').clone(true,true);
  467.                         $(this).children('span').html(thumbnail);
  468.                 });
  469.         }
  470.        
  471.         function MfnOfferSlider(){
  472.                 $("ul.offer-slider").owlCarousel({
  473.                         items                           : 1,
  474.                         itemsDesktop            : false,
  475.                         itemsDesktopSmall       : false,
  476.                         itemsTablet                     : false,
  477.                         itemsMobile                     : false,
  478.                         afterInit                       : MfnOfferSliderPager,
  479.                         afterAction                     : MfnOfferSliderPagerThumbs
  480.                 });                    
  481.         }
  482.        
  483.        
  484.         // --- MfnPostsSlider ---------------------------------------------------------
  485.         function MfnPostsSlider(){             
  486.                 $("ul.posts-slider").owlCarousel({
  487.                         autoPlay                        : false,
  488.                         goToFirst                       : true,
  489.                         navigation                      : true,
  490.                         pagination                      : false,
  491.                         stopOnHover                     : true,
  492.                         items                           : 1,
  493.                         itemsDesktop            : false,
  494.                         itemsDesktopSmall       : false,
  495.                         itemsTablet                     : false,
  496.                         itemsMobile                     : false
  497.                 });
  498.         }
  499.        
  500.         // --- MfnPortfolioSlider ---------------------------------------------------------
  501.         function MfnPortfolioSlider(){         
  502.                 $("ul.recent-works-slider").owlCarousel({
  503.                         autoPlay                        : false,
  504.                         goToFirst                       : true,
  505.                         navigation                      : true,
  506.                         navigationText          : ["<",">"],
  507.                         pagination                      : false,
  508.                         stopOnHover                     : true,
  509.                         items                           : 3,
  510.                         itemsDesktop            : false,
  511.                         itemsDesktopSmall       : false,
  512.                         itemsTablet                     : false,
  513.                         itemsMobile                     : [767,1]
  514.                 });
  515.         }
  516.  
  517. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.