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
Post a Comment