Final height after finish loading

[Messa1]

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.

[gijsroge]

Could you provide a codepen to demonstrate the issue perhaps?

[Messa1]

In a codepen everything works fine. http://codepen.io/anon/pen/OyzGwP

I will check also my other jquery code. When i found the problem i will post a comment.

//// When i comment some other jquery out i works. But also the position of the tabs make some change. For example when i put i above the slider it works.

So i use my Quick & Dirty fix for now.

var height = $( ".tab__content-item.active" ).outerHeight();
$( ".js-tabs-height" ).height(height);

[z1haze]

I can confirm this bug as well.. Not sure how to fix it.. The active tab has a larger height than the .js-tabs-height ... can you please fix

[gijsroge]

Provide me with a codepen that replicates the bug so I can debug. Thanks!

[Sim3k86]

I have the same problem. After web page loads, tabs have larger height than .js-tabs-height After changing tabs and going back to first one, it seems fixed, but after site refresh it's bad again.

This bug is NOT possible to replicate on CodePen as @Messa1 stated above, it's possible to get that bug only on production/development site.

If you would be willing to debug live site, I can make you an admin account on my Wordpress website.

Btw. have a look at: http://kari.sim3k86.linuxpl.eu/oferta/ You should understand what the bug is.

Waiting for answer, Cheers.

[gijsroge]

@Sim3k86 Try initiating tabtab on window.load.

[Sim3k86]

@gijsroge sorry for late answer.

I was initiating tabtab on load event from the beggining. Below script (except last 2 lines - yesterday's "Messa1 Quick & Dirty fix" which works) was placed before </body>

jQuery(window).load(function() {
    jQuery(".produkty").tabtab({
        startSlide: 1,
        animateHeight: true,
        fixedHeight: false,
        scale: 1,
        rotateX: 0,
        speed: 500,
        transformOrigin: "center right",
        rotateY: -90,
        easing: "easeInOutCubic",
        translateX: 0,
        tabMenu: ".menu-produkty",
        tabContent: ".zawartosc-produkty"
    })
var height = jQuery( ".zawartosc-produkt.active" ).outerHeight();
jQuery( ".js-tabs-height" ).height(height);
});

Like I wrote in my last message.. I can give you temporary access to website, on which you can debug that error.

[ctiki]

Have you solved this problem?

[Sim3k86]

I've left it with above modified script, you can check how it works on http://kari.sim3k86.linuxpl.eu/oferta/