0

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); 
  • Hello and welcome. Please define "not working". Also, have you read about Behaviors? – Mołot Oct 21 '13 at 6:22
4

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/

  • So if i understood correctly, you are saying to join two separate js files which i have now, into one js file? – risha riss Oct 20 '13 at 12:33
  • @rishariss Not exactly, you can have two files as you are already having, I am just suggesting to wrap you code inside the document.ready function and that is because to register the custom event for the DOM manipulation – Ankit Agrawal Oct 20 '13 at 12:36
  • I tried wrapping both js files as you suggested but it had no effect. :/ I also edited first post according to ur suggestion. – risha riss Oct 20 '13 at 12:39
  • Yes i did, no effect. – risha riss Oct 20 '13 at 12:45
  • One more thing: If you declare a variable without using the var keyword, that variable is automically made global. So can you once try removing var from menu variable – Ankit Agrawal Oct 20 '13 at 12:48
8

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);
  • Should be the accepted answer. – digitgopher Sep 9 '15 at 23:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.