21309 Posts in 5738 Topics by 2603 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1023 Views |
-
HELP - Tell me how to add javascript
3 April 2009 at 6:49am
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.
-
Re: HELP - Tell me how to add javascript
3 April 2009 at 9:13am
You never need to put that much javascript into your HTML. Put it in a separate js file and include below mootools in your requirements.
The template parser is looking at that code and trying to render SS content and hitting errors because it's full of $'s and (), etc. Avoid JS in your document at all costs.
-
Re: HELP - Tell me how to add javascript
3 April 2009 at 9:50am
Thanks UncleCheese. It's working perfectly in firefox but not IE. Any ideas? Menu is displaying but javascript is not working. Same error: Object doesn't support this property or method.
Appreciate your help as always.
| 1023 Views | ||
|
Page:
1
|
Go to Top |
