how to give link one page to another page vertical tab using bootstrap.
External link page:
<div class="tt-service-info"><a class="tt-service-title c-h5" href="http://jsrgraphics.com/our-products#finishing">FINISHING EQUIPMENT</a></div>
Destination page:
<li class="tt-nav-tab-item">FINISHING EQUIPMENT</li>
Tab content:
<div class="tab-content">
<div class="tab-pane text-style active" id="finishing">
<h3 class="uppercase yes_border">1 Color Machine </h3>
<p>
<?php echo do_shortcode('[featured_product_categories cats="220" per_cat="6" columns="4"]') ?>
</p>
</div>
Note: I want open particular tab, please help out here
Related
code below is long but really straight forward only require code to put forward ability to slide from first slide to last slide to that return to first slide to traverse.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<?php
foreach($employers as $employer){
echo '<li class="orbit-slide">
<figure class="orbit-figure">
'.$this->Html->image($employer['image'], ['alt'=>'employer image',
"class"=>"orbit-image"]).'
<figcaption class="orbit-caption">'.
$employer['brief'].
$employer['name'].
$employer['desg'].
$employer['created'].'
</figcaption>
</figure>
</li>
';
}
?>
</ul>
</div>
<nav class="orbit-bullets">
<?php
$i=0;
foreach($employers as $employer){
echo '<button data-slide="'.$i.'">
<span class="show-for-sr">First slide details.</span>
<span class="show-for-sr" data-slide-active-label>Current Slide</span>
</button>';
$i++;
}
?>
</nav>
</div>
code below is to slide thumbnail images traverse from first to last and return to first as above but with thumbnails that show product slide 4-5 at one go. Below code must show 4-5 thumbnails with small text and traverse as timer and button click play a role.
<div class="ecommerce-product-slider orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<?php
foreach($sectorsandcourses as $sectorandcourse){
echo '<li class="orbit-slide">
<div class="row small-up-2 medium-up-4 large-up-5 align-center">
<div class="column">
<div class="product-card">
<div class="product-card-thumbnail">
<a href="#" class="th">'.
$this->Html->image($sectorandcourse['image'], ['alt'=>'Image for sector and courses',
'style'=>'width:100%;']).'</a>
</div>
<h2 class="product-card-title">'.$sectorandcourse['sectors_and_courses'].'</h2>
<span class="product-card-desc">Product Description</span>
<span class="product-card-price">'.$sectorandcourse['count'].'</span>
</div>
</div>
</div>
</li>';
}
?>
</ul>
<nav class="orbit-bullets">
<?php
foreach($sectorsandcourses as $sectorandcourse){
echo '
<button class=data-slide="0">
<span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span>
</button>';
}
?>
</nav>
</div>
so both are different do not get confused be kind to put forward a relation between both but not to confuse them as same since one is a full screen slide show next one is thumbnail slideshow.
vision to make :
fullscreen slideshow
thumbnail slide show
Is your question the following?
i only require to work with that code that works to enable slide show beyond seond slide and return to first slide
If so please shorten your complete question to this (loop, start with first slide after last).
This already works by default as data-infinite-wrap is true by default.
https://get.foundation/sites/docs/orbit.html
https://get.foundation/sites/docs/orbit.html#js-options
You did not specify the exact Foundation version (6.x.y, x and y are needed) and we would need a https://codepen.io to see your actual problem.
Also try to remove is-active from your output. This may be the cause. And only provide generated html code so that we can reproduce your issue.
Orbit has been discontinued i suggest use carousel with bootstrap.
I have successfully added a tab to my view.phtml page located at app/design/frontend/enterprise/aps/template/catalog/product.
I tried an if statement to hide it if the Specifications field is empty, i.e. no content. The issue is, it doesn't work. It still shows the tab even if there is no content.
My code is below at the end of post.
2 Questions:
Am I taking the correct approach? Basically, I am making a tab to have an Expert Review tab. I originally was going to use a cms block, but figured purposing the Specifications field was easier, for one, but also I could ignore the tab if no content
Can you please help ? :)
Thanks so much and here is my code and I attached a screenshot of the empty tabs.
<div class="wa-product-details-tab product-description">
<div class="wa-product-details-tab-heading product-desc-tab">
<div rel=".wa-product-tab-details-item-1" class="wa-product-heading-item wa-product-heading-item-1 wa-product-heading-item-active">
<span>Description</span>
</div>
<div rel=".wa-product-tab-details-item-2" class="wa-product-heading-item wa-product-heading-item-2">
<span>Specs</span>
</div>
<div rel=".wa-product-tab-details-item-3" id="review-form" class="wa-product-heading-item wa-product-heading-item-3">
<?php
$summaryData = Mage::getModel('review/review_summary')
->setStoreId(Mage::app()->getStore()->getId())
->load($_product->getId());
?>
<span >Reviews (<?php echo $summaryData->getReviewsCount();?>)</span>
</div>
<div rel=".wa-product-tab-details-item-4" class="wa-product-heading-item wa-product-heading-item-4">
<span>APS Advisor Review</span>
</div>
</div>
<div class="wa-product-tab-details product-desc">
<div style="display: block;" class="wa-product-tab-details-item wa-product-tab-details-item-1">
<?php echo $_product->getDescription(); ?>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-2">
<p> <?php echo $this->getChildHtml('additional')?></p>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-3">
<p>
<?php echo $this->getChildHtml('review_form') ?>
<?php echo $this->getChildHtml('product_additional_data_review') ?>
</p>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-4">
<?php if ($_product->getSpecifications()); ?>
</div>
</div>
I am not sure if I understood your issue correctly. I am assuming that you want to hide the "APS Advisor Review" tab if there is no content in it.
For this you can use an if condition to check if $_product->getSpecifications() has any content, and show the tab title only if there is any content like this
<?php if( !empty($_product->getSpecifications()) ){ ?> <!-- displays the tab title only if the product has any specifications -->
<div rel=".wa-product-tab-details-item-4" class="wa-product-heading-item wa-product-heading-item-4">
<span>APS Advisor Review</span>
</div>
<php } ?>
I have a site where I have an availability calendar and I need to show it within a tab table, I have it working to show on both the content and then the tab table! How can I remove it from the content but still show it within the table? I have tried hiding it within the 'Manage Display' section of the content type but it removes it from both
<ul class="nav nav-tabs">
<li class="active">Description</li>
<li>Availability</li>
<li>Pricing Information</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home"><?php if(isset($node->field_cottage_description['und'][0]['value']))
{
print $node->field_cottage_description['und'][0]['value'];
}
?> </div>
<div class="tab-pane" id="profile">
<?php
print $content['field_availability']['#children'] ;
?></div>
<div class="tab-pane" id="messages"><?php if(isset($node->field_price_guide['und'][0]['value']))
{
print $node->field_price_guide['und'][0]['value'];
}
?></div>
</div>
I hope someone can help with my issue! If it's blatantly obvious then don't be afraid to let me know.
The only way to hide it but also keep it able to run is you just close it within the task manager...
if that dont work them you may have to turn it off and back on..
if that dont work them i think you may have to script it to be able to do what you are needing
I'm building a wordpress site (here: http://dev.tps.entropii.com/contact-us/) that requires a full page width google map on the contact page. The Business has two addresses so they effectively need two maps with a means to switch between them. I'm using Advanced Custom Fields plugin to give the user the functionality to update/edit their addresses.
Here's the problem. In order to give the functionality to switch back and forth between the two maps I decided to put them inside a twitter bootstrap carousel. One slide for each map. This works as expected with one problem. The map that is contained within the inactive slide (e.g. the slide that doesn't have the class 'active' on page load), doesn't seem to fully load. If I put the maps side by side on the page without the carousel they load no problem.
Because I'm using advanced custom fields, the maps are being loaded using php. Here's the HTML/php from my template file:
`
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!-- map 1 -->
<?php $map1 = get_field('map_1'); if( !empty($map1) ): ?>
<div class="acf-map" id="map1">
<div class="marker" data-lat="<?php echo $map1['lat']; ?>" data-lng="<?php echo $map1['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
<div class="item">
<!-- map 2 -->
<?php $map2 = get_field('map_2'); if( !empty($map2) ): ?>
<div class="acf-map" id="map2">
<div class="marker" data-lat="<?php echo $map2['lat']; ?>" data-lng="<?php echo $map2['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#map-carousel" data-slide="prev"></a>
<a class="right carousel-control" href="#map-carousel" data-slide="next"></a>
</div>`
My suspicion is that because the inactive slides of the bootstrap carousel are set to display none, that the content isn't being loaded int he first place properly. However I'm completely stabbing in the dark. Can anyone shed any light on this?
Let me know if you ned any more info. Thanks,
I've created several pages in wp-admin and inserted the needed HTML. Each page contains multiple nested div elements. An example of one of my pages is the following Contact page:
<div id="content">
<div id="inner-content" class="row clearfix">
<div id="main" class="large-12 medium-12 columns clearfix" role="main">
<strong>Artist Name</strong>
<div class="clearfix"></div>
<a class="email" href="mailto:example#gmail.com">Email Artist</a>
<h3 class="team-title">Artist's Team</h3>
<ul class="team-list">
<li>
<strong>Sarah</strong><p class="team-role"> : Fine Art Agent</p>
<p class="company">Some Agency, NYC</p>
<a class="email" href="mailto:example#gmail.com">Email Sarah</a>
</li>
<li>
<strong>Justin</strong><p class="team-role"> : Manager</p>
<div class="clearfix"></div>
<a class="email" href="mailto:example#gmail.com">Email Justin</a>
</li>
<li>
<strong>Jesse</strong><p class="team-role"> : Publicist</p>
<p class="company">Another Art Agency</p>
<a class="email" href="mailto:example#gmail.com">Email Jesse</a>
</li>
</ul>
</div> <!-- end #main -->
</div> <!-- end #inner-content -->
For this Contact page I have chosen the Contact (contact.php) template for it in the Page Attributes > Template dropdown menu like so:
And the contents of the contact.php are:
<?php /* Template Name: Contact */ ?>
<?php get_header(); ?>
<?php get_footer(); ?>
For some reason when I go to view the Contact page, all I see is the header and footer. All of the HTML code get's ignored by Wordpress. Why is this happening? And how to fix it?
well your contact.php is missing the post output, the minimal code should be something like that
<?php the_post(); the_content(); ?>
e.g. set the first post as current (skipping the loop) then output its content. though as you added plain html to the page content (often seen as a no-no) it maybe better to directly echo content like that:
<?php the_post(); global $post; echo $post->post_content; ?>
that way you skip wordpress filters that add paragraphs etc. to the content.