Importing - Vast Tabber Module into own theme

Developer Support CMS Development
1

Hi all

I am attempting to make use of the custom vast tabber module in our landing pages.

http://info.hawktraining.com/professional-solutions/programme-design

So far I have created a separate .css file and moved the tabber CSS over from the vast style.css, which seems to have worked fine.

/* Border Radius */
{% macro borderradius(value) -%} 
 -webkit-border-radius: {{ value }};
 -moz-border-radius: {{ value }};
 -o-border-radius: {{ value }};
 -ms-border-radius: {{ value }};
 border-radius: {{ value }};
{%- endmacro %}

/* Tabber Module */
.body-container .tabber-tabs {
 border-bottom: 1px solid #ddd;
 list-style: none;
 padding: 0;
 margin: 0 0 -2px;
}
.tabber-tabs > li {
 float: left;
}
.tabber-tabs > li > a {
 background-color: #fc1cb5;
 color: #fff;
 padding-right: 12px;
 padding-left: 12px;
 margin-right: 2px;
 line-height: 14px;
 padding-top: 8px;
 padding-bottom: 8px;
 line-height: 20px;
 border: 1px solid transparent;
 {{ borderradius("4px 4px 0 0") }}
 text-decoration: none;
 display: block;
}
.tabber-tabs > .active > a,
.tabber-tabs > .active > a:hover,
.tabber-tabs > .active > a:focus {
 color: #fff;
 cursor: default;
 background-color: #3cc8b6;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}
.tabber-content {
 background: #fff;
 padding: 8px;
 border: 1px solid #ddd;
 {{ borderradius("0 4px 4px 4px") }}
}
.body-container .tabber-content ul {
 padding: 0;
 margin: 0;
}
.tabber-content .block h3 {
 display: none;
}
.blog-tabber .hs-rss-item.hs-with-featured-image .hs-rss-featured-image {
 float: left;
 width: 40%;
 {{ borderradius("4px") }}
}
.blog-tabber .hs-rss-item.hs-with-featured-image .hs-rss-item-text {
 float: right;
 width: 60%;
 padding: 0 0 0 15px;
}
.blog-tabber .hs-rss-item:last-child {
 margin-bottom: 10px;
}

.hs-rss-item.hs-with-featured-image .hs-rss-item-image-wrapper {
display: block;
width: auto;
}

.blog-tabber .hs-rss-item.hs-with-featured-image .hs-rss-featured-image {
float: left;
width: 40%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}

Having added in the module to the page, I can set the content within the 2 tabs needed. However as you can see content for tab 1 and 2 appear under tab 1, tab 2 is also unselectable.

<div class="tabber-wrap">
 <ul class="clearfix tabber-tabs">
 <li class="active"><a>{{ widget.tab_1 }}</a></li>
 <li><a>{{ widget.tab_2 }}</a></li>
 </ul>
 <div class="tabber-content">
 <div class="tab-pane active">{{ widget.tab_1_content }}</div>
 <div class="tab-pane" id="tab-2">{{ widget.tab_2_content }}</div>
 </div>
</div>

Any help would be greatly appreciated, I assume I am missing something very simple!

Steve

2

Hi Hawk Steve,

I think you must import the js in the footer.

Try this code

 /** 
 * Tabber
 */

 // Hide all panes initially except for the first 'active' one
 $(".tab-pane").not(".active").hide();

 // Loop through all the tabber panes
 $('.tabber-content .tab-pane').each(function(i, el){

 // Set the ID
 $(el).attr("id", "tab-" + i);

 });

 // Loop through all the tabber anchors
 $(".tabber-tabs a").each(function(i, el){

 // Set HREF Using the Index
 $(el).attr("href", "#tab-" + i);

 // Variable for the Pane ID based on the HREF
 var ID = $(el).attr("href");

 // Click Function
 	$(this).click(function(e){

 // Prevent default functionality of the anchor
 		e.preventDefault();

 // If the parent LI does not have the active class
 		if(!$(this).parent().hasClass("active")){

 // Give the parent LI the active state styles and hide all other panes
 			$(this).parent().addClass("active").siblings().removeClass("active");

 // Fade in the corresponding pane and hide all other panes
 			$(ID).fadeIn().siblings().hide();
 		}
 	});

 });

Thanks,

Comsat

3

Hi Comsat

Perfect! I knew JS was involved but couldn’t find it anywhere on existing support pages or old vast template pages to bring across.

Could you let me know where you found the JS for this? I am guessing I can find the rest of the JS for the other custom vast modules (when I come to bringing those across too).

Thank you very much.

Steve

4

Hi Hawk Steeve,

You can find this vast-main.js to Coded Files > page > Vast_Theme > vast-main.js

or public url {{ get_public_template_url(“custom/page/Vast_Theme/vast-main.js”) }}

Thanks,

Comsat