gijsroge / tabtab.js Goto Github PK

Its seems like that the height change after a second after all content is loaded.
In my test example is the content element (js-tabs-height) height 124 px;
And after everything is loaded and a second it change value to 145 px;

I checked with document ready.

$( document ).ready(function() {
    console.log( "ready!" );
});

The "ready!" is listed before the change appears.
I think there is some process problems with outerHeight().

I fix it for now for me with get the outerHeight after all TabsElements are defined.

window.$ = window.jQuery = require('jquery');

import velocity from 'velocity';
import tabtab from 'tabtab.js';

class Tabular
{
constructor(){

}

}

export default Tabular;

Compile using browserify

In the setting is not specified - fixedHeight: false
This caused problems

Hi Gijsroge,

As mentioned it would be nice to have an option to set a time (in millisecond) that will auto rotate between the tabs :-) this would be very useful for a "dashboard" sort of projects.

cheers,
Tan

Can you provide some example markup on the github page? its hard to tell whats actual markup/css and whats been injected with the javascript. thank you

Hi there!!

Didn't know if this was still being maintained at all, but I have an issue on a client site that I need to get resolved as soon as possible. I built some accordions and such inside of Tabs on this page:

http://pns.creativefuse.org/services/dogs/

Not only does the tab height not flex to meet the needs of the content ( it is just defaulting to the height of the tallest tab as is evident when swapping between the Services and Surgeries tab ), but the tab height isn't flexing as accordions open and close. See attached.

Here are my settings for the tabs in question:

`$('.c-tabs').tabtab({

    tabMenu: '.c-tabs__menu',             // direct container of the tab menu items
    tabContent: '.c-tabs__panels',       // direct container of the tab content items
    next: '.c-tabs__controls__next',       // next slide trigger
    prev: '.c-tabs__controls__prev',       // previous slide trigger

    startSlide: 1,                      // starting slide on pageload
    arrows: false,                       // keyboard arrow navigation
    dynamicHeight: true,                // if true the height will dynamic and animated.
    useAnimations: true,                // disables animations.

    easing: 'ease',                     // http://julian.com/research/velocity/#easing
    speed: 450,                         // animation speed
    slideDelay: 200,                      // delay the animation
    perspective: 1200,                  // set 3D perspective
    transformOrigin: 'center',          // set the center point of the 3d animation
    perspectiveOrigin: '50% 50%',       // camera angle

    translateY: 0,                      // animate along the Y axis (val: px or ‘slide’)
    translateX: 1500,                     // animate along the X axis (val: px or ‘slide’)
    scale: 1,                           // animate scale (val: 0-2)
    rotateX: 0,                        // animate rotation (val: 0deg-360deg)
    rotateY: 0,                         // animate Y acces rotation (val: 0deg-360deg)
    skewY: 0,                           // animate Y skew (val: 0deg-360deg)
    skewX: 0,                           // animate X skew (val: 0deg-360deg)

});`

Help would be much appreciated here :))

This cool plugin/demo/velocity.js implementation widgety thingy is cool and all but it talks about a css file that simply is not where it claims.

The link is dead.