Here is my code:
(function($){ $.fn.pluginbutton = function (options) { myoptions = $.extend({ left: true }); return this.each(function () { var focus = false; if (focus === false) { this.hover(function () { this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 }); this.removeClass('VBfocus').addClass('VBHover'); }, function () { this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); this.removeClass('VBfocus').removeClass('VBHover'); }); } this.mousedown(function () { focus = true this.animate({ backgroundPosition: "0 30px" }, { duration: 0 }); this.addClass('VBfocus').removeClass('VBHover'); }, function () { focus = false; this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); this.removeClass('VBfocus').addClass('VBHover'); }); }); } }); $(document).ready(function () { $('.smallTabsHeader a').pluginbutton(); });
It gives me an error. What's wrong?
The TypeError: "x" is not a function can be fixed using the following suggestions: Paying attention to detail in code and minimizing typos. Importing the correct and relevant script libraries used in code. Making sure the called property of an object is actually a function.
This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.
In short, the "is not a function" error means that the value you're trying to invoke is not a function. The most common reasons this error occurs are: defining a variable with the same name that shadows the original object. calling a method on a value of a different type, e.g. calling the Array.
ready is not a function" error occurs for multiple reasons: Placing second set of parenthesis after the call to the ready() method. Loading the jQuery library after running your JavaScript code. Forgetting to load the jQuery library.
This problem is "best" solved by using an anonymous function to pass-in the jQuery object thusly:
The Anonymous Function Looks Like:
<script type="text/javascript"> (function($) { // You pass-in jQuery and then alias it with the $-sign // So your internal code doesn't change })(jQuery); </script>
This is JavaScript's method of implementing (poor man's) 'Dependency Injection' when used alongside things like the 'Module Pattern'.
So Your Code Would Look Like:
Of course, you might want to make some changes to your internal code now, but you get the idea.
<script type="text/javascript"> (function($) { $.fn.pluginbutton = function(options) { myoptions = $.extend({ left: true }); return this.each(function() { var focus = false; if (focus === false) { this.hover(function() { this.animate({ backgroundPosition: "0 -30px" }, { duration: 0 }); this.removeClass('VBfocus').addClass('VBHover'); }, function() { this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); this.removeClass('VBfocus').removeClass('VBHover'); }); } this.mousedown(function() { focus = true this.animate({ backgroundPosition: "0 30px" }, { duration: 0 }); this.addClass('VBfocus').removeClass('VBHover'); }, function() { focus = false; this.animate({ backgroundPosition: "0 0" }, { duration: 0 }); this.removeClass('VBfocus').addClass('VBHover'); }); }); } })(jQuery); </script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With