Hi all,
I'm not (yet) a guru but I wanted the same to follow this video tutorial (http://www.youtube.com/watch?v=pApWmvSDGdI) for installing a nice "backtotop" button for some of long pages on my website.
Now, I'm a bit confused with the number of jQuery lib files loaded by D7 and I think that I'm using some twice (hope no more).
In the video above, jquery-1.7.1.min.js is used and I've put a copy in my js theme folder and adding js file by adding this in theme.info file:
scripts[] = js/jquery-1.7.1.min.js
scripts[] = js/backtotop.jquery.js // my plugin-in
...
and in page body where needed:
<div id="backtotop">
<div>Back to top</div>
</div>
<script>
$('#backtotop').backtotop({
});
</script>Now, D7 core also include right now jQuery min 1.7 (sites/all/modules/jquery_update/replace/jquery/1.7/jquery.min.js).
But trying to remove:
scripts[] = js/jquery-1.7.1.min.js
button do not works anymore and I get in console (chrome):
Uncaught TypeError: Property '$' of object [object Window] is not a function
What's wrong?
ls
Comments
I have a feeling the problem
I have a feeling the problem is because Drupal hasn't loaded jQuery by the time your code is fired. If that's the case, you need to use behaviours. http://drupal.org/node/756722#behaviors
So create a file called scripts.js, add it to your .info file (
scripts[] = js/scripts.js) and add the below in scripts.js:(function ($) {
Drupal.behaviors.backToTop= {
attach: function (context, settings) {
$('#backtotop').backtotop({
});
}
};
})(jQuery);
that's right!!!one more step
that's right!!!
one more step forward into drupal understanding ;)
Thank you