Grow your CSS skills. Land your dream job.

Page Errors and Conditionally Loading Javascript

  • # March 10, 2013 at 4:12 pm

    Hey Everyone,

    My javascript usage on websites that I typically create is minimal, so I’m not an expert on best practices. On my portfolio site http://www.seanmichael.me, I have all of my custom javascript compiled into one file that loads on every page of the site. I noticed that when looking at the site with developer tools, on anything other than the “About” page, it is logging a bunch of errors. The reason for this is that there is some js specific to the “About” page that loads on every page. It bothers me to see these errors every time that I view the site with developer tools. So, I guess my question is this: What is best practice? Do these errors matter, and if they do, what would be the best practice for conditionally loading this js?

    Thank You,

    Sean Michael

    # March 10, 2013 at 5:59 pm

    Why not just wrap the section of your code that’s causing the errors in an if statement to check if it’s on the right page before executing? I think something like this would work, and might be the simplest way to prevent the errors:

    //Skills Animate
    if ( $(‘body’).hasClass(‘page-template-about-page-php’) ) {
    $(‘.skills ul > li’).css(‘width’,’35%’);
    $(window).scroll(function() {
    var top = $(window).scrollTop();
    var location = $(‘.skills’).offset().top;

    if (top > location – 350) {
    $(‘.skills ul li#ap’).stop().animate( { width: ‘95%’ }, 1000);
    $(‘.skills ul li#ai’).stop().animate( { width: ‘60%’ }, 1000);
    $(‘.skills ul li#ad’).stop().animate( { width: ‘40%’ }, 1000);
    $(‘.skills ul li#html5′).stop().animate( { width: ‘90%’ }, 1000);
    $(‘.skills ul li#css3′).stop().animate( { width: ‘90%’ }, 1000);
    $(‘.skills ul li#sass’).stop().animate( { width: ‘60%’ }, 1000);
    $(‘.skills ul li#js’).stop().animate( { width: ‘40%’ }, 1000);
    $(‘.skills ul li#jq’).stop().animate( { width: ‘70%’ }, 1000);
    $(‘.skills ul li#php’).stop().animate( { width: ‘50%’ }, 1000);
    $(‘.skills ul li#wp’).stop().animate( { width: ‘90%’ }, 1000);
    $(‘.skills ul li#jl’).stop().animate( { width: ‘60%’ }, 1000);
    }
    else {
    $(‘.skills ul > li’).stop().animate( { width: ‘35%’ }, 1000);
    }
    });
    }

    # March 10, 2013 at 6:16 pm

    Thanks @JoshBlackwood. Just out of curiousity though, becuase this has come up before, are these errors harmful towards performance?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".