Give “active” active class to a tab in html if there’s a value in a variable

  • Resolved kirasiris

    (@kirasiris)


    7 years, 1 month ago

    Hello guys,
    I’ve been working in a new template in WordPress, and I’ve been using the WordPress custom fields.
    What I’m doing is inserting an URL to each custom field, if there is not URL, by default the value for them is “#”.
    So when I put a Youtube URL it makes the tab “active” and it works well, the problem is when I only insert a Vimeo URL, the tabs is not shown as active; the only way to active it is by the user clicking on it. Is it possible to change this with CSS, or Javascript?

    
<!-- Tabs -->
<?php $youtube_url = get_post_meta($post->ID, 'Youtube URL', true); ?>
<?php $vimeo_url = get_post_meta($post->ID, 'Vimeo URL', true); ?>
        <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
			<?php if ($youtube_url=='#') : ?>
            <?php else : ?>
	            <li class="nav-item active"><a class="nav-link " id="youtube-tab" data-toggle="tab" href="#youtube" role="tab" aria-controls="youtube" aria-expanded="true">Youtube</a></li>
            <?php endif; ?>
            <?php if ($vimeo_url== '#') : ?>
            <?php else : ?>
            	<li class="nav-item"><a class="nav-link " id="vimeo-tab" data-toggle="tab" href="#vimeo" role="tab" aria-controls="vimeo">Vimeo</a></li>
            <?php endif; ?>
        </ul>
<div class="tab-content" id="myTabContent">
<!--------------------------------------------------------- Youtube player --------------------------------------------------------------------------------->
<?php if ($youtube_url=='#') : ?>
<?php else : ?>
<div class="tab-pane active" id="youtube" role="tabpanel" aria-labelledby="youtube-tab">
<br>
<div class="song">
    <div class="video-grid">
        <iframe src="https://www.youtube.com/embed/<?php echo youtube_url(get_the_ID()); ?>" allowfullscreen></iframe>                          
    </div>
</div>
<div class="song-grid-right">
      <div class="share">
          <h5>Share this</h5>
          <ul>
<li><a rel="nofollow" href="https://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php echo urlencode(get_the_title($id)); ?>"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a></li>
<li><a rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink();?>"><i class="fa fa-google-plus" aria-hidden="true"></i> Google</a></li>
<li><a rel="nofollow" href="https://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li>
<li><a rel="nofollow" href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&description=<?php the_title(); ?>"><i class="fa fa-pinterest" aria-hidden="true"></i> Pinterest</a></li>
<li><a rel="nofollow" href="whatsapp://send?text=<?php the_permalink(); ?>"> Whatsapp</a></li>
<li><a href="#comments" class="icon comment-icon"><i class="fa fa-comments" aria-hidden="true"></i> <?php comments_number( 'no responses', 'one response', '% responses' ); ?></a></li>
<li><i class="fa fa-eye" aria-hidden="true"></i> <?php echo wpb_get_post_views(get_the_ID()); ?></li>
          </ul>
      </div>
  </div>                   
<div class="clearfix"> </div>
</div>
<?php endif; ?>
<?php if ($vimeo_url=='#') : ?>
<?php else : ?>
<div class="tab-pane" id="vimeo" role="tabpanel" aria-labelledby="vimeo-tab">
<br>
<div class="song">
    <div class="video-grid">
        <iframe src="https://player.vimeo.com/video/<?php echo vimeo_url(get_the_ID()); ?>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
     </div>
</div>
<div class="song-grid-right">
      <div class="share">
          <h5>Share this</h5>
          <ul>
