Need serious help with tabbed content

martinfamily2005 · March 6, 2011, 9:37pm

Can someone please help me get the tabbed content area to work properly on my page here: http://billboardfamily.com/?theme=DeepFocus

The tabs work fine, but they will not display all the content, or any content on some tabs. Need someone tp help me get these all working correctly.

thanks.

CODE FOR ENTIRE PAGE

<?php get_header(); ?>
	
	<div id="content-full">
		<div id="home-top"></div>
		<div id="hr">
			<div id="hr-center">
				<div id="intro">
					<div class="center-highlight">
					
						<div class="container">
	
							<?php if (get_option('deepfocus_featured') == 'on') include(TEMPLATEPATH . '/includes/featured.php'); ?>
							
							<?php if (get_option('deepfocus_quote') == 'on') { ?>
								<div id="tagline">
									<p><?php echo(get_option('deepfocus_quote_one')); ?></p>
									<span class="quote2"><?php echo(get_option('deepfocus_quote_two')); ?></span>
								</div>	<!-- end #tagline-->
							<?php } ?>
							
						</div> <!-- end .container -->	
					</div> <!-- end .center-highlight -->
				</div>	<!-- end #intro -->	
			</div> <!-- end #hr-center -->
		</div> <!-- end #hr -->
				
		<div class="center-highlight">
			<div class="container">
				
				<?php if (get_option('deepfocus_blog_style') == 'false') { ?>
					<?php for ($i=1; $i <= 2; $i++) { ?>
						<?php query_posts('page_id=' . get_pageId(html_entity_decode(get_option('deepfocus_home_page_'.$i)))); while (have_posts()) : the_post(); ?>
							
						<?php endwhile; wp_reset_query(); ?>
					<?php } ?>
				
				
					<div class="service" id="blog" style="margin-left:30px;">

						<div id="blog-top"></div>
						<div id="blog-wrapper">
							<div id="blog-content">
								<h4 class="widgettitle"><?php _e('Today We Are Wearing','DeepFocus'); ?></h4>
								<div class="recentscroll">
									<?php the_post_thumbnail(); ?>
								</div> <!-- end .recentscroll -->
							</div> <!-- end #blog-center -->
						</div> <!-- end #blog-wrapper -->	
						
						<a href="<?php the_permalink(); ?>" class="readmore"><span><?php _e('Learn More','DeepFocus'); ?></span></a>
	<!-- end #controllers2 -->
					</div> <!-- end .service -->

<div class="service" id="blog" style="margin-left:30px;">
						<div id="blog-top"></div>
						<div id="blog-wrapper">
							<div id="blog-content">
								<h4 class="widgettitle"><?php _e('Monthly Charity','DeepFocus'); ?></h4>
								<div class="recentscroll">
									<ul>
										<?php query_posts("showposts=".get_option('deepfocus_fromblog_number')."&cat=".get_cat_ID(get_option('deepfocus_blog_cat')));
										if (have_posts()) : while (have_posts()) : the_post(); ?>
											<li class="clearfix">
												<a href="<?php the_permalink(); ?>" class="title"><span><?php truncate_title(30); ?></span></a>
												<span class="postinfo"><?php _e('Posted','DeepFocus'); ?> <?php _e('by','DeepFocus'); ?> <?php the_author_posts_link(); ?> <?php _e('on','DeepFocus'); ?> <?php the_time(get_option('deepfocus_date_format')) ?></span>
											</li>
										<?php endwhile; endif; wp_reset_query(); ?>
									</ul> <!-- end ul.nav -->
								</div> <!-- end .recentscroll -->
							</div> <!-- end #blog-center -->
						</div> <!-- end #blog-wrapper -->	
						
						<a href="<?php the_permalink(); ?>" class="readmore"><span><?php _e('Learn More','DeepFocus'); ?></span></a>
	<!-- end #controllers2 -->
					</div> <!-- end .service -->


<div class="service" id="blog" style="margin-left:30px;">
						<div id="blog-top"></div>
						<div id="blog-wrapper">
							<div id="blog-content">
								<h4 class="widgettitle"><?php _e('Monthly Sponsor','DeepFocus'); ?></h4>
								<div class="recentscroll">
									<?php $args = array( 'numberposts' => 1, 'category' => 9 );
$catposts = get_posts( $args );
if ( has_post_thumbnail($catposts[0]->ID)) {
echo get_the_post_thumbnail($catposts[0]->ID, 'thumbnail');
} ?>
								</div> <!-- end .recentscroll -->
							</div> <!-- end #blog-center -->
						</div> <!-- end #blog-wrapper -->	
						
						<a href="<?php the_permalink(); ?>" class="readmore"><span><?php _e('Learn More','DeepFocus'); ?></span></a>
	<!-- end #controllers2 -->
					</div> <!-- end .service -->

				<div class="clear"></div>

				<?php
 $lastposts = get_posts('numberposts=1&category=15');
 foreach($lastposts as $post) :
    setup_postdata($post);
 ?>
	

					<h3 class="hometitle recentworks"><?php the_time('F j, Y') ?> - <?php _e('Today&#39;s Sponsor Is ','DeepFocus'); ?><span id="sponsor-name"><?php echo get_post_meta($post->ID, 'daily_sponsor_name', TRUE); ?></span></h3>

<div id="featured">
<!--START THE WRAPPER--> 
<div class='curtain_wrapper'>

	<!-- 2 CURTAIN IMAGES START HERE  -->
	<img class='curtain curtainLeft' src='images/curtainLeft.jpg' />
    <img class='curtain curtainRight' src='images/curtainRight.jpg' />
    <!-- END IMAGES -->

    <!-- START THE CONTENT DIV --> 	
	<div class='content'>
		<!-- YOUR CONTENT HERE -->
	<div id="main-video" style="text-align:center;">
<?php echo do_shortcode('[youtubefeed limit="1" height="447" width="750"]'); ?>
	</div>

        <!-- END YOUR CONTENT -->
    </div></div>
    <!-- END THE CONTENT DIV -->

<!-- START DESCRIPTION DIV, WHICH WILL BE SHOWN ON TOP OF THE CURTAIN AND REMOVED WHEN THE CURTAINS OPEN -->
    <div class='reveal'>
    	
<h3 class="hometitle recentworks" style="font-size: 32px;"><?php _e('Watch Today&#39;s Video','DeepFocus'); ?></h3>

    </div>
    <!-- END DESCRIPTION DIV -->
    
</div>
<!--END THE WRAPPER-->



	

<!-- BEGIN main blog content -->

<div id="mainblog" style="margin-top: 15px;">



<div class="mainblog-content">
	
 
</div>

<!-- start tabs-->
<div id="panes">

	<div>
			
		<p>
			<h3 class="hometitle recentworks" style="color:#000000; font-size: 40px; margin-top: -15px;" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?> 

<h2 style="width: 100px; font-size: 18px; margin-top: 30px; float: left;"><a href="#5"><?php comments_number('0 COMMENTS ', '1 COMMENT ', '% COMMENTS '); ?></a>
</h2>

<span style="width: 2px; float: left;"><img src="http://billboardfamily.com/wp-content/themes/DeepFocus/images/hz_line.jpg" /></span>

<h2 style="width: 200px; font-size: 18px; margin-top: 20px; float: left;"><a href="">LEAVE A COMMENT</a></h2>
		</p>
	</div>

<div>

		
		<p>
			<div id="portfolio-items" class="clearfix">

						
						<?php $allCats = get_categories();
						
						$blogCats = array();
						$blogcat = get_cat_ID(get_option('deepfocus_blog_cat'));
						
						foreach ($allCats as $category) {
							if (in_subcat($blogcat, $category->cat_ID)) $blogCats[] = $category->cat_ID;
						}
						
						$args = array('category__not_in' => $blogCats,
									  'showposts' => get_option('deepfocus_portfolio_number'));
						
						$i = 1;
						query_posts($args);
						if (have_posts()) : while (have_posts()) : the_post(); ?>
							<?php include(TEMPLATEPATH . '/includes/gallery.php'); ?>
						<?php $i++; endwhile; endif; wp_reset_query(); ?>
						
						<div class="clear"></div>
						
						<a href="<?php echo(get_category_link(get_cat_ID(get_option('deepfocus_portfolio_cat')))); ?>" class="readmore entergallery"><span><?php _e('Enter The Gallery','DeepFocus'); ?></span></a>
					</div> <!-- end #portfolio-items -->
		</p>
		
</div>
	
	<div>

		
		<p>
			Contests & Specials   use custom fields
		</p>
		
	</div>

	
	<div>   
		
		
		<p>
			Connect on Facebook, etc   use custom fields
		</p>		
		
	</div>

<div>

		
		<p>
			<?php comments_template('', true); ?>
		</p>
		
	</div>


<div>
		
		
		<p>
		<a href="http:www.billboardfamily.com/rss">Subscribe To Our Blog</a> <br />Also, add mailing list here
		</p>
	</div>
<div class="clearfix"></div>
</div>

<br clear="all" />


<!-- navigator -->
<div id="nav">
	<ul>
		
		<li>
			<a href="#1">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Blog</strong>


</a>
		</li>

<li>
			<a href="#2">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Photos</strong>


</a>
		</li>

		<li>
			<a href="#3">
				<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg"/>
				<strong>Contests & Specials</strong>
				
			</a>

		</li>
		<li>
			<a href="#4">
				<img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg" />
				<strong>Connect</strong>
		
			</a>
		</li>

<li>
			<a href="#5">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Comments</strong>


</a>
		</li>

<li>
			<a href="#6">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Subscribe</strong>

				
			</a>
		</li>
	</ul>

</div>


<br clear="all" />
<!-- end tabs-->

<!-- END main blog content -->

<?php endforeach; ?>

					<div id="portfolio-items" class="clearfix">

						
						<?php $allCats = get_categories();
						
						$blogCats = array();
						$blogcat = get_cat_ID(get_option('deepfocus_blog_cat'));
						
						foreach ($allCats as $category) {
							if (in_subcat($blogcat, $category->cat_ID)) $blogCats[] = $category->cat_ID;
						}
						
						$args = array('category__not_in' => $blogCats,
									  'showposts' => get_option('deepfocus_portfolio_number'));
						
						$i = 1;
						query_posts($args);
						if (have_posts()) : while (have_posts()) : the_post(); ?>
							<?php include(TEMPLATEPATH . '/includes/gallery.php'); ?>
						<?php $i++; endwhile; endif; wp_reset_query(); ?>
						
						<div class="clear"></div>
						
						<a href="<?php echo(get_category_link(get_cat_ID(get_option('deepfocus_portfolio_cat')))); ?>" class="readmore entergallery"><span><?php _e('Enter The Gallery','DeepFocus'); ?></span></a>
					</div> <!-- end #portfolio-items -->	
				
				<?php } else { ?>
					<div id="content-area" class="clearfix">
				
						<div id="left-area">
							<?php $args=array(
								'showposts'=>get_option('deepfocus_homepage_posts'),
								'paged'=>$paged,
								'category__not_in' => get_option('deepfocus_exlcats_recent'),
							);
							if (get_option('deepfocus_duplicate') == 'false') $args['post__not_in'] = $ids;
							query_posts($args); ?>
							<?php if (have_posts()) : while (have_posts()) : the_post(); ?>					
								<?php include(TEMPLATEPATH . '/includes/entry.php'); ?>
								<?php $i++; ?>
							<?php endwhile; ?>
								<div class="clear"></div>
								<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
								else { ?>
									 <?php include(TEMPLATEPATH . '/includes/navigation.php'); ?>
								<?php } ?>
								
							<?php else : ?>
								<?php include(TEMPLATEPATH . '/includes/no-results.php'); ?>
							<?php endif; wp_reset_query(); ?>
							
						</div> <!-- end #left-area -->
						
						<?php get_sidebar(); ?>

					</div> <!-- end #content-area -->
				<?php } ?>
				
			</div> <!-- end .container --></div>

		
			<?php get_footer(); ?>

