jQuery code not working (property not a function)

Question

I want to implement this code in the fiddle on my Wordpress site (Agera template). But the code returns the error:

TypeError: Property '$' of object [object Object] is not a function

So that I changed my code to this (switch $ to jQuery):

jQuery('a[href^="#"]').click(function(){
jQuery('body').animate({
    scrollTop: jQuery(jQuery(this).attr('href')).offset().top - 30
}, 500);
});

Does not work.

I tried also that (and also changed $ to jQuery, tried both):

jQuery(document).ready(function() {
$('a[href^="#"]').click(function(){
    $('body').animate({
        scrollTop: $($(this).attr('href')).offset().top - 30
    }, 4000);
});
});

Does not work. If I try the code for the successful implementation of jQuery it works ok, as every other jQuery on the page.

What could be the problem? The html markup is correct. Thanks.

Have you included the jquery.js script? (And included it _before_ the above code?) — nnnnnn, Jul 22 '13 at 11:32
It is already included in template, how would otherwise the code to test jquery return result? — M P, Jul 22 '13 at 11:33
Where is this code that tests jQuery? How does it test it? When you say "Does not work" about the second and third versions do you mean that they give the same error as the first version, or some other problem? — nnnnnn, Jul 22 '13 at 11:35
check if you are using multiple jquery versions in same page — Tushar Gupta - curioustushar, Jul 22 '13 at 11:36
nnnnnn: that code pops up window in which it writes that the implement of jquery is successful. The second does not return error, but not working. The third the same error (object not a function), and the third no error but not working either. — M P, Jul 22 '13 at 11:45
@MP Did you read the link from my answer [jquery-uncaught-typeerror-property-of-object](http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct)? Have you solved your issue or do you have more questions? — surfmuggle, Jul 24 '13 at 18:08

Lucas Willems · Answer 1 · 2013-07-22T11:39:32.770

1

You just need to add a return false at the end of the click method like this :

$('a[href^="#"]').click(function(){
    $('body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500);
    return false;
});

and, of course, to load jQuery before... You can have a look to this fiddle : http://jsfiddle.net/WxJLx/29/

edited Jul 22 '13 at 11:39

answered Jul 22 '13 at 11:33

Lucas Willems

6,673
4
28
45

Preventing the default anchor click behaviour is a sensible idea, but it's not going to help with `TypeError: Property '$' of object [object Object] is not a function` – nnnnnn Jul 22 '13 at 11:36
The fiddle provided in the question works too. OP is saying the same code doesn't work on a Wordpress page. – nnnnnn Jul 22 '13 at 11:38
Yes, his fiddle is working but there is bugs too. @MP Did you load jQuery before the code ? – Lucas Willems Jul 22 '13 at 11:41
Lucas, I checked with the code which pop-up window and echoes text from the jquery code. Some simple code to check if the implementation is ok. And other jquery objects on the site are working.. – M P Jul 22 '13 at 11:50
Yes. But you can, not on purpose, add this code before the jquery is loaded... I think you have to check if it's the case. – Lucas Willems Jul 22 '13 at 11:52

score 0 · Answer 2 · answered Jul 22 '13 at 11:35

0

Which version of jQuery you are using if You are using older version jquery 1.4.2 like this add

jQuery.noConflict();

answered Jul 22 '13 at 11:35

Koushik Rout

179
1
4
12

You are getting TypeError: Property '$' of object [object Object] is not a function jQuery(document).ready(function($) { }); in function pass $ as argument – Koushik Rout Jul 22 '13 at 11:45
I said if you are using lower version of jQuery then use noConflict But in higher version it deprecated. – Koushik Rout Jul 22 '13 at 11:49

score 0 · Answer 3 · answered Jul 22 '13 at 11:37

0

try this:

jQuery(document).ready(function($) {
    $('a[href^="#"]').click(function(){
        $('body').animate({
            scrollTop: $($(this).attr('href')).offset().top - 30
        }, 4000);
    });  
});

answered Jul 22 '13 at 11:37

Dhaval Bharadva

3,053
2
24
35

score 0 · Answer 4 · edited May 23 '17 at 12:21

This question seems very similar to your other question.

So please tell us exactly what you want to understand

Do you want to understand how animate works? Then please see this animate example and ask for more explanations
Your code works in this demo on plnkr.co - so it is difficult to tell why it does not work for you. Please give more details why do you think that it does not work.
Do you want us to find the cause for the error TypeError: Property '$' of object [object Object] is not a function in your Wordpress site (Agera template) then it would be helpfull to have more information or even better a link to the page that does not work.

Regarding your code from point 2

I modified your code just a tiny bit:

jQuery(function($)
{       
      $('a[href^="#"]').click(function(){
          $('body').animate({
              scrollTop: $($(this).attr('href')).offset().top -20
          }, 500);
          return false;
      });    
});

As said above see the demo on plnkr.co

Regarding point 3

Regarding the error message TypeError: Property '$' of object [object Object] is not a function you encountered - these answers may be of help or even more this one mentions wordpress

Please help us help you

Sorry for asking the following questions but is difficult to help without knowing how much you know

Do you know what events are and how they work?
Have you used the chrome dev tools? They make it easy to spot errors.

@MP have you solved your issue? was the [link](http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct) to `TypeError: Property '$' of object [object Object] is not a function` helpfull? Have you any more questions - if this is the case please link to the specific page that is causing the problem? — surfmuggle, Jul 26 '13 at 13:36

jQuery code not working (property not a function)

4 Answers4

Regarding your code from point 2

Regarding point 3

Please help us help you