Toggle Class Add Class Conflict + Reveal Modal

Question

I'm trying to develop upon a tutorial I found at Co-drops for a menu (http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/comment-page-1/#comments). What I really like about this menu is that when you click on an item a modal appears with details for the food.

In my version I have different sections of the menu in different divs, all with the same class. (see HTML below)

<div id="rm-container1" class="rm-container">
    <div class="rm-wrapper">
        <div class="rm-left">
        <div class="rm-inner">
        <div class="rm-content">
            <dl>
            <dt><a href="#" class="rm-viewdetails" data-thumb="images/2.jpg">26. Phở Tái, Nạm, Gầu, Sách - $6.50</a></dt>
            <dd>Rice noodle soup with eye round steak, well done flank, fat brisket & tripe</dd>
            </dl>
        </div><!-- /rm-content-->
        <div class="rm-overlay"></div>
        </div><!-- /rm-inner-->
        </div><!-- /rm-right-->
        </div><!-- /rm-wrapper-->   
</div><!-- /rm-container-->

<div id="rm-container2" class="rm-container">
    ...
</div>

see Javascript below

var Menu = (function() {

    var $container = $( '#rm-container1' ),                     
        $left = $container.find( 'div.rm-cover' ),
        $middle = $container.find( 'div.rm-middle' ),
        $right = $container.find( 'div.rm-right' ),
        $open = $left.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 };

})();

I only want the modal to appear on the div that my mouse is over so I tried adding a hover + toggleClass in the initEvents, and setting var $container = $('.xyz') but that caused the modal not to work at all. I believe I need to fix the 3rd line in the javascript (var $container = $('#xyz'),) to make xyz whatever div I'm hovering over (i.e. rm-container1, rm-container2). How can I do this?

I've tried numerous solutions from related topics on this site without much luck. Does anyone happen to have any idea for how to fix this issue? Or is there a better way to achieve my ends? Any thoughts/ help is greatly appreciated :-)

Answer 1

Arrange your code as shown below and call your Menu.init(); immediately after.

jQuery(function ($) {
    var Menu = (function(){
        ...
        init: function(){}
        return {
            init: init
        };
    })();
    Menu.init();
});

Check out the JSFIDDLE

UPDATE

In your viewDetails function Change

$modal.appendTo($container); and

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

to

$modal.appendTo(recipe.parents('.rm-container')); and

recipe.parents('.rm-container').addClass('rm-in rm-nodelay');

respectively.

The issue is that there are 2 $containers. So you have to target the container specific to your recipe, hence the recipe.parents('.rm-container').

NB

The Code is rather messy and could do with some refactoring.

Update Fiddle