Can someone figure out why my Second tab isnt loading...


#1

Using Bootstrap Tabs, and I cannot get the second tab loading. The images that is on right hand side.

Any suggestions link here

Not sure if it is because the dom has loaded, or hmmm just baffled. The images arent loading correctly. But if I navigate to another browser tab and back again, it loads lol.

Ste


#2

It’s a flex slider issue when used on initially hidden elements (like tabs).

You can find more about the issue and the fix (the last post on the page it’s the fix) here:


#3

edit: greenline beat me to it! :slight_smile:

Second tab images display here, but the slider doesn’t work, seems to be a flexslider issue when the target is hidden:

https://www.google.com.au/search?q=flexslider+in+tabs


#4

@greenline Cheers, hmm tried that. Buggered if I could figure out that last guys response. I will keep fiddling, thankyou.

@Dave Cheers, yeah seems to be some issue ( event firing ) or whatever.


#5

still struggling on this its so bloody annoying arghhh :frowning:

I noticed. That if i load the page, click the second bootstrap tab, obviously gallery doesnt load correctly… but if I resize the browser window slightly, the darn thing kicks in !

Go figure :frowning:


#6
Australia said

but if I resize the browser window slightly, the darn thing kicks in !

there’s your solution!


#7
$('.nav-tabs a').each(function() {
    var $this = $(this);
    $this.click(function (e) {
        e.preventDefault();
        $this.tab('show');
        $($this.attr('href')).find('.flexslider').data('flexslider').resize();
    });

});

:slight_smile:

calls the flexslider resize() method each time a tab is activated

ps: there’s probably a better way to find out if a tab is activated, but this works.


#8

ahhh Dave cheers, perfect thanks :wink: