Javascript Menu conflicts

Question

I'm converting a static website to a Joomla 3.3 template. which has 1 level dropdown box javascript menu this is the function included in my "index.html"

        $(function () {
            /**
            * for each menu element, on mouseenter,
            * we enlarge the image, and show both sdt_active span and
            * sdt_wrap span. If the element has a sub menu (sdt_box),
            * then we slide it - if the element is the last one in the menu
            * we slide it to the left, otherwise to the right
            */
            $('#sdt_menu > li').bind('mouseenter', function () {
                var $elem = $(this);
                $elem.find('img')
                     .stop(true)
                     .animate({
                         'width': '170px',
                         'height': '170px',
                         'left': '0px'
                     }, 400, 'easeOutBack')
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({ 'top': '140px' }, 500, 'easeOutBack')
                     .andSelf()
                     .find('.sdt_active')
                     .stop(true)
                     .animate({ 'height': '170px' }, 300, function () {
                         var $sub_menu = $elem.find('.sdt_box');
                         if ($sub_menu.length) {
                             var left = '170px';
                             if ($elem.parent().children().length == $elem.index() + 1)
                                 left = '-170px';
                             $sub_menu.show().animate({ 'left': left }, 200);
                         }
                     });
            }).bind('mouseleave', function () {
                var $elem = $(this);
                var $sub_menu = $elem.find('.sdt_box');
                if ($sub_menu.length)
                    $sub_menu.hide().css('left', '0px');

                $elem.find('.sdt_active')
                     .stop(true)
                     .animate({ 'height': '0px' }, 300)
                     .andSelf().find('img')
                     .stop(true)
                     .animate({
                         'width': '0px',
                         'height': '0px',
                         'left': '85px'
                     }, 400)
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({ 'top': '15px' }, 500);
            });
        });

and it uses easing.js as well as i was included in the head.

since Joomla's index is in PHP so I've included easing.js as following:

$doc->addScript('/templates/' . $this->template . '/js/easing.js', 'text/javascript');

and I've copied and pasted the function to main.js and loaded it to my index.php, but it didn't work.

so i put the script inside the index.php - it didn't work as well...

I dunno how to make it work. (I've created the menu as a custom-html module)

so what should I do ?

Answer 1

Ok one thing with Joomla is never use the $ character for jQuery without making sure it is not conflicting with mootools. Joomla has gotten better but its best to just use jQuery rather then $ in my opinion. Its far less stressful then the other ways.

Also I assume the HTML loads fine? just no Javascript? Here are some thoughts to help with that:

$(function () {

Switch this with

jQuery(document).ready(function(){

They both do the same thing in the end, though .ready is easier to see as the "onload" function and makes it less confusing later to add more to it if need be, also as stated above replacing $ with jQuery can help with mootools compatibility (along with other JS libraries in Joomla).

Also use console.log if there are no errors to track what is not happening. Is the script not loading? Try to include something like console.log('loaded'); right inside the initial function, this should tell you if it loaded the scripts. Then add them to the bind events as well to see if the mouseenter events are not being called. If it all seems to load then you can split the chain of functions up and console.log the output to see if it is what you would expect. However this is all based on at least some Javascript know how, however to give a more clear answer I will need to see the HTML for the form as well.

The rest below is my original post and assumes a normal menu module, did not see that it was custom until I got this far but I am going to leave it since it might help others.

Make sure the ID in the menu module is set correctly, inspect the menu to ensure that all id's/ classes are correct as well.

If you need a root class then be careful with suffix. It makes you think that it adds a class but it actually adds whatever to the end of the current class, so a space tricks it into adding its own class, separate from the default. This is one problem I have seen on a few websites and custom JS on the menu's. So when creating the menu module, make sure the to use

" sdt_menu"