Firebug says my global variable is null even though I use if else to check if it is

JavaScript
1

Hey all,

All the script below attempts to do is have left and right arrow to click back and forth through a scroller. And the scrolller itself is on a timer if you don’t click. Now the automated part works fine. However, when I click the arrows, they don’t work and firebug unleashes error " $active.attr(‘src’)" is null. That’s why I check if it is null and do something it is. Apparently, it doesn’t work though:


$(document).ready(function(){

	$(".paging").show();
	$(".image_reel img:first").addClass("active");
		
	var imageWidth = $(".window").width();  
	var imageSum = $(".image_reel img").size();  
	var imageReelWidth = imageWidth * imageSum;
	
	$(".image_reel").css({'width' : imageReelWidth});
	
	rotate = function(){
		if (typeof $active.attr("src") !== null) {
			var triggerId = $active.attr('src').substring(7,8);
			var image_reelPosition = (triggerId - 1) * imageWidth;
		}
		else {
			($active.attr('id') === 'rightCtr') ? $(".image_reel").animate({left: -image_reelPosition + 790}, 500) : $(".image_reel").animate({left: -image_reelPosition + -790}, 500);
		}
		
		
		$(".image_reel img").removeClass("active");
		$active.addClass("active");
		
		if ($active.attr('src') == "images/1.png"){
			$(".image_reel img").hide();
			
			$(".image_reel").animate({
				left: -image_reelPosition
			}, 500);
			
			$active.show();
			
		}
		
		$(".image_reel").animate({
			left: -image_reelPosition
		}, 500);
	};
	
	rotateSwitch = function(){
		play = setInterval(function(){
			if(!$(".image_reel img").show()) $(".image_reel img").show();
			$active = $(".image_reel img.active").parent().next().find("img");
			if ($active.length === 0){
				$active = $('.image_reel img:first');
			}
			rotate();
		}, 5000);
	};
	
	rotateSwitch();
	
	$(".paging a").click(function(){
		$active = (($(this).attr('id')=='rightCtr') ? $active.next() : $active.prev());
		clearInterval(play);
		rotate();
	});
});

Here’s the html:


		<div class="main_view">
		    <div class="window">
		        <div class="image_reel">
		            <a href="#"><img src="images/1.png" alt="" /></a>
		            <a href="#"><img src="images/2.png" alt="" /></a>
		            <a href="#"><img src="images/3.png" alt="" /></a>
		            <a href="#"><img src="images/4.png" alt="" /></a>
		        </div>
		    </div>

css:


.window {
	height:286px;	width: 790px;
	overflow: hidden; /* The mask */
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}
2

Nevermind, I figured it out:
The solution:
$(“.image_reel img.active”).parent().next().find(‘img’)

Remember, when you have a parent element, you need to include it to traverse the DOM.