JS file shows up in source code, but Javascript isn’t executing?

4 Views

I’m adding a CSS responsive, animated accordion-type portfolio to my WordPress site. My JS file shows up in the source code, but the effect still doesn’t work. For some reason, the javascript is not executing.

Here’s my JS (/inc/js/accordion.js)

Read More
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 *
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

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

      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
        };

        // transport
        if (typeof define === 'function' && define.amd) {
          // AMD
          define(classie);
        } else {
          // browser global
          window.classie = classie;
        }

      })(window);

    //fake jQuery
    var $ = function(selector) {
      return document.querySelector(selector);
    }
    var accordion = $('.accordion');





    //add event listener to all anchor tags with accordion title class
    accordion.addEventListener("click", function(e) {
      e.stopPropagation();
      e.preventDefault();
      if (e.target && e.target.nodeName == "A") {
        var classes = e.target.className.split(" ");
        if (classes) {
          for (var x = 0; x < classes.length; x++) {
            if (classes[x] == "accordionTitle") {
              var title = e.target;

              //next element sibling needs to be tested in IE8+ for 

              any crashing problems
              var content = e.target.parentNode.nextElementSibling;

              //use classie to then toggle the active class which will 

              then open and close the accordion

              classie.toggle(title, 'accordionTitleActive');
              //this is just here to allow a custom animation to treat 

              the content
              if (classie.has(content, 'accordionItemCollapsed')) {
                if (classie.has(content, 'animateOut')) {
                  classie.remove(content, 'animateOut');
                }
                classie.add(content, 'animateIn');

              } else {
                classie.remove(content, 'animateIn');
                classie.add(content, 'animateOut');
              }
              //remove or add the collapsed state
              classie.toggle(content, 'accordionItemCollapsed');




            }
          }
        }

      }
    });
//My CSS - Accordion Styling
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
 * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'Lato';
}
h1 {
  text-align: center;
}
.accordion dl {
  border: 1px solid #ddd;
}
.accordion dl:after {
  content: "";
  display: block;
  height: 1em;
  width: 100%;
  background-color: #2ba659;
}
.accordion dt > a {
  text-align: center;
  font-weight: 700;
  padding: 2em;
  display: block;
  text-decoration: none;
  color: #fff;
  -webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
  background-color: #eee;
  font-size: 1em;
  line-height: 1.5em;
}
.accordion dd > p {
  padding: 1em 2em 1em 2em;
}
.accordion {
  position: relative;
  background-color: #eee;
}
.container20 {
  max-width: 960px;
  margin: 0 auto;
  padding: 2em 0 2em 0;
}
.accordionTitle {
  background-color: #38cc70;
  border-bottom: 1px solid #30bb64;
}
.accordionTitle:before {
  content: "+";
  font-size: 1.5em;
  line-height: 0.5em;
  float: left;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
  background-color: #2ba659;
}
.accordionTitleActive {
  background-color: #2ba659;
}
.accordionTitleActive:before {
  -webkit-transform: rotate(-225deg);
  -moz-transform: rotate(-225deg);
  transform: rotate(-225deg);
}
.accordionItem {
  height: auto;
  overflow: hidden;
}
@media all {
  .accordionItem {
    max-height: 50em;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
  }
}
@media screen and (min-width: 48em) {
  .accordionItem {
    max-height: 15em;
    -moz-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
}
.accordionItemCollapsed {
  max-height: 0;
}
.animateIn {
  -webkit-animation-name: accordionIn;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: normal;
  -moz-animation-duration: 0.65s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  -webkit-animation-name: accordionIn;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
}
.animateOut {
  -webkit-animation-name: accordionOut;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: accordionOut;
  -moz-animation-duration: 0.75s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  -webkit-animation-name: accordionOut;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes accordionIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}
@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes accordionOut {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
//And My HTML
<div class="container20">
  <div class="accordion">
    <dl>
      <dt><a class="accordionTitle" href="#">First Accordion heading</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
          Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
      <dt><a href="#" class="accordionTitle">Second Accordion heading</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
          Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
      <dt><a href="#" class="accordionTitle">Third Accordion heading</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
          Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
    </dl>
  </div>
</div>

Here it is on codepen and it works fine there, but if you run the above snippet you’ll see that the accordion is missing the functionality present on codepen.

The effects aren’t working on my WordPress site, or in the above stack overflow snippet, although I have copy and pasted the code from codepen into my JS file. Since the JS file shows up in the source code of my WordPress site, I can’t figure out why it is not executing.

Could the problem be in how my JS file falls into the DOM structure? I dunno.

The html markup is the same, as is the CSS (couple of minuscule changes).

Can anyone who know’s their way around with JS help me out here?

page in question

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. Your javascript is not running because WordPress has compatibility problems with other libraries it loads. To solve it, you can take a look at this link.

    The idea behind it is that the jQuery library included with WordPress is set to the noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link (I’m quoting them directly).

    In the noConflict() mode, the global $ shortcut for jQuery is not available, so you can use:

    jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

    It’s just a matter of replacing the $ for jQuery.

    If you really, really want to use your $, you can wrap it inside the code below.

    jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});