Rails Apllication elem is null in classie.js

In my Rails app, my collapsing navebar doesn't change styling while scrolling, and I also get an error in the element validation console that:

TypeError: elem is null
      elem.classList.add( c );

      

Classie.js in which the error occurs:

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

      

I change the sequence of the required library, but it doesn't help.

//= require jquery 
//= require jquery-1.11.0.js 
//= require classie.js 
//= require jquery_ujs
//= require bootstrap.js
//= require bootstrap.min.js
//= require agency.js
//= require contact_me.js
//= require cbpAnimatedHeader.js
//= require cbpAnimatedHeader.min.js
//= require jqBootstrapValidation.js

      

+3


source to share


5 answers


I also had to integrate the agency theme and also get this error. For some reason, the header variable in the cbpAnimatedHeader.js file using document.querySelector is always null. So I converted the whole script to JQuery:

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 300){
            $('.navbar-default').addClass('navbar-shrink');
        }
        else{
            $('.navbar-default').removeClass('navbar-shrink');
        }
    });
});

      



This may not directly answer your question, but it solves the problem for now.

+7


source


Had the same problem when I was using minified JS, so using just plain JS (removing minified) solved the problem for me.



Hope this helps!

+2


source


thereafter:

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 300){
            $('.navbar-default').addClass('navbar-shrink');
        }
        else{
            $('.navbar-default').removeClass('navbar-shrink');
        }
    });
});
      

Run codeHide result


enqueue script ()

 http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js
      

Run codeHide result


in the .php function.

0


source


If you are using a theme that you purchased from wrapbootstrap.com or other sites and content providers, then you need to be more concerned with how the theme is loaded and its js plugins are used.

Most themes use many javascript plugins, and in almost all cases, you will find one javascript file that loads and initializes all of those plugins.

I advise you to revisit your main js file when initializing and managing your theme.

In my theme - vitality which I bought from wrapbootstrap - the vitality.js file was the main javascript file and I notice that it didn't use the $ (document) .ready () function to initialize all other javascript. As far as I know, Rails expects a document.ready function, so all I did was replace (function ($) {with $ (document) .ready (function () {at the beginning of the file, and voila it just works like a charm Hope this helps.

0


source


Open "views> layouts> application.html.erb" Now move this code <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

after <%= yield %>

and before. </body>

It ensures that the DOM elements are loaded onto the page before JavaScript runs.

0


source







All Articles