SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slider Animation Broken

    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:

    Code JavaScript:
     <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:

    Code CSS:
     	#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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,320
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Works for me in Firefox. What browser are you viewing this with?

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Works for me in Firefox. What browser are you viewing this with?
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,320
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Works fine in Chrome for Mac.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Works fine in Chrome for Mac.
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,320
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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. #7
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code PHP:
     		<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:

    Code PHP:
     			<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?

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


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
  •