jquery - Update FlexSlider2 width when container width is set to 100% on button click -


i using flexslider2 on fixed width site, trying make button "full screen" view. basically, button change main site's container div 100% width , hide other site elements.

here code 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 flexslider adjusts image/slide width when window resized or when it's brought in , out of focus (by changing browser tabs). i've been unable find way "reload" flexslider when button clicked images full width. right when button clicked multiple slides shown @ time, this: http://img202.imageshack.us/img202/5308/flexsliderresizeissue.jpg

things i've tried:

  • this plugin: benalman (com) /projects/jquery-resize-plugin/ (link removed meet min link requirement)
  • using .load() try refresh script (don't think that's intended function of .load, tried anyway :s)
  • including $('#slider').flexslider(); call in .click() function again
  • other variations of things above, , maybe can't remember! i've been @ awhile now

i apologize can't link directly site, if need anymore information please let me know.

update adding $('ul.slides li').css("width", $('#container').width() + "px"); .click function gets images right size, however, 2 slides still shown @ once. time they're split perfect in half.

update 2 flexslider css: http://pastebin.com/zvk82nkk

on flexslider.css file have line?

.flexslider .slides img {width: 100%; display: block;} 

i think keeping width: 100% enough have 1 image sliding each time.


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -