Animate jumpy widget

Huh? Got an example or URL of problem page?

I’m guessing that the testimonial height fluctuates. If so, then put a smaller char_limit on the widget, like 250 and set a height of 250. Experiment further as needed.

Hi Michael,

It’s on a dev site, so no examples besides using a limited width widget which would have varying height for each testimonial.

I dug into your code and it was an easyish fix. From line 728 of testimonials-widget.php please add:

<script type="text/javascript">
var tpadding = $('.testimonials-widget-testimonials').height() - $('.testimonials-widget').height();

function nextTestimonial{$widget_number}() {
	if ( ! jQuery('.{$id_base}').first().hasClass('hovered') ) {
		var active = jQuery('.{$id_base} .active');
		var next   = (jQuery('.{$id_base} .active').next().length > 0) ? jQuery('.{$id_base} .active').next() : jQuery('.{$id_base} .testimonials-widget-testimonial:first');

		active.fadeOut(1250, function(){
			active.removeClass('active');
			next.fadeIn(500);
			next.removeClass('display-none');
			next.addClass('active'); 						

			$('.testimonials-widget-testimonials').animate({
			height: next.height() + tpadding
			});

		});
	}
}

If you can’t add this (or similar) please let me know as I can just fork your code for myself – but I figure others will want this too.
Just 4 new lines of js.

I’m still really curious what you’re trying to accomplish that this solves.

Why doesn’t adjusting the character limit and heigh properly help?

Animated resizing of the div.

See:
https://s3.amazonaws.com/DigitalSafari/animatetestimonials.mov

Your code makes all widgets below jump around without the animation.

Ah, now it get it. Thank you for pointing this out.

Now, I’ll try to figure out how to account for multiple widgets on a page.

That might be tricky…

For now, while I try to figure out something smoother, you can put your customizations into filter so that the plugin code can be updated safely.

I call the filter like so, $scripts = apply_filters( 'testimonials_widget_testimonials_js', $scripts, $testimonials, $atts, $widget_number );. You can work from that what you need further.

Could you please try out https://downloads.www.ads-software.com/plugin/testimonials-widget.zip?

It has the animate in place now. I’m not totally happy with the first animation. It still jumps, but all the rest seem solid.

Sorry this version doesn’t take into account .testimonials-widget-testimonials padding and borders so it ends of being to small for the container.

My version had tpadding variable to take this into account.

This new code below now works perfectly for me and also takes into account the first animation now.

<script type="text/javascript">
var {$tw_wrapper} = jQuery('.{$id_base}');
tpadding = {$tw_wrapper}.height() - $('.testimonials-widget').height(); //tpadding is the difference in height to take into account all styling options
{$tw_wrapper}.height({$tw_wrapper}.height()); //fixes first animation by defining height to adjust

function nextTestimonial{$widget_number}() {
	if ( ! jQuery('.{$id_base}').first().hasClass('hovered') ) {
		var active = jQuery('.{$id_base} .active');
		var next   = (jQuery('.{$id_base} .active').next().length > 0) ? jQuery('.{$id_base} .active').next() : jQuery('.{$id_base} .testimonials-widget-testimonial:first-child');

		active.fadeOut(1250, function(){
			active.removeClass('active');
			next.fadeIn(500);
			next.removeClass('display-none');
			next.addClass('active');
			{$tw_wrapper}.animate({ height: next.height() + tpadding}); //added padding
		});
	}
}

Edit: added code tags

Could you please try out https://downloads.www.ads-software.com/plugin/testimonials-widget.zip?

I’ve modified your adaptions for multiple widgets. I appreciate the initial height fit.

Do note that if any of the height options are set, then the animate code is disabled.

Just checked and your code wrecks the first testimonial size – it’s too small.

Change line 764 to:
{$tw_wrapper}.height( {$tw_wrapper}.height() );

It’s just supposed to specify the css height of itself, not the active testimonial div (which is smaller).

Changed. Please test.

Change line 764:
{$tw_wrapper}.height( jQuery('.{$tw_wrapper}').height() );
to:
{$tw_wrapper}.height({$tw_wrapper}.height());

Your code doesn’t define height of tw_wrapper on start and it’s still jumpy on the first transition.

My code (2nd above) is smooth

Argh…?getting tired. Fixed and seems much smoother on first as you suggested.

Please try again from SVN trunk zip.