I am using FlexSlider2 on a fixed width site, but am trying to make a button for a "full screen" view. Basically, all the button does is change the main site's container div to be 100% width and hide other site elements.
Here is my code for the button's function:
$('.fullscreen-toggle').click(function() {
$('#container').toggleClass('full-width', 0);
$('#header').toggleClass('hide', 0);
$('#menu').toggleClass('hide', 0);
$('#lower-content').toggleClass('hide', 0);
$('.fullscreen-toggle span').toggle();
});
The problem I'm having is FlexSlider only adjusts its image/slide width when the window is resized or when it's brought in and out of focus (by changing browser tabs). I've been unable to find a way to "reload" FlexSlider when the button is clicked so the images are full width. Right now when the button is clicked multiple slides are shown at a time, like this: http://img202.imageshack.us/img202/5308/flexsliderresizeissue.jpg
Things I've tried:
- This plugin: benalman (com) /projects/jquery-resize-plugin/ (link removed to meet min link requirement)
- Using .load() to try to refresh the script (don't think that's the intended function of .load, but I tried anyway :S)
- Including the
$('#slider').flexslider();call in the .click() function again - Other variations of the things above, and maybe some I can't even remember! I've been at this for awhile now
I apologize I can't link directly to the site, but if you need anymore information please let me know.
Update
Adding $('ul.slides li').css("width", $('#container').width() + "px"); to my .click function gets the images to be the right size, however, two slides are still shown at once. This time they're split perfect in half.
Update 2 Flexslider CSS: http://pastebin.com/zVk82NkK
