Javascript Issue, flexslider script not loading
Question
I recently had to rebuild a website from web archive. The client web dev disapeared.. Anyways I got everyting working again except the javascript that runs the flexslider.
go to gervee.com to see the side, if you click the arrows it does nothing. The console shows this error:
Uncaught ReferenceError: jQuery is not defined on line 12
here is the code
jQuery('.flexslider').flexslider({ animation: "slide" });yet glancing at the javascript files, it appears that there is flexslider code. However Not sure what to do next.
2 answers
solution1
0 2016-04-12 21:58:00
Try moveing that line to after the rest of your scripts and then surounding the code with
$(document).ready(function() {
// code here
});
solution2
0 2016-04-12 22:18:09
Here is what gervee.com has currently:
<script type="text/javascript"> jQuery('.flexslider').flexslider({ animation: "slide" });</script>
<script type="text/javascript"> document.cookie = 'adaptive_image=' + Math.max(screen.width, screen.height) + '; path=/'; </script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"> window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.5/jquery.min.js'>\x3C/script>") </script>
It is trying to use jQuery before it is loaded. Try changing it to this (move flexslider to after jQuery is loaded):
<script type="text/javascript"> document.cookie = 'adaptive_image=' + Math.max(screen.width, screen.height) + '; path=/'; </script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"> window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.5/jquery.min.js'>\x3C/script>") </script>
<script type="text/javascript"> jQuery('.flexslider').flexslider({ animation: "slide" });</script>
Also, I know you are just trying to get this back up and working for them, but ideally you would not want to load scripts in <head> . It would be better to reference them at the bottom of <body> and also to use $(function() { ... }) to execute any javascript on document.ready instead of inline (as LukasGuptaLeary mentioned in his answer). That makes the page load faster and helps prevent issues with things being used before they are loaded. Just felt the need to mention this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.