Custom javascript not working/loading correctly

Question

I am trying to add some custom javascript to my magento shop but keep getting errors like: Uncaught TypeError: Cannot read property 'on' of null. Which makes me think that maybe my file is loaded before jquery is present, or before other important files are loaded.

The way I added my js:

In app/design/frontend/rwd/brezza/layout/local.xml I added the following line:

<action method="addJs"><script>footerblocks.js</script></action>

Then in my root js folder, I added footerblocks.js which is loaded with the following content:

$('.feature-box').on('mouseover', function (event) {
 $('.feature-box').css('height', '1000px');
});
console.log('test');
var Now = new Date();
var CurrentDay = Now.getDay();
// opening time - 24 hours so 9:30am is 9, 30
var OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 11, 36);
// closing time - 24 hours so 5:30pm is 17, 30
var ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30);
var Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime())
// days 0.sun 1.mon 2.tues 3.wed 4.thur 5.fri 6.sat
// CurrentDay !== 0 && the # is the day to eclude, so if I want to be closed on Sat6, Sun0, Wed3
// CurrentDay !== 6 && CurrentDay !== 0 && CurrentDay !== 3 && Open
if (CurrentDay !== 0 && CurrentDay !== 6 && Open) {
 $('.openstatus').toggle();
}

It already gives an error before it reaches the console log.

What can be causing this? And is this the correct way to add custom JS to a magento installation?

In my footer.phtml there is the following div:

<div class="feature-box first"><span class="fa fa-truck">&nbsp;</span>
 <div class="content">
 <h3>GRATIS VERZENDEN VANAF 50ドル</h3>
 <div class="hours openstatus">We zijn bereikbaar</div>
 <div class="closed openstatus">We zijn gesloten</div>
 </div>
 </div>

Addional note:

When I remove the first part of my code the error changes into: Uncaught TypeError: Cannot read property 'toggle' of null.

So toggle and on (two jquery functions if I'm correct) are not working as they should.

• sv3n: Make sure the is an element with class feature-box.
• twan: @sv3n There is an element with that class, I added it in my question.

Answer 1

I have checked with added that script in my footer.phtml with using $j instead of $ in script its working.