Problem with adding an additional javascript to a page

Question

function slideSwitch() {
var $active = $('#slideshow DIV.active');

if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

// use this to pull the divs in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV:first');

// uncomment below to pull the divs randomly
// var $sibs  = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

I added this script to a page with additional js, it was working stand alone but now its errors in firebug, newbie, thx for any help...

$(function() {
     setInterval( "slideSwitch()", 5000 );
});

The error message is:

$ is not defined index.html()()index.html (line 126)
$(function() {

Answer 1

Have you made sure the new page is including jquery?

If so, add the code in piece by piece to narrow down where the problem is happening. Let me know what happens.

Answer 2

It looks like you're using jQuery, although you don't mention it. Did you load the jQuery library? The Prototype library also defines a $() function.

Answer 3

You are loading jquery AFTER your javascript code executes. That simply won't work. Put your javascript in an exeternal file and load it after jquery.

Answer 4

Thanks I forgot I moved it to the bottom... :)