WordPress.org

Support

Support » Plugins and Hacks » Testimonials Widget » [Resolved] Animate jumpy widget

[Resolved] Animate jumpy widget

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author Michael Cannon

    @comprock

    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.

    Plugin Author Michael Cannon

    @comprock

    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.

    Plugin Author Michael Cannon

    @comprock

    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…

    Plugin Author Michael Cannon

    @comprock

    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.

    Plugin Author Michael Cannon

    @comprock

    Could you please try out http://downloads.wordpress.org/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

    Plugin Author Michael Cannon

    @comprock

    Could you please try out http://downloads.wordpress.org/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).

    Plugin Author Michael Cannon

    @comprock

    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

    Plugin Author Michael Cannon

    @comprock

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

    Please try again from SVN trunk zip.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Resolved] Animate jumpy widget’ is closed to new replies.
Skip to toolbar