Issue with Variable being NULL

I’m working on a fade in and out script in JS on

Currently in the script below the $active keeps returning null and i’m unsure why as I am matching on the class active.

Any tips?


    function slideSwitch() {
        var $active = $('#slideshow');
        if ( $active.length == 0 ) $active = $('#slideshow  a:last');
        // use this to pull the images in the order they appear in the markup
        var $next =  $ ? $
            : $('#slideshow a:first');
        // uncomment the 3 lines below to pull the images in random order
        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );
        $next.css({opacity: 0.0})
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
    $(function() {
        setInterval( "slideSwitch()", 5000 );

For lack of something much more clever, I’d probably test $active for NULL, right after you assign it a value:

    alert('We have a problem!');

Or mess around with:

if (typeof $active != ‘undefined’){
    alert('So far, so good!');

As long as you don’t get NULL or UNDEFINED results, just keep going and check $active throughout the code.

This might not be the best or easiest solution, but it will help you pin-point where things are falling apart.

Not really that helpful. Anything else?

It appears to be the prototype library that’s conflicting there.
Why are two libraries being used? Never mind.

You can remove the conflict by using jQuery.noConflict and then replace the jQuery $ expressions with jQuery instead.
So, instead of $(‘#slideshow’) you would use jQuery(‘#slideshow’)

Although, it would be better to find some way of using only the one code library on the page.

It looks like “some other code” is overwriting the $ function, which is expected to be the jQuery one instead.

Here’s that “other” $ function

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
    return elements;
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);