Custom jQuery code loaded but not working 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 = $( '&lt;div class="rm-modal"&gt;&lt;div class="rm-thumb" style="background-image: url(' + img + ')"&gt;&lt;/div&gt;&lt;h5&gt;' + title + '&lt;/h5&gt;&lt;p&gt;' + description + '&lt;/p&gt;&lt;a href="' + url + '"&gt;See the recipe&lt;/a&gt;&lt;span class="rm-close-modal"&gt;x&lt;/span&gt;&lt;/div&gt;' );

            $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);
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);