Uncaught ReferenceError: Modernizr is not defined

Question

i get the following error on my site: Uncaught ReferenceError: Modernizr is not defined

The code that im trying to implement is: https://codepen.io/anon/pen/JyqRpg

The JQuery code:

jQuery(document).ready(function($){
    //hide the subtle gradient layer (.pricing-list > li::after) when pricing table has been scrolled to the end (mobile version only)
    checkScrolling($('.pricing-body'));
    $(window).on('resize', function(){
        window.requestAnimationFrame(function(){checkScrolling($('.pricing-body'))});
    });
    $('.pricing-body').on('scroll', function(){ 
        var selected = $(this);
        window.requestAnimationFrame(function(){checkScrolling(selected)});
    });

    function checkScrolling(tables){
        tables.each(function(){
            var table= $(this),
                totalTableWidth = parseInt(table.children('.pricing-features').width()),
                tableViewport = parseInt(table.width());
            if( table.scrollLeft() >= totalTableWidth - tableViewport -1 ) {
                table.parent('li').addClass('is-ended');
            } else {
                table.parent('li').removeClass('is-ended');
            }
        });
    }

    //switch from monthly to annual pricing tables
    bouncy_filter($('.pricing-container'));

    function bouncy_filter(container) {
        container.each(function(){
            var pricing_table = $(this);
            var filter_list_container = pricing_table.children('.pricing-switcher'),
                filter_radios = filter_list_container.find('input[type="radio"]'),
                pricing_table_wrapper = pricing_table.find('.pricing-wrapper');

            //store pricing table items
            var table_elements = {};
            filter_radios.each(function(){
                var filter_type = $(this).val();
                table_elements[filter_type] = pricing_table_wrapper.find('li[data-type="'+filter_type+'"]');
            });

            //detect input change event
            filter_radios.on('change', function(event){
                event.preventDefault();
                //detect which radio input item was checked
                var selected_filter = $(event.target).val();

                //give higher z-index to the pricing table items selected by the radio input
                show_selected_items(table_elements[selected_filter]);

                //rotate each pricing-wrapper 
                //at the end of the animation hide the not-selected pricing tables and rotate back the .pricing-wrapper

                if( !Modernizr.cssanimations ) {
                    hide_not_selected_items(table_elements, selected_filter);
                    pricing_table_wrapper.removeClass('is-switched');
                } else {
                    pricing_table_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {        
                        hide_not_selected_items(table_elements, selected_filter);
                        pricing_table_wrapper.removeClass('is-switched');
                        //change rotation direction if .pricing-list has the .bounce-invert class
                        if(pricing_table.find('.pricing-list').hasClass('bounce-invert')) pricing_table_wrapper.toggleClass('reverse-animation');
                    });
                }
            });
        });
    }
    function show_selected_items(selected_elements) {
        selected_elements.addClass('is-selected');
    }

    function hide_not_selected_items(table_containers, filter) {
        $.each(table_containers, function(key, value){
            if ( key != filter ) {  
                $(this).removeClass('is-visible is-selected').addClass('is-hidden');

            } else {
                $(this).addClass('is-visible').removeClass('is-hidden is-selected');
            }
        });
    }
});

The page its being loaded in is: http://ws.nvanderlit.com/index.php/hosting/

Does someone know what is causing the error and how i can fix it?

Thanks in advance!

Could you show the code where you are importing modernizr? Here is an introduction to modernizr, which might help: hacks.mozilla.org/2012/07/the-web-developer-toolbox-modernizr — Schwesi
– Schwesi, Commented Sep 6, 2017 at 15:59
Are you including modernizr from a file? <script src="modernizr-custom.js"></script> just works if that is the path to the file modernizr-custom.js. — Schwesi
– Schwesi, Commented Sep 6, 2017 at 16:49
the modernizr-custum.js file is located at /webspace/httpdocs/ws.nvanderlit.com on my ftp, the same place the index.html file is located. That is right isn't it? — Patrick is nat
– Patrick is nat, Commented Sep 6, 2017 at 16:54

Schwesi · Accepted Answer · 2017-09-06 16:54:37Z

4

You are not loading modernizr correctly change <script src="modernizr-custom.js"></script> to <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>.

answered Sep 6, 2017 at 16:54

Schwesi

4,9148 gold badges43 silver badges66 bronze badges

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

4 Comments

Schwesi Over a year ago

Would you try putting the line in front of the closing </head> tag and tell me if the error persists?

Schwesi Over a year ago

Exactly like that.

Patrick is nat Over a year ago

I still get the same error, is there any chance that we did something else wrong? like placing the modernizr-custom.js file in the wrong folder

Schwesi Over a year ago

There are a lot of mistakes in your code. I am not quite sure why exactly it is not working. I created a fiddle with your code and imported modernizr into it. There are not closed tags in your code etc. so it is very hard to debug: jsfiddle.net/u7y8hv35/1

Marina ES · Accepted Answer · 2018-10-12 10:52:32Z

2

Did you try to insert this script:

<script src="modernizr-custom.js"></script>

BEFORE inserting your js files? If the Modernizr script is after, your current js file is not able to recognize it.

answered Oct 12, 2018 at 10:52

Marina ES

2702 silver badges6 bronze badges

Collectives™ on Stack Overflow

Uncaught ReferenceError: Modernizr is not defined

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related