search

pisi / Reel

The premier 360° solution for jQuery.
http://reel360.org
MIT License
690 stars 210 forks source link

responsive reel with display none #319

Closed paulhaem closed 6 years ago

paulhaem commented 8 years ago

Hello, I am working with tabs (the current pane is visible, the others are 'display: none'). Lets say I have two tabs / panes. The first one is the one you see when you open the page. The second holds the reel. When I load the page and switch to the second tab (with the reel embedded) it has no height thanks to the 'data-responsive="true"' but when I load the page with the second tab visible it is fully functional ... naturally. The 'display: none' let the reel initialize with a 0 height. I am not sure, why it still has the correct width.

I tried to reinitialize after clicking on a tab, but it does only do this after I clicked twice (another click after the tab is already open). Any ideas how to fix this or is this a serious bug?

joejemmely commented 7 years ago

You can try to trigger the resize event when the tab is activated.

$('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
    $('#myreel').trigger('resize');
})