Slider Animation Broken

JavaScript
1

Hi there,

I have a content slider on our home page @ I've Got Kids!: Home

You will see that it slides through 4 featured articles, giving you the option on the right to skip straight to one of your choosing…

There is a problem with this feature… I haven’t changed anything since it worked last but for some reason, now when you choose one from the list on the right, the “info” tab that should appear at the bottom of the main picture doesn’t show up with it.

The slider is written in jQuery & PHP so I hope I’m posting this in the right section. If somebody could help me figure out why it is behaving like this ASAP, I would be very grateful.

Here is the code that controls the slider:

 <script type="text/javascript" src="<?php echo FCG_PLUGIN_URL; ?>/scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo FCG_PLUGIN_URL; ?>/scripts/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" >
	var slider_speed = '<?php echo get_option("speed_slider"); ?>';
	var animation_style = '<?php echo get_option("animation_style"); ?>';
	
	var show_caption = '<?php echo get_option("show_caption");?>';
		
	$(document).ready(function(){
		if(show_caption == 'No') {
			$("#featured .ui-tabs-panel .info").hide();	
		}
		if( animation_style == 'Slide Up/Down'){
			FCGSlideInOut();
		}
		else if( animation_style == 'Fade In/Out'){
			FCGFadeInOut();
		}
	});  
	function FCGSlideInOut(){
		$("#featured").tabs(
			{
			fx:{opacity: "toggle"},
			 select : function(){
			 	if( show_caption != 'No') {
					$("#featured .ui-tabs-panel .info").animate({top:'280px'}, 500 ).animate({top:'180px'}, 500 );
				}
			}
			}
			).tabs("rotate", <?php echo get_option("speed_lefttxt");?>, true); 
		
		$("#featured").hover(function() {  
			$("#featured").tabs("rotate",0,true); 
			},  
		function() {  
		$("#featured").tabs("rotate",<?php echo get_option("speed_lefttxt");?>,true);  

		});  
	}
	function FCGFadeInOut(){
//		$("#featured .ui-tabs-panel .info").css('top','280px');
		$("#featured").tabs(
			{
			fx:{opacity: "toggle"},
			select : function(){
				if( show_caption != 'No') {
					//$("#featured .ui-tabs-panel .info").fadeOut("slow");
				}
			}
			}
			).tabs("rotate", slider_speed, true); 
		$("#featured").hover(function() {  
			$("#featured").tabs("rotate",0,true); 
			},  
		function() {  
		$("#featured").tabs("rotate",slider_speed,true);  

		});  
	}
</script>

And here is the CSS that controls how the slider is displayed:

 	#featured{ 
		width:370px; 
		padding-right:230px; 
		position:relative; 
		border:5px solid #F6C; 
		height:250px; 
		background:#fff;
		overflow:hidden;
		margin:0; 
	}
	
	
	#featured ul.ui-tabs-nav{ 
		position:absolute; 
		top:0px; left:370px; 
		list-style:none; 
		padding:0; margin:0; 
		width:230px; 
	}
	#featured ul.ui-tabs-nav li{ 
		padding:0px 0; padding-left:13px;
		font-size:12px; 
		color:#666; 
	}
	#featured ul.ui-tabs-nav li img{ 
		float:left; margin:2px 5px; 
		background:#fff; 
		width:80px;
		height:50px;
		padding:2px; 
		border:1px solid #eee;
	}
	#featured ul.ui-tabs-nav li span{ 
		font-size: <?php if(get_option("tab_fontsize")){echo get_option("tab_fontsize");}else{echo "11";}?>px; 
		font-family: <?php if(get_option("tab_fontfamily")){echo get_option("tab_fontfamily");}else{echo "Verdana, Arial, Helvetica, sans-serif";}?>; 
		line-height:18px; 
	}
	#featured li.ui-tabs-nav-item a{ 
		display:block; 
		height:63px;
		padding-right:5px; 
		color:#333;  
		background:#fff; 
		line-height:20px;
		text-decoration:underline;
	}
	#featured li.ui-tabs-nav-item a:hover{ 
		background:#f2f2f2; 
	}
	#featured li.ui-tabs-selected{ 
		background:url('<?php echo FCG_PLUGIN_URL; ?>/images/selected-item.png') top left no-repeat;
		z-index: 997;
	}
	#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
		background:#ff99ff; 
	}
	#featured .ui-tabs-panel{ 
		width:370px; 
		height:250px; 
		background:#FCF; position:relative;
		z-index:999;
	}
	#featured .ui-tabs-panel .info{ 
		position:absolute; 
		width:370px;
		top:180px; 
		left:0; 
		height:80px; 
		overflow:hidden;
		background: url('<?php echo FCG_PLUGIN_URL; ?>/images/transparent-bg.png'); 
		z-index:2000;
	}
	#featured .info h2{ 
		font-size: <?php if(get_option("heading_fontsize")){echo get_option("heading_fontsize");}else{echo "18";}?>px; 
		font-family: <?php if(get_option("heading_fontfamily")){echo get_option("heading_fontfamily");}else{echo "Georgia, 'Times New Roman', Times, serif";}?>; 
		color:#fff; padding:5px; margin:0;
		overflow:hidden; 
	}
	#featured .info p{ 
	
		margin:0 5px; 
		font-family:<?php if(get_option("captiontext_fontfamily")){echo get_option("captiontext_fontfamily");}else{echo "Verdana, Arial, Helvetica, sans-serif";}?>; 
		font-size:<?php if(get_option("captiontext_fontsize")){echo get_option("captiontext_fontsize");}else{echo "11";}?>px; 
		line-height:15px; color:#f0f0f0;
	}
	#featured .info a{ 
		text-decoration:none; 
		color:#fff; 
	}
	#featured .ui-tabs-hide{ 
		display:none; 
	}
