3

I've been working on a in a Bootply sandbox all day and encountered an issue when moving the identical code to a live server.

The sandbox is here and the affix works fine: http://www.bootply.com/wu2vXxkt5o#

On the live version I get the error and it refuses to load the elements (the three images)

TypeError: $(...).affix is not a function

http://nathan97.com is the live site.

The code in question:

/* activate sidebar */
$('#sidebar').affix({
  offset: {
    top: 235
  }
});
Devanuze
  • 83
  • 2
  • 5
  • 1
    The script of your code that calls `affix` is above the script tag for `bootstrap.js`. You're trying to call it before it exists. Same problem with the jQuery script. Your code should always be included after the dependencies. – m59 Sep 15 '15 at 00:04
  • update bootstrap.js to version 3.0 and it working [https://stackoverflow.com/a/44344544/1673050](https://stackoverflow.com/a/44344544/1673050) – Rain Jun 03 '17 at 13:47

1 Answers1

3

First move cover.js after affix.js, otherwise affix function won't be found.

Second, scripts in the head section get invoked before the body elements get rendered so $('#sidebar') will not be found. Wrap your functions in $(document).ready to invoke the code after the body is done rendering.

correct order

<script type="jquery.js"></script>
<script src="cover.js"></script>
<script src="affix.js"></script>

cover.js

$(document).ready(function() {

    $('#sidebar').affix({
      offset: {
        top: 235
      }
    });

   // ...

});
Miguel Mota
  • 20,135
  • 5
  • 45
  • 64
  • I made the corrections that you suggested but it doesn't seem to working. The document ready still makes the affix with a function doesn't exist, I'm also loading all the dependencies before the affix. My corrected version is on the website but still not working. If you could spare any time for some help it'd be appreaciated. Thanks – Devanuze Sep 15 '15 at 08:39