CODEWITHSUNDEEP
jquery
Dean Elliott
Dean Elliott

Reputation: 729

Issue with Flexslider's window resize

I'm using WooTheme's Flexslider plugin to showcase a slideshow of images.

By default the slideshow is hidden using .hide() and this seems to be causing some problems.

If you see this test site and click on the first thumbnail you can see that the large image that appears in the overlay is aligned to the right. Now if you open another tab and then go back to the test site the image is centered (as it should be).

I was told that the issue was down to Flexslider assigning a width of 0 to elements that aren't visible on page load. Now jQuery really isn't my thing, but if there's a way around this could someone give me a clue?

Here is the full Flexslider script if that helps

Upvotes: 1

Views: 1400

Answers (1)

Robert McKee
Robert McKee

Reputation: 21487

You will need to tell the flexslider to manually resize itself when you show it. Something like:

$(this).data('flexslider').resize();

Also, just a suggestion for your site: You are assuming that all browser windows that are less than some width are mobiles with touch capabilities, and hiding the navigation arrows and adding the text "swipe to...". Not everyone browses the web on their PC's full screen, and it triggers your logic. For example, my PC doesn't have a touch screen, and I can't swipe with it. You would be better off detecting if the machine and browser supports touch if that is what you really want to do. My sites use modernizr to do detect touch capable devices.

Upvotes: 1

Related Questions