For a project we are building a responsive flexslider. Initially the flexslider has a height of 0px. When we resize the browser then the correct height is set.

We've found this issue in the flexslider issue queue:
https://github.com/woothemes/FlexSlider/issues/278

Attached is a patch that moves the initialization from drupal behaviors to window.load such that the images are loaded correct.

Files: 
CommentFileSizeAuthor
#21 0001-Issue-2086525-by-alvar0hurtad0-Johnny-vd-Laar-Flexsl.patch2.75 KBalvar0hurtad0
Test request sent.
[ View ]
#15 0001-Issue-2086525-by-alvar0hurtad0-Johnny-vd-Laar-Flexsl.patch2.75 KBalvar0hurtad0
Test request sent.
Previous result: FAILED: [[SimpleTest]]: [MySQL] 100 pass(es), 44 fail(s), and 0 exception(s).
[ View ]
#1 smooth-height-0px.patch2.34 KBJohnny vd Laar
FAILED: [[SimpleTest]]: [MySQL] 100 pass(es), 44 fail(s), and 0 exception(s).
[ View ]
smooth-height-0px.patch0 bytesJohnny vd Laar
FAILED: [[SimpleTest]]: [MySQL] 100 pass(es), 44 fail(s), and 0 exception(s).
[ View ]

Comments

Johnny vd Laar’s picture

StatusFileSize
new2.34 KB
FAILED: [[SimpleTest]]: [MySQL] 100 pass(es), 44 fail(s), and 0 exception(s).
[ View ]

And a patch that includes actual code.

berliner’s picture

Status:Active» Needs review

Status:Needs review» Needs work

The last submitted patch, smooth-height-0px.patch, failed testing.

berliner’s picture

Status:Needs work» Reviewed & tested by the community

The patch applies properly and it solves the problem for me.
Tests also fail without the patch applied. So there must be something wrong with the tests. This is probably related to #1935156: Update tests to match changes in 2.x.

berliner’s picture

Status:Reviewed & tested by the community» Needs work

After applying the patch the slide area flickers on page load.

Chimos’s picture

+1
I have this problem too with alpha 1. On load (only sometimes), it doesen't fit the height of the image. When I skip to next image it adapts to actual height.
It happens too slideshows in full nodes and in views blocks too (both have smooth height active).
I'm sorry I can't provide more help. I'm not familiar with patches yet.

minorOffense’s picture

I don't want to bind on window load since instances where images may be refreshed via Ajax (I.e. View with exposed filters and Ajax refresh) would break.

Is there a behavior in drupal we can listen on which is similar to window.load?

daroos’s picture

Status:Needs work» Needs review

1: smooth-height-0px.patch queued for re-testing.

Status:Needs review» Needs work

The last submitted patch, 1: smooth-height-0px.patch, failed testing.

minorOffense’s picture

gittosj’s picture

Issue summary:View changes

Its a bug in the JS code which may have been fixed in the dev branch - see here:

https://github.com/woothemes/FlexSlider/issues/436

However i've just pulled and tested it and can;t see any difference from 2.2.2

alvar0hurtad0’s picture

smooth-height-0px.patch queued for re-testing.

The last submitted patch, smooth-height-0px.patch, failed testing.

dancastellon’s picture

For anyone with this issue, for now you can apply this jQuery fix:

$(window).load(function() {
  $('.flex-viewport').each(function() {
    var first_image_height = $(this).find('ul.slides li:first-child img').css('height');
    $(this).css('height', first_image_height);
  })
});
alvar0hurtad0’s picture

Status:Needs work» Needs review
StatusFileSize
new2.75 KB
Test request sent.
Previous result: FAILED: [[SimpleTest]]: [MySQL] 100 pass(es), 44 fail(s), and 0 exception(s).
[ View ]

Re-patching

Status:Needs review» Needs work
alvar0hurtad0’s picture

smooth-height-0px.patch queued for re-testing.

The last submitted patch, smooth-height-0px.patch, failed testing.

alvar0hurtad0’s picture

Version:7.x-2.0-alpha3» 7.x-2.x-dev
alvar0hurtad0’s picture

Status:Needs work» Needs review
alvar0hurtad0’s picture

StatusFileSize
new2.75 KB
Test request sent.
[ View ]

Ok, Mr QA can you review the patch, please?

screeno’s picture

I just want to report that I applied the patch given in #1 and it appears to have solved a problem with the first slide only partially loading. Additionally, it also cleared up a problem with the slideshow causing the browser to freeze when viewed on my iPhone.

scuba_fly’s picture

Status:Needs review» Reviewed & tested by the community

#21 is working for me. Thanks!

grossmann’s picture

#21 is working for me too.

I am not sure if .bind is ajax safe. With jQuery >1.7 we could use .on as stated here: http://stackoverflow.com/a/20246940 which should work with ajax. Maybe .ajaxSuccess is a solution for content loaded through an ajax request.
I am not using ajax in my sliders so I didn't test this.

mErilainen’s picture

Works for me also.

jerry’s picture

Status:Reviewed & tested by the community» Needs work

For what it's worth, this issue still exists in 7.x-2.0-rc1 and its associated -dev. using library version 2.5.0. Patch in #21 no longer applies and probably requires a re-roll. JS snippet in #14 does work if .flex-viewport is replaced with .flexslider. Obviously, the AJAX compatibility issue is still unresolved.