Set height to that of tallest slide? #174

Closed
badfeather opened this Issue Jun 7, 2012 · 18 comments

Comments

Projects
None yet
@badfeather

When using horizontal and vertical images and having any content beneath the slider in the design, the height of the Flexslider changes to that of each slide, which causes the content beneath it to jump up and down. Is there any way to disable this, and instead have it maintain the height of it's tallest slide?

@tylerxo

This comment has been minimized.

Show comment Hide comment
@tylerxo

tylerxo Jun 7, 2012

Contributor

The default behavior of the "slide" animation is what you're looking for. Are you using a fading slider?

Contributor

tylerxo commented Jun 7, 2012

The default behavior of the "slide" animation is what you're looking for. Are you using a fading slider?

@badfeather

This comment has been minimized.

Show comment Hide comment
@badfeather

badfeather Jun 7, 2012

Hi. Thanks for the speedy reply. Yes, using a fading slider is there
any way to accomplish this?

On Thu, Jun 7, 2012 at 5:12 PM, Tyler Smith
reply@reply.github.com
wrote:

The default behavior of the "slide" animation is what you're looking for. Are you using a fading slider?


Reply to this email directly or view it on GitHub:
woothemes#174 (comment)

badfeather.com

Hi. Thanks for the speedy reply. Yes, using a fading slider is there
any way to accomplish this?

On Thu, Jun 7, 2012 at 5:12 PM, Tyler Smith
reply@reply.github.com
wrote:

The default behavior of the "slide" animation is what you're looking for. Are you using a fading slider?


Reply to this email directly or view it on GitHub:
woothemes#174 (comment)

badfeather.com

@tylerxo

This comment has been minimized.

Show comment Hide comment
@tylerxo

tylerxo Jun 7, 2012

Contributor

You could set a static height on the slider via CSS if your design is not responsive. Whatever height you prefer it to be. The reason it is jumping is because the slides are the only elements creating the height of the slider element. So, you could:

.flexslider {height: 500px;}

If your design is responsive, consider using the slide animation or coming up with a similar strategy that can flex with your design.

Contributor

tylerxo commented Jun 7, 2012

You could set a static height on the slider via CSS if your design is not responsive. Whatever height you prefer it to be. The reason it is jumping is because the slides are the only elements creating the height of the slider element. So, you could:

.flexslider {height: 500px;}

If your design is responsive, consider using the slide animation or coming up with a similar strategy that can flex with your design.

@badfeather

This comment has been minimized.

Show comment Hide comment
@badfeather

badfeather Jun 7, 2012

Thanks. Was trying to avoid a static height, in the hopes of keeping it responsive. Thought there might be an attribute that I could hook into that wasn't in the documentation. Good to know it works for the slide animations. Consider this a feature request;)

animateHeight: false

Thanks. Was trying to avoid a static height, in the hopes of keeping it responsive. Thought there might be an attribute that I could hook into that wasn't in the documentation. Good to know it works for the slide animations. Consider this a feature request;)

animateHeight: false
@tylerxo

This comment has been minimized.

Show comment Hide comment
@tylerxo

tylerxo Jun 7, 2012

Contributor

I'll try to think about a flexible solution that makes sense, and see if it has a place in the plugin core.

Contributor

tylerxo commented Jun 7, 2012

I'll try to think about a flexible solution that makes sense, and see if it has a place in the plugin core.

@tylerxo tylerxo closed this Jun 7, 2012

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Jan 22, 2013

It's so easy to fix this in a responsive way... I still don't get it why it isn't already integrated within Flexslider... here's the fix:

$(document).ready(function() {
    fixFlexsliderHeight();
});

$(window).load(function() {
    fixFlexsliderHeight();
});

$(window).resize(function() {
    fixFlexsliderHeight();
});

function fixFlexsliderHeight() {
    // Set fixed height based on the tallest slide
    $('.flexslider').each(function(){
        var sliderHeight = 0;
        $(this).find('.slides > li').each(function(){
            slideHeight = $(this).height();
            if (sliderHeight < slideHeight) {
                sliderHeight = slideHeight;
            }
        });
        $(this).find('ul.slides').css({'height' : sliderHeight});
    });
}

ghost commented Jan 22, 2013

It's so easy to fix this in a responsive way... I still don't get it why it isn't already integrated within Flexslider... here's the fix:

$(document).ready(function() {
    fixFlexsliderHeight();
});

$(window).load(function() {
    fixFlexsliderHeight();
});

$(window).resize(function() {
    fixFlexsliderHeight();
});

function fixFlexsliderHeight() {
    // Set fixed height based on the tallest slide
    $('.flexslider').each(function(){
        var sliderHeight = 0;
        $(this).find('.slides > li').each(function(){
            slideHeight = $(this).height();
            if (sliderHeight < slideHeight) {
                sliderHeight = slideHeight;
            }
        });
        $(this).find('ul.slides').css({'height' : sliderHeight});
    });
}
@badfeather

This comment has been minimized.

Show comment Hide comment
@badfeather

badfeather Jun 21, 2013

ghost, just saw your fixFlexsliderHeight function. It's awesome. Thanks.

ghost, just saw your fixFlexsliderHeight function. It's awesome. Thanks.

@andwiik

This comment has been minimized.

Show comment Hide comment
@andwiik

andwiik Oct 9, 2013

Great , thanks ghost!

andwiik commented Oct 9, 2013

Great , thanks ghost!

@wheelsailor

This comment has been minimized.

Show comment Hide comment
@wheelsailor

wheelsailor Jan 3, 2014

Newbie here - where exactly to put this code? If I put in flex-sider.php in the wordpress editor it causes errors, but can't see where else to put it.

Cheers

Newbie here - where exactly to put this code? If I put in flex-sider.php in the wordpress editor it causes errors, but can't see where else to put it.

Cheers

@enter360

This comment has been minimized.

Show comment Hide comment
@enter360

enter360 Jan 7, 2014

Where in the CSS do you set the height to a static height ?

enter360 commented Jan 7, 2014

Where in the CSS do you set the height to a static height ?

@wheelsailor

This comment has been minimized.

Show comment Hide comment
@wheelsailor

wheelsailor Jan 7, 2014

@andwiick - thanks for pointing out it is javascript and it needs to go in my themes javascript file.
@enter360 You don't - It works out for each slide and remembers the largest height value - see these 2 lines.
if (sliderHeight < slideHeight) {
sliderHeight = slideHeight;
}
But I am not sure where to specify a fixed light.

I got this code on my site - but still need to play with it (I think I have temporarily removed it at the moment). But I am not sure it will achieve what I want.
All my slide images are the same size. However when the browser window is small and it responsively changes it puts the text under the image. My problem is on the slides I have 2 or 3 lines of caption text and the rest of the page below the slider bounces up and down as the caption text resizes between two or three lines.
See www.bai.co.nz

@andwiick - thanks for pointing out it is javascript and it needs to go in my themes javascript file.
@enter360 You don't - It works out for each slide and remembers the largest height value - see these 2 lines.
if (sliderHeight < slideHeight) {
sliderHeight = slideHeight;
}
But I am not sure where to specify a fixed light.

I got this code on my site - but still need to play with it (I think I have temporarily removed it at the moment). But I am not sure it will achieve what I want.
All my slide images are the same size. However when the browser window is small and it responsively changes it puts the text under the image. My problem is on the slides I have 2 or 3 lines of caption text and the rest of the page below the slider bounces up and down as the caption text resizes between two or three lines.
See www.bai.co.nz

@kosepusen

This comment has been minimized.

Show comment Hide comment
@kosepusen

kosepusen May 23, 2014

i have a few images that are much taller than the others, can i fit them height wise to the frame, and not length ?

i have a few images that are much taller than the others, can i fit them height wise to the frame, and not length ?

@thirdender

This comment has been minimized.

Show comment Hide comment
@thirdender

thirdender Jul 15, 2014

I managed to get this working with the latest FlexSlider. The height of each slide is calculated when the window is resized so that it will be responsive. The maximum height of all the slides is set on the each slide and also as the property slider.h (so FlexSlider is aware of the new height).

jsFiddle Demo

The demo also initializes all DIV.flexslider elements on the page, and loads a limited number of options from HTML5 data-* attributes. The part of the code that handles responsive resizing of the vertical FlexSlider is:

    function fixHeight() {
      var maxHeight = 0,
          slides = el.find('.slides'),
          data = el.data('flexslider');
      slides.children()
        .height('auto')
        .each(function() {
          maxHeight = Math.max(maxHeight, $(this).height());
        })
        .height(maxHeight);
      slides.height(maxHeight);
      data && (data.h = maxHeight);
    }
    win.load(fixHeight);
    win.resize($.throttle ? $.throttle(250, fixHeight) : fixHeight);
    fixHeight();

et voilà

I managed to get this working with the latest FlexSlider. The height of each slide is calculated when the window is resized so that it will be responsive. The maximum height of all the slides is set on the each slide and also as the property slider.h (so FlexSlider is aware of the new height).

