www.webdeveloper.com
Results 1 to 6 of 6

Thread: jQuery issue with adding & removing classes w/special effects

  1. #1
    Join Date
    Dec 2007
    Posts
    40

    jQuery issue with adding & removing classes w/special effects

    I am attempting to customize a jQuery script to suit my needs here. Here is the original demo & source code. As you can see, the original version uses thumbnail images. I would like to simply change that to a text link. Also, just to note that I am using "no conflict" which changes all of the calls from $ to $j.

    The thumbnail image requires a class "nav-thumb" added to it in order for it to work, so I have simply added this class to the link. That seems to work okay, except as the slideshow scrolls through it does not remove the class from the previous panel, so by the end all 5 of my buttons have the "active-thumb" class added to them when there should only be one at any given time. You also cannot just click on any of the links and have that one append the "active-thumb" class.

    I'm pretty sure if anything needs to be changed, it's the function call. Here's what I have:

    Code:
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/thickbox.js"></script>
    <script type="text/javascript" src="assets/js/jquery-easing-1.3.js"></script>
    <script type="text/javascript" src="assets/js/jquery-easing-compatibility.1.2.js"></script>
    <script type="text/javascript" src="assets/js/coda-slider.1.1.1.js"></script>
    	<script type="text/javascript">
    		var $j = jQuery.noConflict();
    		var theInt = null;
    		var $crosslink, $navthumb;
    		var curclicked = 0;
    		
    		theInterval = function(cur){
    			clearInterval(theInt);
    			
    			if( typeof cur != 'undefined' )
    				curclicked = cur;
    			
    			$crosslink.removeClass("active-thumb");
    			$navthumb.eq(curclicked).parent().addClass("active-thumb");
    				$j(".stripNav ul li a").eq(curclicked).trigger('click');
    			
    			theInt = setInterval(function(){
    				$crosslink.removeClass("active-thumb");
    				$navthumb.eq(curclicked).parent().addClass("active-thumb");
    				$j(".stripNav ul li a").eq(curclicked).trigger('click');
    				curclicked++;
    				if( 6 == curclicked )
    					curclicked = 0;
    				
    			}, 3000);
    		};
    		
    		$j(function(){
    			
    			$j("#main-photo-slider").codaSlider();
    			
    			$navthumb = $j(".nav-thumb");
    			$crosslink = $j(".cross-link");
    			
    			$navthumb
    			.click(function() {
    				var $this = $j(this);
    				theInterval($this.parent().attr('href').slice(1) - 1);
    				return false;
    			});
    			
    			theInterval();
    		});
    	</script>
    And here's my panel code:

    Code:
    <div id="page-wrap"><!--page-wrap-->
    											
    	<div class="slider-wrap"><!--slider-wrap-->
    		<div id="main-photo-slider" class="csw">
    			<div class="panelContainer">
    
    				<div class="panel" title="Panel 1">
    					<div class="wrapper">
    						<img src="assets/images/billboard/01.jpg" alt="temp" />
    						<div class="photo-meta-data">
    							Cornerstone at Summerport<br>
    							<span>Windemere, FL</span>
    						</div>
    					</div>
    				</div>
    				<div class="panel" title="Panel 2">
    					<div class="wrapper">
    						<img src="assets/images/billboard/01.jpg" alt="temp" />
    						<div class="photo-meta-data">
    							Cornerstone at Summerport<br>
    							<span>Windemere, FL</span>
    						</div>
    					</div>
    				</div>		
    				<div class="panel" title="Panel 3">
    					<div class="wrapper">
    						
    						<img src="assets/images/billboard/01.jpg" alt="temp" />
    						<div class="photo-meta-data">
    							Cornerstone at Summerport<br>
    							<span>Windemere, FL</span>
    						</div>
    					</div>
    				</div>
    				<div class="panel" title="Panel 4">
    					<div class="wrapper">
    						<img src="assets/images/billboard/01.jpg" alt="temp" />
    						<div class="photo-meta-data">
    							Cornerstone at Summerport<br>
    							<span>Windemere, FL</span>
    						</div>
    					</div>
    				</div>
    				<div class="panel" title="Panel 5">
    					<div class="wrapper">
    						<img src="assets/images/billboard/01.jpg" alt="temp" />
    						<div class="photo-meta-data">
    							Cornerstone at Summerport<br>
    							<span>Windemere, FL</span>
    						</div>
    					</div>
    				</div>
    
    			</div>
    		</div>
    
    		
    		<div id="movers-row">
                            <div><a href="#1" class="cross-link active-thumb nav-thumb">1</a></div>
    			<div><a href="#2" class="cross-link nav-thumb">2</a></div>
    			<div><a href="#3" class="cross-link nav-thumb">3</a></div>
    			<div><a href="#4" class="cross-link nav-thumb">4</a></div>
    			<div><a href="#5" class="cross-link nav-thumb">5</a></div>
    		</div>
    
    	</div><!--slider-wrap-->
    	
    	</div><!--page-wrap-->
    Any help would be much obliged!

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    This looks suspicious:
    Code:
    $crosslink.removeClass("active-thumb");
    			$navthumb.eq(curclicked).parent().addClass("active-thumb");
    Should the second instance be the non-active state?

  3. #3
    Join Date
    Dec 2007
    Posts
    40
    That's what I thought, too, KDLA. When I change them, it will remove the class, but then it won't add them to the next panel which is active.

  4. #4
    Join Date
    Dec 2007
    Posts
    40
    Original code from author:
    Code:
    			$crosslink.removeClass("active-thumb");
    			$navthumb.eq(curclicked).parent().addClass("active-thumb");
    				$j(".stripNav ul li a").eq(curclicked).trigger('click');
    			
    			theInt = setInterval(function(){
    				$crosslink.removeClass("active-thumb");
    				$navthumb.eq(curclicked).parent().addClass("active-thumb");
    Let me know if you think I should try any other combination.



    No change to aforementioned problem, all links eventually have the active-thumb class applied:
    Code:
    			$crosslink.removeClass("active-thumb");
    			$navthumb.eq(curclicked).parent().removeClass("active-thumb");
    				$j(".stripNav ul li a").eq(curclicked).trigger('click');
    			
    			theInt = setInterval(function(){
    				$crosslink.removeClass("active-thumb");
    				$navthumb.eq(curclicked).parent().removeClass("active-thumb");
    All links eventually have the active-thumb class added to it.
    Code:
    			$crosslink.addClass("active-thumb");
    			$navthumb.eq(curclicked).parent().removeClass("active-thumb");
    				$j(".stripNav ul li a").eq(curclicked).trigger('click');
    			
    			theInt = setInterval(function(){
    				$crosslink.removeClass("active-thumb");
    				$navthumb.eq(curclicked).parent().removeClass("active-thumb");

    Puts the active-thumb class on the first link, but ignores the rest.
    Code:
    			$crosslink.removeClass("active-thumb");
    			$navthumb.eq(curclicked).parent().addClass("active-thumb");
    				$j(".stripNav ul li a").eq(curclicked).trigger('click');
    			
    			theInt = setInterval(function(){
    				$crosslink.addClass("active-thumb");
    				$navthumb.eq(curclicked).parent().removeClass("active-thumb");
    active-thumb class is not applied to any links:
    Code:
    			$crosslink.addClass("active-thumb");
    			$navthumb.eq(curclicked).parent().removeClass("active-thumb");
    				$j(".stripNav ul li a").eq(curclicked).trigger('click');
    			
    			theInt = setInterval(function(){
    				$crosslink.addClass("active-thumb");
    				$navthumb.eq(curclicked).parent().removeClass("active-thumb");
    Last edited by ingero; 07-27-2009 at 03:26 PM.

  5. #5
    Join Date
    Dec 2007
    Posts
    40
    Also, any clues about adding a pause link too?

  6. #6
    Join Date
    Dec 2007
    Posts
    40
    Hmm, the links do not seem to be working either.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles