SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code:
    $(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:
    Code:
    		<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:
    Code:
    .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. #2
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •