HaiBach supports this item


This author's response time can be up to 2 business days.

45 comments found.


I have some question.

I want to click on slide and go to another page i’m use a href=”xxx.php” it’ not work please help me.

Thank You tOm


I just made an example to check, it work ok! Example here

Insert the link tag into the slide, not direct on the slide:
    <a href="xxx.html">
        <!-- The content of current slide -->

You can send a link demo site for me to check error easier. :-)

I am very disappointed by this purchase … it’s a beta that a final version that can be used on site prod … basically I am very sorry …... The mobile adaptation does not work, the configuration of the tool is very poorly documented, incomprehensible parameters … There probably the work provided behind this tool but it is not in production use at all .. bad ..

Hi raphaelvoyance,

I will try to further improve the plugin and documentation.

I’m willing to help you complete a tabs-layout or write a small script compatible with your tabs layout.

Thank you purchase plugin.

thank you for your reply, to begin what me problem is that i wish i could changing styles css easily, it is not simple at all, so I pass by fochizr sources … then priority a number as in Examples tabs horizontals, it passes vertically thanks to the js code …?


Actually, the styles for skin tabs very easy.

But each skin tabs is to support both horizontal and vertical direction, support top and bottom position in horizontal direction ( left – right for vertical direction ), and support tabs-nested conflict with styles of tabs parent. So, the skin styles become more complex.

Because, the plugin support vertical direction convert to horizontal direction in the small screen. So, the direction depend on js control, you can setting the direction by options:

    // "hor" for horizontal direction, "ver" for vertical direction
    "pag" : { "direction": "hor" }

If you styles for the new skin, only one direction(horizontal or vertical), not support top-bottom position and tabs-nested conflict, the styles for skin more easier. This is “flat” skin for horizontal direction, insert new class “flat-custom” to tabs-layout:

