WordPress.org

Ready to get started?Download WordPress

Forums

Testimonials by Aihrus
[resolved] Animate jumpy widget (18 posts)

  1. DSafari
    Member
    Posted 1 year ago #

    Could you please animate height (probably with some js + css animate).

    My testimonials widgets are all jumpy and and really wreck the flow of a page.

    Let me know when you can put this in :)

    http://wordpress.org/extend/plugins/testimonials-widget/

  2. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. DSafari
    Member
    Posted 1 year ago #

    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.

  4. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  5. DSafari
    Member
    Posted 1 year ago #

    Animated resizing of the div.

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

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

  6. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  7. DSafari
    Member
    Posted 1 year ago #

    That might be tricky...

  8. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  9. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  10. DSafari
    Member
    Posted 1 year ago #

    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.

  11. DSafari
    Member
    Posted 1 year ago #

    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

  12. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  13. DSafari
    Member
    Posted 1 year ago #

    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).

  14. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    Changed. Please test.

  15. DSafari
    Member
    Posted 1 year ago #

    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

  16. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

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

    Please try again from SVN trunk zip.

  17. DSafari
    Member
    Posted 1 year ago #

    Great. Thanks for implementing this :)

  18. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    I've pushed this out to my beta testers. Once they approve, I figure release on Monday.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic