Flexslider in tabbed panel gets messed up after browser window resize

Question

I have two Flexsliders inside two different panels of a javascript tabbed panel. It loads perfectly fine. However, if I resize my browser window by either turning my iPhone from portrait to landscape or resizing the window on my Macbook Pro, the Flexsliders often get messed up. This doesn't happen all the time but it will happen eventually if I keep resizing my browser window. You can see it easiest by turning an iPhone from portrait to landscape and then clicking on the other tab containing the other Flexslider as described below.

The two Flexsliders are in the first two tabs, "Commonweath & Council" and "Transmission Gallery." If the panel is open to Commonwealth & Council and I resize my browser window, the Flexslider will adjust accordingly and will be fine in the open panel. However, after I finish resizing my browser window, and click on the other tab that contains the second Flexslider (in this case, Transmission Gallery), that Flexslider will often be messed up. The main slider container will be larger and the image inside is oversized and cropped. Or in some cases, the main slider turns into a carousel slider like the one below it. Or the image in the main slider is off-centered. But then if I click outside of the browser window on my Macbook Pro and click back on the browser window, it will pop back into the correct display. On my iPhone, I would have to refresh the webpage to make it display correctly.

I'm thinking it has to do with the Flexslider in the other tab, which is not open, not being able to read the window size change and scale correctly? Though sometimes it works fine and sometimes it doesn't, so maybe it's a bug with Flexslider? But for sure it will happen the second or third time I resize the window or turn my iPhone from portrait to landscape.

http://jmoon.net/projects/phoenixrising/phoenixrising_p1.html

Answer 1

I ended up using Tweaky.com to fix my Flexslider issue. Below is the correct script to account for browser window resizing.

<script defer src="../../scripts/jquery.flexslider.js"></script>
<script>
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
    case 0:

        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            itemWidth: 80,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            sync: "#carousel"
        });

        //-----------------
        $(window).resize();
        //-----------------

        break;

    case 1:

        $('#carousel2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            itemWidth: 80,
            itemMargin: 5,
            asNavFor: '#slider2'
        });

        $('#slider2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            sync: "#carousel2"
        });

        //-----------------
        $(window).resize();
        //-----------------

    break;   
  }
}
});
})
</script>
<script type="text/javascript">
$(function() {
$('#slider').hover(function() {
$('.flex-caption').fadeToggle();
});

$('#slider2').hover(function() {
$('.flex-caption').fadeToggle();
});
});
</script>