Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

HELP - Tell me how to add javascript


Reply


3 Posts   1284 Views

Avatar
Briohny

Community Member, 199 Posts

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.

Avatar
UncleCheese

Forum Moderator, 4096 Posts

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.

Avatar
Briohny

Community Member, 199 Posts

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. :)