Issue with Variable being NULL

JavaScript
1

I’m working on a fade in and out script in JS on http://www.opssystems.co.uk/

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?

Thanks

    function slideSwitch() {
        var $active = $('#slideshow a.active');
		   
        if ( $active.length == 0 ) $active = $('#slideshow  a:last');
     
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.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 ] );
     
     
        $active.addClass('last-active');
     
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
     
    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
2

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

if(!$active){
    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.

3

Not really that helpful. Anything else?

4

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 a.active’) you would use jQuery(‘#slideshow a.active’)

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

5

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++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}