I can't figure out how to add javascript to my .ss site. It's easy in a normal HTML page, but i'm confused about where everything goes in Silverstripe. For example this menu: http://www.artviper.eu/mootoolsmenu/ has a javascript file (which i've put in page.php as Requirements::javascript("mysite/javascript/mootools.js");)
It also has javascript within the HTML page itself:
<script language="javascript" type="text/javascript">
window.onload=function(){
$$('#menu a').each(function(el) {
el.addEvent('mouseenter',function(){
p = el.innerHTML.toUpperCase();
el.innerHTML = p;
el.setStyle('background','url(bg1.jpg)');
myEffect = el.effect('margin-left', {duration: 100,transition: Fx.Transitions.linear, wait: true}).start('10','30');
})
el.addEvent('mouseleave',function(){
p = el.innerHTML.toLowerCase();
el.innerHTML = p;
el.setStyle('background','url(bg.jpg)');
myEffect = el.effect('margin-left', {duration: 800,transition: Fx.Transitions.Bounce.easeOut, wait: true}).start('30','0');
})
})
myStretch = document.getElementsByClassName('toggler');
myStretcher = document.getElementsByClassName('accordion');
// setup the accordion elements by clearing display styles
myStretcher.each(function(el){
el.style.display = '';
});
var ac = new Fx.Accordion(myStretch,myStretcher,
{
onActive: function(tog){
tog.setStyle('color', '#ACDA4E');
tog.setStyle('background-color', '#1d1d1d');
tog.setStyle('cursor', 'help');
},
onBackground: function(tog){
tog.setStyle('color', '#FFF');
tog.setStyle('background-color', '#2d2d2d');
tog.setStyle('cursor', 'help');
},
alwaysHide: true,
start : 'all-closed',
height: true,
opacity : true
});
}
st = document.getElementsByClassName('toggler2');
stc = document.getElementsByClassName('accordion2');
// setup the accordion elements by clearing display styles
stc.each(function(el){
el.style.display = '';
});
var acc = new Fx.Accordion(st,stc,
{
onActive: function(tog){
tog.setStyle('color', '#ACDA4E');
tog.setStyle('background-color', '#1d1d1d');
tog.setStyle('cursor', 'help');
},
onBackground: function(tog){
tog.setStyle('color', '#FFF');
tog.setStyle('background-color', '#2d2d2d');
tog.setStyle('cursor', 'help');
},
alwaysHide: true,
start : 'all-closed',
opacity : true
});
</script>
If i put the above code in my page.ss template, the menu doesn't work and instead gives me an error... object doesn't support this property or method. Where should this code go?
Can someone please clarify this for me?
Really appreciated.