Custom jQuery code loaded but not working

Question

I am trying to implement some custom jquery code for a 3D menu on my Drupal 7 site. I created two .js files one with the code and other one calling it on page. I have succesfully loaded both .js files throug my theme's .info file, however nothing happens, even tho i know the js code is 100% correct and working as it should. Im also using jQuery update module set to 1.8 so that shouldn't be a problem. As i am less than a begginer regarding jquery, i ask for your help. I can't understand why is code being loaded but not working. Thanks for reading and all the answers.

(function ($) {

   var Menu = (function() {

    var $container = $( '#rm-container' ),                      
        $cover = $container.find( 'div.rm-cover' ),
        $middle = $container.find( 'div.rm-middle' ),
        $right = $container.find( 'div.rm-right' ),
        $open = $cover.find('a.rm-button-open'),
        $close = $right.find('span.rm-close'),
        $details = $container.find( 'a.rm-viewdetails' ),

        init = function() {

            initEvents();

        },
        initEvents = function() {

            $open.on( 'click', function( event ) {

                openMenu();
                return false;

            } );

            $close.on( 'click', function( event ) {

                closeMenu();
                return false;

            } );

            $details.on( 'click', function( event ) {

                $container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
                viewDetails( $( this ) );
                return false;

            } );

        },
        openMenu = function() {

            $container.addClass( 'rm-open' );

        },
        closeMenu = function() {

            $container.removeClass( 'rm-open rm-nodelay rm-in' );

        },
        viewDetails = function( recipe ) {

            var title = recipe.text(),
                img = recipe.data( 'thumb' ),
                description = recipe.parent().next().text(),
                url = recipe.attr( 'href' );

            var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );

            $modal.appendTo( $container );

            var h = $modal.outerHeight( true );
            $modal.css( 'margin-top', -h / 2 );

            setTimeout( function() {

                $container.addClass( 'rm-in rm-nodelay' );

                $modal.find( 'span.rm-close-modal' ).on( 'click', function() {

                    $container.removeClass( 'rm-in' );

                } );

            }, 0 );

        };

    return { init : init };

})();
 })(jQuery); 

And here's the content of other JS file which is calling the function.

(function ($) {

$(function() {
Menu.init();
}); 
})(jQuery); 

Answer 1

May be you to wrap your code in document.ready function as below:

// Jquery wrapper for drupal to avoid conflicts between libraries.
(function ($) {
  // Jquery onload function.
  $(document).ready(function(){
    // Your JS code.
  });
})(jQuery); 

Update: If you declare a variable without the var keyword, that variable is automatically made global. Aslo you can check more about the scope of the variable here: http://learn.jquery.com/javascript-101/scope/

Answer 2

Managing javascript in drupal

As per the above link you should put your Javascript or Jquery inside the following :

(function ($) {

  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {
   // add your code here
      });
    }
  };

})(jQuery);