Custom javascript on Magento menu

Question

I'm trying to add a custom java-script file into Magento by placing the following into local.xml

<action method="addJs"><script>nav/navigation.js</script></action>

navigation.js

$sub = $('div.col-md-2.right-content');
$('div.col-md-10').on({
    mouseenter: function() {
        var i = $(this).index();
        $sub.addClass('li-'+i);
    }, mouseleave: function() {
        $sub.removeClass().addClass('col-md-2.right-content');

    }
})

style.css

li.level2.nav-2-1-1.first{
    background-color: green;
    }
li.level2.nav-2-1-2.last{
    background-color: red;
    }

The purpose of this is that whenever a user hover over a link inside my submenu, the right-content will change accordingly. The problem is that my navigation.js file is targeting objects that does not exist until after the menu is loaded. These being 'div.col-md-2.right-content' and 'div.col-md-10'.

Is there a way to load the javascript after the menu has loaded? Or is there another way to accomplish this? Or am I just approaching this completely wrong.

Dekel · Accepted Answer · 2016-10-18 20:51:27Z

1

You can use the $(function() { ... } ) syntax to have that code run only after all of your DOM is loaded:

$(function() {
    $sub = $('div.col-md-2.right-content');
    $('div.col-md-10').on({
        mouseenter: function() {
            var i = $(this).index();
            $sub.addClass('li-'+i);
        }, mouseleave: function() {
            $sub.removeClass().addClass('col-md-2.right-content');
        }
    })
})

Note that this will work only if the menu is part of your original DOM (part of the HTML code) and not created dynamically.

In case the menu is generated dynamically you can use:

$('body').on('mouseenter', 'div.col-md-10', function() { ... });

Here is a working example:

$(function() {
                    
  $sub = $('.subject');
  $('body')
  .on('mouseenter', '.yeah', function() {
    var i = $(this).index();
    $sub.addClass('li-'+i);
  })
  .on('mouseleave', '.yeah', function() {
    $sub.removeClass().addClass('subject');
  })
  
  $('.test').append($('  <ul>    <li class="yeah"><a href="#">Link 1</a></li>     <li class="yeah"><a href="#">Link 1</a></li>     <li class="yeah"><a href="#">Link 1</a></li>   </ul>'));
  
});

.li-0{
  background-color:green;
}

.li-1{
  background-color:red;
}

.li-2{
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">

</div>

<div class="subject">
  <p>hello</p>
</div>

edited Oct 18, 2016 at 20:51

answered Oct 18, 2016 at 19:42

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2963379 Over a year ago

Although I think it's a dynamic menu since Magento automatically generate that menu through its category plugin. I gave it a shot anyway. The null error is gone but the script doesn't work either.

Dekel Over a year ago

Did you check in the source that the navigation.js exists? Did it load correctly?

user2963379 Over a year ago

Yes navigation.js is loaded onto the page.

user2963379 Over a year ago

jsfiddle.net/yq3cd8dz/#&togetherjs=evcQ6fgKKE Here's an example.

user2963379 Over a year ago

I don't have a working example on my site but here's an example on another person site if that helps? Not sure if they use magento though. thisisaday.com Notice how the image in their menu changes when you hover over a link.

|

Wolfgang Leon · Accepted Answer · 2016-10-18 19:46:14Z

0

I think the problem is within the routing in local.xml

<default>
    <reference name="head">
         <action method="addItem">
            <type>skin_js</type><name>js/navigation.js</name><params/>
        </action>        
    </reference>
</default>

Where the navigation.js is in: Note (developer/template) is your template within the skin folder

 site.com/skin/frontend/developer/template/js/navigation.js

The default Tag means that it will be loaded thru the entire site.

answered Oct 18, 2016 at 19:46

Wolfgang Leon

7039 silver badges21 bronze badges

4 Comments

user2963379 Over a year ago

How would I use the default tag if i'm inside local.xml? I'm placing the action method underneath of the stock reference=head already.

Wolfgang Leon Over a year ago

That tags refers to the current Controller. default means for any controller. if you create a custom module following .... module_index_index and you wish to only use that javascript file in this controller then you would do <module_index_index><reference name="head"> .... </reference></module_index_index>

user2963379 Over a year ago

I have tried adding navigation.js inside my skin folder and loading it from there but that does not help either. AFAIK it's already under <default><reference name="head">. I can see it under the application tab when the page is loaded.

Wolfgang Leon Over a year ago

Clean Cache properly first of all. Remember local.xml gets updated when you clean your cache. Now after cleaning cache, check your console and look if there's any 404 error. If your local.xml its loading properly then it should create a link towards the javascript path, if its there then it should load it, else you have it in the wrong path. If the local.xml is not properly coded then you should have problems regarding blocks errors

Collectives™ on Stack Overflow

Custom javascript on Magento menu

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related