HaiBach supports this item


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

56 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. :-)

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!

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 :)


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.

Thank you very much it works perfectly :)

Can’t wait to get the new version where this feature is included from scratch.

Thanks for your quick response and help!

Hi there,

I’m currently using rubytabs-lite and i’m just wondering how i save it…

there doesnt appear to be an option to do so

Any guidance is appreciated.

Thank you :)

Oh that’s no trouble at all! I suppose the issue i’m having is once I customize the tabs and put in the info, there seems to be no option to save the completed work, even navigating away from the page does not prompt the “unsaved work” notice haha

It does seem to be a bit cut off along the bottom where “preview” and “new” are, i’m not sure if the save button is just hidden beneath or….


Oh, when you create new a tabs at first, button “save” is “create new”.

I will add a notification when the work not save in the next version. Thank you using plugin :-)

Oh! Okay! Thank you so much! Thank you for making it :) have a great day!

Hi, In mobile touching, when you scroll the page, if touch rubytabs, rubytabs change. I only touching for page up, page down. I dont want to click ruby tabs, only scrolling.

But ruby tabs work, and change the tab.

How can solve the problem ?

Hi, In the current version, when you touching on the tabs title for page up-down, Ruby Tabs still chnage to that tabs.

If the problem is that, i will fixed it in later version.


Our problem is, i touching screen for page scrolling on mobile. I dont want to touch ruby tabs, while trying to scroll the page.

I accidentally pressed, tabs is very sensitive on mobile. Can you solve the problem ? And email to us.

Best regards

Hello… i picked up the vertical layout…on mobile phones still shows as vertical…!!! it should transform to horizontal as per demo… how to i do that??!! Thanks

Hello Hai Bach, I really like your tab. But unfortunately, after purchasing it, I don’t know how to use it for wordpress (My web is based on Wordpress). I have read your Documentation. I have created RubyTabs plugin to insert main scripts to wordpress. And I don’t know what to do next? Please help me, Thanks,

P/s: I’m Vietnamese. Are you Vietnamese? Your name sounds like a Vietnamese name :)

hi, i’m try to building a swipe tabs like this: https://codepen.io/gbhasha/pen/gaggRR

i need to build a calendar for soccer match. Can you script help me? from your demo i can’t see example like on my link. I need swipe functionality both for tab and for tab-bar moreover when we swipe on the tabs the relative tab-bar have to move (synchronously) and centered in the bar.

Hello, Is the php file a necessary file for the functionality of the tab navigation? I’m interested in implementing this plugin into a hybrid mobile application that can’t handle PHP files effectively.

Hi! Can I change color of tabs?



Can this tabs change the color? If yes, Could you please explain how to change the color.


Is this used as wordpress plugin or not??

Hello, we plan to buy the extended version of your Item. Am i allowed then to use it as a part of my own product and to resell it further? We would like to integrate into one of our plugins?

Greetings, Sami

Is posible combine vertical and horizontal tabs and load the content in the content area?
Like this?