/* The line horizontal at bottom Tabs-title */
.flat-custom .rt01pag {
    border-bottom: 2px solid #cc0055;

/* Style for Tabs-title current */
.flat-custom .rt01pagitem.rt01cur {
    background-color: #cc0055;
    color: #fff;

You can begin styles for new skin by “tabs-layout-simplest.html” template. Good lock.

I’m getting an error: Uncaught TypeError: Cannot read property 'ev' of undefined(…) from this code:
var rt01 = jQuery(".rt01");
function ojpTabz(){
var    ruby = rt01.data("rubytabs");
    jQuery.each(rt01 , function(){
        "isAutoInit" : false,     
        "isSwipe" : false,
        "speed"      : 600,
        "pag"        : { "align" : "begin" }

    ruby.ev.on("init resize", function() {jQuery(document).foundation({interchange : 'reflow'}); });

I’m not sure where I should be putting the check for “init”. Also, there are two sets of tabs on the same page so maybe it is confused?

Hi smartpill,

+ If you set options in javascript, you do not set options in “data-tabs” attribute.
var rt01 = jQuery(".rt01");
function ojpTabz() {
    jQuery.each(rt01 , function() {
        var ruby = rt01.rubytabs({
            "isAutoInit" : false,
            "isSwipe"    : false,
            "speed"      : 600,
            "pag"        : { "align" : "begin" }

        ruby.ev.on("resize", function() {
            jQuery(document).foundation({interchange : 'reflow'});
+ Each the tabs have a separate “callback events”. If you only want one callback event, you can write:
var rt01 = jQuery(".rt01");
function ojpTabz() {
    var rubyLast = null;

    jQuery.each(rt01 , function() {
        rubyLast = rt01.rubytabs({
            "isAutoInit" : false,
            "isSwipe"    : false,
            "speed"      : 600,
            "pag"        : { "align" : "begin" }

    rubyLast && rubyLast.ev.on("resize", function() {
        jQuery(document).foundation({interchange : 'reflow'});

+ Callback event “init” not support in this version, I will fix it in next version.

Thank you for using the plugin.

Thank you! I would like to make a feature request. I would love the option to start with all tabs closed and have the option to add either a close button or click an active tab to close so that no content is showing. I’m using this for additional info on a homepage and having the option to hide the content until clicked and re-hide would be very useful.

Yes, I will make a new option to the next version.Thanks for the suggestion. :-)


bdthemes Purchased

Can you add support for icon with title? it’s not working now. when i try to add image icon it’s automatically set a width for text length (http://prntscr.com/dmgvy8).


I rechecked with the example: http://haibach.net/rubytabs/templates/example-title-with-icon.html
It still work ok!

Important note:
+ You shold set a fixed width for the icons in stylesheets.

You can sent me the source files, or the link online so that I can check more easier and find specific solutions for your Tabs.

Thank you using Ruby Tabs!


toesi Purchased

Hey their,

I love your tab module and I want to use it in a new client online shop. But I have one point which I can not figure out how to do that.

Is there a way to have vertical tabs with auto height so that the tab module is getting the height of its parent?

My problem is, I want to use your tabs in an responsive layer where I don’t know it’s height because it fits to the client screen. I want to expand the tabs automatically to the layers height. it seems that the sizeAuto option is not working with vertical mode cause its setting inline style height: 158px; by default.

It would be great if could help me with that feature.

Kind regards from Germany :)

Hi, thank you using plugin.

I’ll write a custom script to the height tabs fit the parent container and sent you immediately.


You can try the custom script to make the Ruby Tabs auto fit the parent container:
jQuery(document).ready(function($) {

    (function($) {
    'use strict';

        var $ruby   = $('.rt01'),
            $parent = $ruby.parent(),
            ruby    = $ruby.rubytabs();

        // Function Parse int the string
        function PInt(v) {
            return /^\-?\d+/g.test(v) ? parseInt(v, 10) : 0;

        // Function set style for the slides at first
        function SetStyleAtFirst() {
                'overflow-y' : 'auto'

        // Function get size of the parent ruby
        function GetSizeOfParent() {
            var style         = document.defaultView ? getComputedStyle($parent[0]) : $parent[0].currentStyle,
                height        = PInt(style['height']),
                borderTop     = PInt(style['border-top']),
                borderBottom  = PInt(style['border-bottom']),
                paddingTop    = PInt(style['padding-top']),
                paddingBottom = PInt(style['padding-bottom']);

            // Set height for Ruby
            var rubyHeight = height - borderTop - borderBottom - paddingTop - paddingBottom;
            ruby.update({ 'height': rubyHeight });

        // Function check ruby resize
        var tiResize, wParent = 0, hParent = 0;
        function CheckResize() {

            tiResize = setTimeout(function() {
                var wCur = $parent.width(),
                    hCur = $parent.height();

                // Reupdate Ruby: when show/hide scroll-bar browser
                if( Math.abs(wCur - wParent) > 1 || Math.abs(hCur - hParent) > 1 ) {
                    wParent = wCur;
                    hParent = hCur;
            }, 200);

        // Initialize
        var INIT = function() {

            // Set style at first

            // Get size of the parent ruby

            // Check window resize event
            $(window).on('resize', function() {

+ Using: change selector ”.rt01” to your tabs selector.
var $ruby = $('.rt01');

+ You can see the example : http://haibach.net/rubytabs/templates/example-auto-fit-parent.html

+ Using the module in Ruby Tabs : Change the main script Ruby Tabs
<script type="text/javascript" src="../ruby/rubytabs.js"></script> <!-- RubyTabs Plugins -->
by all the module script in modules folder:
<script type="text/javascript" src="../ruby/modules/rubytabs-core.js"></script> <!-- The module core of RubyTabs  -->
<script type="text/javascript" src="../ruby/modules/rubytabs-image.js"></script>
<script type="text/javascript" src="../ruby/modules/rubytabs-pagination.js"></script>
<script type="text/javascript" src="../ruby/modules/rubytabs-apimore.js"></script>

+ If you disable any features, then remove the module corresponding name.

- module-deeplinking.js : enable deep-linking features.
- - module-image.js : enable image & image-background lazyload.
- module-pagination.js : render markup and enable the title on Tabs.
- module-navigation.js : render markup and enable the button control next / previous slide.
- module-display.js : enable show / hide Tabs if using the option : “showBy”
- module-slideshow.js : enable slideshow in Ruby Tabs
- module-timer.js : render the timer in slideshow
- module-fxcss.js : enable the effect CssOne, CssTwo, CssFour
- module-fxmath.js : enable the effect math.

+ In the later version, I’ll imporve the module, automatically render script and load the necessary modules. It more easier.