Question

I’m new to Javascript and have been attempting to use a Slider called noobSlide (mootools) but, after one success with it, have found it broken on my second attempt.

The error that I’m getting reads “Uncaught TypeError: undefined is not a function” in reference to this line of code:

var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);

I’ve included all of the necessary libraries for Mootools and the Slider scripts in the head of my pages, and have combed the HTML, but can’t find a solution. It seems to be pointing me to the Mootools library but I know that isn’t right since, as I said, I’ve already succeeded with it once using another example.

If it helps, here is the page housing all of the samples of the Slider (I’m trying to use #7 and have already used #3).

http://www.efectorelativo.net/laboratory/noobSlide/

If anyone can see where the source of the problem may be, I would really appreciate your eyes 🙂

Thanks,

Juliana

<script type="text/javascript">
    window.addEvent('domready',function(){

        //SAMPLE 7
        var startItem = 0; //or   0   or any
        var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').setOpacity(0.8);
        var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false};
        var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
        var hs7 = new noobSlide({
            box: $('box7'),
            items: [0,1,2,3,4,5,6,7],
            handles: $ES('span','thumbs_handles7'),
            fxOptions: fxOptions7,
            onWalk: function(currentItem){
                thumbsFx.start(currentItem*60-568);
            },
            startItem: startItem
        });
        hs7.walk(0);
    });

    </script>

Answer 1

why you don’t use

 $ES('span','thumbs_handles7')

as in their example?

$$('#thumbs_handles7 span')

Is this fixing the error?

Note: You need to make sure that you have all the html tags and their related ids as you defined them in the javascript code