Conditionally loading sections of js within a javascript file Wordpress

Question

Not 100% sure this is possible. I'm trying to load certain sections of jQuery within a JS file on a Wordpress site. So i have a custom.js file that controls varies jQuery functions. Is it possible to conditionally load certain parts of the file?

I know you can enqueue full js files. But i want to load parts within 1 js file.

e.g.

jQuery(document).ready(function( $ ) {

    //LOAD THIS ON ALL PAGES
    (function($) {
      $(function() {
        $('.toggle-overlay').click(function() {
          $('aside').toggleClass('open');
          $('.header-wrapper').toggleClass('open');
          $('.button-container').toggleClass('active');
        });
      });
    })(jQuery);


    //LOAD THIS ON ALL PAGES
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            $(".header-wrapper").addClass("fixed");
        } else {
            $(".header-wrapper").removeClass("fixed");
        }
    });


    //LOAD THIS ON CONTACT PAGE ONLY
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        $('.header-single-image h1, .header-single-image h2, .header-single-image a, .header-single-image .services, .header-single-image .scroll-down-link').css({'opacity':(( 500-scroll )/500)});
    }); 


    //LOAD THIS ON ALL PAGES
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });


    //LOAD THIS ON SINGLE POST PAGES ONLY
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })


    //LOAD THIS ON ABOUT PAGE ONLY
    $.each($(".cs-filter label"), function(index, value){
        var num = index + 1;
        $(value).attr("class","label"+ num);
    });

});

Or would i need to strip out the parts i want to conditionally load and conditionally load them in the footer on the relative pages?

Thanks

Brian · Accepted Answer · 2017-09-15 15:27:32Z

1

Yes, you can do conditional loading this way (assuming the location for the page is '/about'):

$(function() {
  // only execute this block if we are on the /about page
  if (window.location.pathname == '/about') {
    $.each($(".cs-filter label"), function(index, value){
    var num = index + 1;
      $(value).attr("class","label"+ num);
    });
  }
}

EDIT:

If you need to execute blocks on single post pages, you will have to use a regex. Assuming single-post pages have the url scheme: /year/month/day/title, we can use the following:

if (/(\d+\/){3}/.test(window.location.pathname)) {
  //LOAD THIS ON SINGLE POST PAGES ONLY
  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  })
}

edited Sep 15, 2017 at 15:27

answered Sep 15, 2017 at 15:18

Brian

1,9081 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditionally loading sections of js within a javascript file Wordpress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related