CODE FOR TABS SCRIPT (IN HEADER.PHP)

<script>
$(function() {
	
	
	$("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});
});
</script>

ralphm · March 6, 2011, 9:45pm

Tabbed content area? Which bit to you mean?

martinfamily2005 · March 6, 2011, 9:48pm

under the large video with the red curtains, there is a huge white box with 6 images at the bottom (these are the tabs nav buttons) - that is the tabbed content area. see attached screen shot.

ralphm · March 6, 2011, 9:54pm

Hmm, what I see in Firefox is exactly what I see in that screen shot. Could you give a screen shot of what you are seeing that is wrong, and specify if there’s a browser this is happening in?

martinfamily2005 · March 6, 2011, 9:57pm

I am using firefox, too. the tabs work fine. the problem is that the content is not loading in all tabs. On the “Comments” tab, for example, the comments should be showing, but it is just blank. you can see the code in the original file calling the comments, but there is nothing showing. this is happening on a lot of tabs.

ralphm · March 6, 2011, 10:06pm

O, I see. I think this is more of a WordPress / programming question than a CSS issue. Are you happy for me to move this to the WordPress forum?

martinfamily2005 · March 6, 2011, 10:10pm

sure. I never get responses there, but go ahead and move it. thanks

ralphm · March 6, 2011, 10:20pm

Is the functionality for this part of the theme you are using, or a separate plugin? It might be best to ask the creator of this.

martinfamily2005 · March 6, 2011, 10:24pm

neither. the tab code is from here: http://flowplayer.org/tools/demos/tabs/skin4.htm

the rest is just wordpress.

ralphm · March 6, 2011, 10:41pm

Hm, seems like the tabs are working ok, but that the content for some tabs is not getting to the browser.

martinfamily2005 · March 6, 2011, 10:41pm

yep. that is the issue.

PaulOB · March 7, 2011, 7:59pm

Have you changed the page as I can’t find any tabbed content as per the image you showed?

martinfamily2005 · March 7, 2011, 8:00pm

The page is down at the moment. I will be back on when it is up to let you know. Thanks!

Topic		Replies	Views
Help with tabbed content problem in IE7 HTML & CSS	3	477	March 4, 2010
Tabbed panels not displaying corrctly HTML & CSS	5	638	October 8, 2014
Different tab content showing in one tab,why? HTML & CSS javascript , bootstrap	2	2980	September 18, 2019
Nested CSS Tabs Not Working Fully! HTML & CSS	3	3454	May 17, 2017
Cross browser compatible CSS Tabbed interface needed HTML & CSS	10	2238	September 29, 2010

Need serious help with tabbed content

Related topics