<li><a rel="nofollow" href="https://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php echo urlencode(get_the_title($id)); ?>"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a></li>
<li><a rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink();?>"><i class="fa fa-google-plus" aria-hidden="true"></i> Google</a></li>
<li><a rel="nofollow" href="https://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li>
<li><a rel="nofollow" href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&description=<?php the_title(); ?>"><i class="fa fa-pinterest" aria-hidden="true"></i> Pinterest</a></li>
<li><a rel="nofollow" href="whatsapp://send?text=<?php the_permalink(); ?>"> Whatsapp</a></li>
<li><a href="#comments" class="icon comment-icon"><i class="fa fa-comments" aria-hidden="true"></i> <?php comments_number( 'no responses', 'one response', '% responses' ); ?></a></li>
<li><i class="fa fa-eye" aria-hidden="true"></i> <?php echo wpb_get_post_views(get_the_ID()); ?></li>
          </ul>
      </div>
  </div>                   
<div class="clearfix"> </div>
</div>
<?php endif; ?>

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    It could be changed with JavaScript, but not CSS. I don’t see that being necessary though. Why not just add the active class to the conditional Vimeo li tag like you did for YouTube? Chances are only one or the other condition is applicable, so there shouldn’t be any conflict.

    If one were to place both a YouTube and Vimeo link in the same post, there would be a conflict where both tabs would end up with the active class. You can prevent this if you want by including the YouTube conditional with the Vimeo conditional so should someone put both links in, only the YouTube one will be active. Vimeo would only be active if there is a Vimeo link AND no YouTube link.

    Thread Starter kirasiris

    (@kirasiris)

    Sorry for the late answer, but I finally made it work as I wanted. I had to get rid off the two functions youtube_url and vimeo_url and I created a new one called iframe for a custom field(goes by the same name).

    Here is the function iframe:

    
// Iframe
function iframe($postID){
	$iframe = 'Iframe';
	$iframe_player = get_post_meta($postID, $iframe, true);
	if($iframe_player==''){
		delete_post_meta($postID,$iframe);
		add_post_meta($postID,$iframe, '#');
		return "#";
		}
	return $iframe_player;
	}

    And here is what to put in the html. The solution if anybody need it:

    
<!-- Menu-tabs) -->
<?php if (!empty($iframe)) : ?>
<?php else : ?>
<ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
<?php $links = get_post_custom_values( 'Iframe' ); ?>
<?php if (is_array($links)) : ?>
<?php foreach ($links as $key=>$li) :  ?>
<li class="nav-item <?php echo $key == 0 ? 'active ' : ''; ?>">
<a class="nav-link " data-toggle="tab" href="#tab<?php echo $key; ?>" role="tab" aria-controls="tab" aria-expanded="true">Option</a>
</li>
<?php endforeach ; ?>
<?php endif; ?>
</ul>
<div class="tab-content" id="myTabContent">
<!--------------------------------------------------------- Content-tabs / Iframes players --------------------------------------------------------------------------------->
<?php $player = get_post_custom_values( 'Iframe' ); ?>
<?php if (is_array($player)) : ?>
<?php foreach ($player as $key=>$iframe) : ?>
<div class="tab-pane <?php echo $key == 0 ? 'active ' : ''; ?>" id="tab<?php echo $key; ?>" role="tabpanel" aria-labelledby="tab">
<br>
<div class="song">
<div class="video-grid">
<?php echo $iframe; ?>
</div>
</div>
</div>             
<?php endforeach ?>

    This will add as many tabs and li elements as possible as long as there is a value in the custom field (basically, you can put a lot of video player and each li elemtent will show the content in their corresponding tab)

    • This reply was modified 7 years, 1 month ago by kirasiris.
    • This reply was modified 7 years, 1 month ago by kirasiris. Reason: I forgot to mention that it now makes it possible to use Iframes rather than URL thus eliminating the limit of just using YouTube or Vimeo
    Moderator bcworkz

    (@bcworkz)

    Nice solution, thanks for sharing!

    You’re fine with reply time, no worries at all. This isn’t real time chat and no one is expected to be online all the time. And in any case, it’s your topic to be managed as you wish ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Give “active” active class to a tab in html if there’s a value in a variable’ is closed to new replies.