</style>

If you need any more info, please let me know.

2

Works for me in Firefox. What browser are you viewing this with?

3

Hmmm so it does…

I’m using Chrome. Appears to be happening in Chrome only. Any idea why this is and how I can fix it?

4

Works fine in Chrome for Mac.

5

It’s definitely not working fine in Chrome for Windows and I’m not the only one who’s tested it either… my business partner has also tested it (in fact it was she who spotted it) and we both use different PC’s, different ISP’s - she’s in a different part of the country entirely so I know it’s nothing to do with my setup…

I can’t see any reason why it would behave like this.

6

Just tried it in Chrome on Win7 and it’s working fine. Could you check what version of Windoze you are using and what version of Chrome?

7

I’m using Windows 7
Google Chrome v 13.0.782.215 m

And it’s still not working…

When you say it’s working fine - are you clicking on a thumbnail on the right hand side?

When you click on one of those thumbnails, it should bring the full sized feature into focus - along with the info that comes up at the bottom of the slide… It’s that info which is missing… all you get is the picture.

Then when you move the mouse off and let the slide show continue, it carry’s on going through the rest of the slides as normal but each time it comes to the one you just clicked on, the info is missing.

8

Yes, but I think I was using a slightly older version of Chrome. The latest version does indeed do what you say, although it starts to autoplay again after a while, although the subtitles don’t reappear. Odd. Have you tested the original slideshow code to see if it also behaves that way?

9

I haven’t made any changes to the original slideshow code - The only thing I have changed is the colours in the CSS because the original slideshow was grey and didn’t fit in with the theme so I made the borders and the background on the thumbnails pink to match the rest of the site.

I haven’t touched the javascript and I haven’t touched the CSS for the main image or the subtitle div.

I’m completely puzzled by this behaviour - it must be something to do with how Chrome is reading the script since it was updated :-s

Any JQuery experts out there who know why Chrome is behaving this way?

10

Starting to narrow this down a little now…

What it appears to be doing is stripping the class from the fragment div whenever the thumbnail is clicked and that is what is making the info disappear.

The div in question is this one:

 		<div id="fragment-<?php the_ID();?>" class="ui-tabs-panel" >

			<img src="<?php echo FCG_PLUGIN_URL; ?>/scripts/timthumb.php?src=<?php echo $newurl; ?>&h=250&w=400&zc=1" alt="<?php echo $post_title; ?>" />

			 <div class="info" >

				<h2><a href="<?php the_permalink(); ?>" ><?php echo $post_title; ?></a></h2>

				<?php 

					$content = get_the_content();
					$content = strip_tags($content);

					$content = substr($content,0,100);

				?>

				<p><span><?php echo $content; ?></span><a href="<?php the_permalink();?>">...read more</a></p>

			 </div>

		</div>

That is the code relating to the featured image and description box… As you can see, there is a class “ui-tabs-panel” applied to this DIV.

Now when you click a thumbnail on the right, this class is removed - I can’t find out why it is removing this class but this is the reason it is no longer displaying the info properly.

The code relating to the thumbnails on the right is:

 			<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php the_ID();?>"><a href="#fragment-<?php the_ID();?>"><img src="<?php echo FCG_PLUGIN_URL; ?>/scripts/timthumb.php?src=/<?php echo $newurl;  ?>&h=50&w=80&zc=1" alt="<?php echo $post_title; ?>" /><span><?php echo $post_title; ?></span></a></li>

I know the above code is written in PHP - the slider is a PHP / jQuery combination and I am having trouble determining whether it’s the javascript code or the PHP code that needs to be fixed.

Any clues?

11

Oooh I just fixed it…

I just added a new <div class=“ui-tabs-panel”> inside the <div id fragment- > and took the power of the class away from that first div so that it couldn’t be deleted… afterall, it can’t delete what isn’t there.

It might not be the perfect solution - but it seems to work now!