Title: Auto height
Last modified: August 22, 2016

---

# Auto height

 *  Resolved [larys](https://wordpress.org/support/users/larys/)
 * (@larys)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/auto-height-2/)
 * _I have another doubt;_
 * About the height of content. How I can do auto height? When I check “Allow height
   resize: when checked, full width slider will resize height proportionally”, the
   theme keep the height defined on “Slider height: the slider height in pixels”,
   so, the height isn’t showing correctly sometimes (article hidden when the article
   is bigger than the defined height, or, if the article is smaller, there was an
   large blank space).
 * Any way to fix it?
 * [https://wordpress.org/plugins/featured-articles-lite/](https://wordpress.org/plugins/featured-articles-lite/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [larys](https://wordpress.org/support/users/larys/)
 * (@larys)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/auto-height-2/#post-5694255)
 * _Please, someone can give a code to eliminate the fixed height for sliders? I
   tried on several ways, the height is always the same defined on settings page.
   How I can change it for auto height?_
 *  Plugin Author [CodeFlavors](https://wordpress.org/support/users/codeflavors/)
 * (@codeflavors)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/auto-height-2/#post-5694345)
 * Hi,
 * The height setting is correlated with the width setting, not the slide height.
   For example, if you set your slider to be 300X300px and allow full width and 
   height resize, if when displayed the fullwidth slider will have 800px width, 
   the height will also become 800px (1:1 ratio).
 * For now there’s no setting to resize the slider according to content inside it.
   You can modify the theme though to make it work as you need.
 * First step (optional but needed) is to create an additional slider themes folder
   inside wp-content to avoid having your changes overwritten when you will update
   the plugin on future releases. This process is described here: [How to move FA slider themes outside the plugin folder](http://www.codeflavors.com/documentation/intermediate-tutorials/moving-slider-themes-folder/).
 * Next, you will need to modify theme Simple starter.min.js (and starter.dev.js)
   like this (make sure you modify on the copy you made in your external folder):
 *     ```
       ;(function($){
       	$(document).ready( function(){
       		$('.fa_slider_simple').FeaturedArticles({
       			slide_selector 	: '.fa_slide',
       			nav_prev 		: '.go-back',
       			nav_next		: '.go-forward',
       			nav_elem		: '.main-nav .fa-nav',
       			effect	: false,
       			begin	: load,
       			before	: before,
       			after	: after,
       			stop	: stop,
       			start	: start
       		});
       	});
   
       	var load = function(){
       		var options = this.settings(),
       			self = this;
       		this.progressBar = $(this).find('.progress-bar');
       		this.mouseOver;
       		this.sliderHeight = $(this).height();
       		var h = $( this.slides()[0] ).find(options.content_container).outerHeight() + 40;
       		if( h > this.sliderHeight ){
       			$(this).css({'max-height':h}).animate({'height' : h}, { queue: false, duration:200 });
       		}else{
       			$(this).css({'max-height':this.sliderHeight}).animate({'height' : this.sliderHeight}, { queue: false, duration:200 });
       		}
       	}
   
       	var before = function( d ){
       		var options = this.settings();
       		this.progressBar.stop().css({'width':0});	
   
       		var h = $( d.next ).find(options.content_container).outerHeight() + 40;
       		if( h > this.sliderHeight ){
       			$(this).css({'max-height':h}).animate({'height' : h}, { queue: false, duration:200 });
       		}else{
       			$(this).css({'max-height':this.sliderHeight}).animate({'height' : this.sliderHeight}, { queue: false, duration:200 });
       		}
       	}
   
       	var after = function(){
       		var options 	= this.settings(),
       			duration 	= options.slide_duration;
   
       		if( this.mouseOver || this.stopped || !options.auto_slide ){
       			return;
       		}
   
       		this.progressBar.css({width:0}).animate(
       			{'width' : '100%'},
       			{duration: duration, queue:false, complete: function(){
       				$(this).css({'width':0});
       			}
       		});
       	}
   
       	var stop = function(){
       		this.progressBar.stop().css({'width':0});
       		this.mouseOver = true;
       	}
   
       	var start = function(){
       		this.mouseOver = false;
       		if( this.animating() ){
       			return;
       		}
   
       		var options 	= this.settings(),
       			duration 	= options.slide_duration;		
   
       		this.progressBar.css({width:0}).animate(
       			{'width' : '100%'},
       			{duration: duration, queue:false, complete: function(){
       				$(this).css({'width':0});
       			}
       		});
       	}
   
       })(jQuery);
       ```
   
 * Optionally, you can minify starter.min.js. This should be it, I tested this and
   it works by resizing the slider height according to each individual slide height
   when changing slides.
 *  Thread Starter [larys](https://wordpress.org/support/users/larys/)
 * (@larys)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/auto-height-2/#post-5694361)
 * _**THANK YOU** CodeFlavors!_
 * It’s perfect, works like a charm!
 * I am happy now. Thanks again for this **awesome support**!
 *  Plugin Author [CodeFlavors](https://wordpress.org/support/users/codeflavors/)
 * (@codeflavors)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/auto-height-2/#post-5694362)
 * My pleasure, this is a perfect example of what you can do with this plugin. I
   would appreciate it if you could give the plugin a rating and mark the ticket
   as resolved, thank you.
 *  Thread Starter [larys](https://wordpress.org/support/users/larys/)
 * (@larys)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/auto-height-2/#post-5694365)
 * _Done! 🙂_
 *  Plugin Author [CodeFlavors](https://wordpress.org/support/users/codeflavors/)
 * (@codeflavors)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/auto-height-2/#post-5694366)
 * Thank you, much appreciated. If you ever run into trouble with anything else,
   just let us know either here or on [our forums](http://www.codeflavors.com/codeflavors-forums/forum/featured-articles-3-0/).

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Auto height’ is closed to new replies.

 * ![](https://ps.w.org/featured-articles-lite/assets/icon-128x128.jpg?rev=1045881)
 * [FA Lite - WP responsive slider plugin](https://wordpress.org/plugins/featured-articles-lite/)
 * [Support Threads](https://wordpress.org/support/plugin/featured-articles-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/featured-articles-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/featured-articles-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/featured-articles-lite/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [CodeFlavors](https://wordpress.org/support/users/codeflavors/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/auto-height-2/#post-5694366)
 * Status: resolved