jsFiddle Demo

The demo also initializes all DIV.flexslider elements on the page, and loads a limited number of options from HTML5 data-* attributes. The part of the code that handles responsive resizing of the vertical FlexSlider is:

    function fixHeight() {
      var maxHeight = 0,
          slides = el.find('.slides'),
          data = el.data('flexslider');
      slides.children()
        .height('auto')
        .each(function() {
          maxHeight = Math.max(maxHeight, $(this).height());
        })
        .height(maxHeight);
      slides.height(maxHeight);
      data && (data.h = maxHeight);
    }
    win.load(fixHeight);
    win.resize($.throttle ? $.throttle(250, fixHeight) : fixHeight);
    fixHeight();

et voilà

@Alexkwatson

This comment has been minimized.

Show comment Hide comment
@Alexkwatson

Alexkwatson Aug 6, 2014

@thirdender Thank you! This is just what I was looking for.

@thirdender Thank you! This is just what I was looking for.

bnchdrff pushed a commit to workdept/flexslider_views_slideshow that referenced this issue Dec 12, 2014

@JMarqz

This comment has been minimized.

Show comment Hide comment
@JMarqz

JMarqz Apr 10, 2015

I'm using the @ghost solution, but for some reason not always is setting the height of the tallest image. When I reload my site, some times, take another height that is not the tallest. Somebody has the same problem? Somebody can help me? Thanks!

JMarqz commented Apr 10, 2015

I'm using the @ghost solution, but for some reason not always is setting the height of the tallest image. When I reload my site, some times, take another height that is not the tallest. Somebody has the same problem? Somebody can help me? Thanks!

@jeffikus jeffikus self-assigned this Apr 13, 2015

@stan333

This comment has been minimized.

Show comment Hide comment
@stan333

stan333 Dec 11, 2015

I find another solution, consisting of returning a div within the image in background instead of a < img >. Then I applied "background-size:cover;" to the div.

So in the code, I replace :

if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
. get_the_post_thumbnail( get_the_ID(), 'activello-slider' ) .

for :

if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
$feat_image_url = wp_get_attachment_url( get_post_thumbnail_id() );
echo '<div class="flexslideimg" style="background-image:url('.$feat_image_url.');"></div>';

stan333 commented Dec 11, 2015

I find another solution, consisting of returning a div within the image in background instead of a < img >. Then I applied "background-size:cover;" to the div.

So in the code, I replace :

if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
. get_the_post_thumbnail( get_the_ID(), 'activello-slider' ) .

for :

if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
$feat_image_url = wp_get_attachment_url( get_post_thumbnail_id() );
echo '<div class="flexslideimg" style="background-image:url('.$feat_image_url.');"></div>';
@AdalDesign

This comment has been minimized.

Show comment Hide comment
@AdalDesign

AdalDesign Mar 10, 2017

For some reason @ghost's solution didn't work out of the box for me... so I edited it to be more robust for my specific needs and came up with this (for the latest version of FlexSlider):

jQuery(document).ready(function() {

	setTimeout(function(){  // because the elements are created by JS, we need to wait before modifying them
		// Set fixed height based on the tallest slide
		jQuery('.flexslider').each(function(){
			var sliderHeight = 0;
			jQuery(this).find('.slides > li > a > img').each(function(){
				slideHeight = jQuery(this).height();
				if (sliderHeight < slideHeight) {
					sliderHeight = slideHeight;
					console.log( sliderHeight );
				}
			});
			jQuery(this).css({'min-height' : sliderHeight});
		});
	}, 4000);
});

For some reason @ghost's solution didn't work out of the box for me... so I edited it to be more robust for my specific needs and came up with this (for the latest version of FlexSlider):

jQuery(document).ready(function() {

	setTimeout(function(){  // because the elements are created by JS, we need to wait before modifying them
		// Set fixed height based on the tallest slide
		jQuery('.flexslider').each(function(){
			var sliderHeight = 0;
			jQuery(this).find('.slides > li > a > img').each(function(){
				slideHeight = jQuery(this).height();
				if (sliderHeight < slideHeight) {
					sliderHeight = slideHeight;
					console.log( sliderHeight );
				}
			});
			jQuery(this).css({'min-height' : sliderHeight});
		});
	}, 4000);
});
@cyclone747

This comment has been minimized.

Show comment Hide comment
@cyclone747

cyclone747 Jan 2, 2018

Use these function
end: function() {fixFlexsliderHeight();}
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is removed
init: function() {}

Use these function
end: function() {fixFlexsliderHeight();}
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is removed
init: function() {}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment