Question

I am trying to achieve scale in & scale out Onclick by using css transform property, as it suites for the responsive stuff.

I use a plugin of jquery which works fine one link mentioned below on simple html
http://techchef.co/devTest/test/

However it does’not work on the joomla website, while i am trying to use it, script shows perfectly on the site front end, i resolve all the conflict issues.but now it shows an error
Uncaught TypeError: Cannot call method ‘click’ of null

If you inspect element on the below link you will find the error.

the script use the base.js which calls perfectly on the website
http://techchef.co/clients/Suitcase/index.php/travel/featurestravel

here is the base.js file
http://techchef.co/clients/Suitcase/templates/gk_music_free/js/base.js

Kindly guide me how it start working…It already took my whole day:(((

Answer 1

The console error says that $('#new') is “not an object”. So either $ is not recognized as a jQuery object, jQuery is not loaded, or the #new element does not exist. For you, it’s the first item.

Your jQuery is using jQuery.noConflict(); in the head, so you should use jQuery in place of the dollar sign $.

Also just to be safe I suggest that you enclose your jQuery code within a document.ready

<script type="text/javascript">

jQuery(document).ready(function() { 
    jQuery('#new').click(function () {
        jQuery('#test').animate({
            scale: '+=0.33'
        }, {
            queue: false, 
            duration: 1000
        });
    });
});

</script>

This will also work…

<script type="text/javascript">

jQuery(document).ready(function($) { // pass the "$" into the function
    $('#new').click(function () {
        $('#test').animate({
            scale: '+=0.33'
        }, {
            queue: false, 
            duration: 1000
        });
    });
});

</script>

Working Demo: http://jsfiddle.net/42HNC/