Jump to:

23487 Posts in 18996 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » HELP - Tell me how to add javascript

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

Page: 1
Go to End
Author Topic: 1195 Views
  • Briohny
    Avatar
    Community Member
    199 Posts

    HELP - Tell me how to add javascript Link to this post

    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.

  • UncleCheese
    Avatar
    4085 Posts

    Re: HELP - Tell me how to add javascript Link to this post

    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.

  • Briohny
    Avatar
    Community Member
    199 Posts

    Re: HELP - Tell me how to add javascript Link to this post

    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.

    1195 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.