Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gary Hurd
17,533 PointsWTF? Can someone help me figure out what is wrong with this jquery function?
Here is a jquery plugin for the bxslider. I am using this since the Orbit in Foundation is deprecated. This is the code from the bxslider site.
$(document).ready(function(){ $('.bxslider').bxSlider(); });
when I run it, I receive a message in the console this error - Uncaught TypeError: undefined is not a function
I have googled this, I have tried for the past 9 hours to figure out what is wrong, and I can't.
I have checked all my links to the files and they appear correct. I am not receiving any errors in the console for that.
I would appreciate any help and assistance.
Thanks Gary
6 Answers
Lukasz Gawrys
935 PointsYou included jquery.bxslider.js before jQuery was available on your site. The right order of javascript files in that case would be:
<script src="js/vendor/jquery.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script>
<script src="js/foundation/foundation.min.js"></script>
<script src="js/mycustomscript.js" type="text/javascript"></script>
<script>
$(document).foundation();
</script>
Lukasz Gawrys
935 PointsSeemingly the bxSlider has not been loaded. What do you see if you type this command in your console: $.fn.bxSlider?
Gary Hurd
17,533 Pointssorry, I get undefined.
The other was I typed n & not the $
Lukasz Gawrys
935 PointsSo, we can clearly see, that this plugin is not available on your site. ( if you go to http://bxslider.com/ and type there in console this command, you will see just the source code of the plugin).
Which version of jQuery do you use? Are you sure, that you included the bxSlider plugin after jQuery in your code? Do you have any other javascript files on this page?
Gary Hurd
17,533 PointsLukasz - this is what happens
now what?
SyntaxError: Unexpected token & message: "Unexpected token &" stack: (...) get stack: function () { [native code] } arguments: null caller: null length: 0 name: "" prototype: Object constructor: function () { [native code] } arguments: null caller: null length: 0 name: "" prototype: Object constructor: function () { [native code] } arguments: null caller: null length: 0 name: "" prototype: Object proto: function Empty() {} <function scope> proto: Object defineGetter: function defineGetter() { [native code] } defineSetter: function defineSetter() { [native code] } lookupGetter: function lookupGetter() { [native code] } lookupSetter: function lookupSetter() { [native code] } constructor: function Object() { [native code] } hasOwnProperty: function hasOwnProperty() { [native code] } isPrototypeOf: function isPrototypeOf() { [native code] } propertyIsEnumerable: function propertyIsEnumerable() { [native code] } toLocaleString: function toLocaleString() { [native code] } toString: function toString() { [native code] } valueOf: function valueOf() { [native code] } get proto: function proto() { [native code] } set proto: function proto() { [native code] } proto: function Empty() {} apply: function apply() { [native code] } arguments: null bind: function bind() { [native code] } call: function call() { [native code] } caller: null constructor: function Function() { [native code] } length: 0 name: "Empty" toString: function toString() { [native code] } proto: Object <function scope> <function scope> proto: Object defineGetter: function defineGetter() { [native code] } defineSetter: function defineSetter() { [native code] } lookupGetter: function lookupGetter() { [native code] } lookupSetter: function lookupSetter() { [native code] } constructor: function Object() { [native code] } hasOwnProperty: function hasOwnProperty() { [native code] } isPrototypeOf: function isPrototypeOf() { [native code] } propertyIsEnumerable: function propertyIsEnumerable() { [native code] } toLocaleString: function toLocaleString() { [native code] } toString: function toString() { [native code] } valueOf: function valueOf() { [native code] } get proto: function proto() { [native code] } set proto: function proto() { [native code] } proto: function Empty() {} apply: function apply() { [native code] } arguments: null bind: function bind() { [native code] } call: function call() { [native code] } caller: null constructor: function Function() { [native code] } length: 0 name: "Empty" toString: function toString() { [native code] } proto: Object <function scope> <function scope> set stack: function () { [native code] } proto: Error
Gary Hurd
17,533 PointsLukasz, this is what my index.html file looks like. I think I have all the js listed correctly.
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Gary Hurd | Front-end Developer</title>
<!-- This is the reset modernizr.--> <script src="js/vendor/modernizr.js"></script> <!-- Bx Slider Stuff --> <!-- jQuery library (served from Google) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script>
<!-- <script src="jquery.bxslider/jquery.bxslider.min.js"></script>-->
<script src="js/mycustomscript.js" type="text/javascript"></script>
<!-- Stylesheets-->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/mystyles.css" />
<link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css" />
</head> <body> <!--Top Bar Navigation--> <div class="contain-to-grid"> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">Gary Hurd</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li> </ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">test</a></li>
<li ><a href="#">test</a></li>
<li ><a href="#">test</a></li>
</ul>
</section>
</nav>
</div>
<!--Slider--> <ul class="bxslider"> <li><img src="img/cobaltemerald.jpg" /></li> <li><img src="img/foundationtrainingsystems.jpg" /></li> <li><img src="img/meseepretty.jpg" /></li> </ul>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body> </html>
Gary Hurd
17,533 PointsLukasz, I am coming to Berlin to buy you a beer!!!!!! Thank you so much. I will say that you just helped me out, now I can style the slider. Again, thank you so much.
Lukasz Gawrys
935 PointsI am happy i could help. Sure, if you would be someday in Berlin, i wouldn't mind it : ) Cheers, Lukasz