Uncaught Elements not found/(anonymous function)

[hj8ag]

Hi,

I'm having a problem with the script throwing up an error - I'm currently implementing it on a test site, located here.

I'm trying to check three different targets against a bunch of images that are loaded into the page in a masonry layout. The three targets are '.name logo, .rightnav, .mobilemenu mobilemenu--htx'

In my console I'm getting an error 'Uncaught Elements not found' and delving into this further I'm getting an 'anonymous function' on the line where I call the script. I've tried to just target one element, but no joy. Where am I going wrong?

My Javascript is as follows:

    <script type="text/javascript">
            $(document).ready(function() {

                var $container = $('#thumbnail-array');

                $container.imagesLoaded(function() {
                    $container.masonry({
                        itemSelector: '.video-thumbnail',
                        columnWidth: '.grid-sizer',
                        gutter: '.gutter-sizer',
                        percentPosition: true
                    });
                });

            jQuery('.mobilemenu').click(function(e) {
                jQuery(this).toggleClass('is-active');
                jQuery('.mobile-nav').toggleClass('active');

                var delay = 100;
                    $('.linkitem').each(function(i, e) {
                    setTimeout(function() {
                    $(e).toggleClass('animate');
                    }, i * delay);
                });

                if(jQuery('.mobile-nav').hasClass('active')) {
                    $('body').on('touchmove', false);
                } else  {
                    $('body').off('touchmove', false);
                }
                });

                BackgroundCheck.init({
                    targets: '.name logo, .rightnav, .mobilemenu mobilemenu--htx'
            });

            $(".fittext").fitText(1.5);
            $(".fittext2").fitText(1.3, { minFontSize: '15px', maxFontSize: '20px' });

            $('.content a').pjax();

            $('.overlay').hover(function(){
                $(this).parent().find('video').get(0).play();
                }, function() {
                    var video = $(this).parent().find('video').get(0);
                    video.pause();
                    video.currentTime = 0;
                });
            });
            $(window).bind("load", function() {
            $.getScript('js/social.js', function() {});
            });

            BackgroundCheck.refresh();
        </script>

[hj8ag]

Issue resolved - had an error in my javascript which I've fixed! For anyone wondering, I simply added

    document.addEventListener('DOMContentLoaded', function () {
                BackgroundCheck.init({
                    targets: '.name, .logo, .desktop-nav, .right-nav, .mobilemenu span, .mobilemenu span:before, .mobilemenu span:after, .mobilemenu--htx'
                });
            });

to the bottom of the script and removing the other instance I had...