Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Sliding divs

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    160
    Thanks
    71
    Thanked 1 Time in 1 Post

    Sliding divs

    Hi guys, have a slight problem. I have a wordpress loop that produces testimonials in the form of
    Code:
    <a class="testimonial-link" href="<?php bloginfo('url'); ?>/testimonials">
        <div class="testimonial-title">
            <div class="wrapper">
                <div class="testimonial-wrapper">
                    <h2 id="testimonial">TESTIMONIALS:</h2>
                    <p class="testimonial-inner">
                        Some Testimonial
                    </p>
                    <p class="testimonial-name">Some Name</p>
                </div>
            </div>
        </div>
    </a>
    So for each testimonial it will produce the above, so I might have several on them underneath each other on a page. I only want to display one at a time, and have them fade into each other. So at the moment I am trying
    Code:
        
            var divs = $('.testimonial-link').hide();
            function fade($ele) {
                divs.fadeIn(6000).delay(3000).fadeOut(6000, function() {
                    var $next = $(this).next(divs);
                    fade($next.length > 0 ? $next : $(this).parent().children().first());
                });
            };
    
            fade(divs).first();
    It seems to display all my testimonials still, and fades them out and back in. Its not displaying them one at a time though and I cant work out why.

    Any assistance would be greatly appreciated.

    Cheers

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    If you want to search we did have this before and the answer was great as I recall. Wish I saved it. Here is my stab at it. Notice I encased the anchor in yet another div. I added background colors to aid in seeing the effect, they can and should be removed. I also altered the text. See what you can do fiddling with it.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>New document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $i=1;
    $j=2;
    function change(){
        $("#testimonial_div"+$i).fadeTo(3000,0.0);
    	$("#testimonial_div"+$j).delay("slow").fadeTo("slow",0.99);
    	$i++;
    	$j++;
    	if($j==5){
    		$i=4;
    		$j=1;
    	}
    	if($i==5){
    		$i=1;
    		$j=2;
    	}
    }
    </script>
    </head>
    
    <body>
    <div id="testimonial_div1" style="opacity:1;position:absolute;top:0;left:0;background-color:gray">
    <a class="testimonial-link" href="<?php bloginfo('url'); ?>/testimonials">
    <div class="testimonial-title">
    <div class="wrapper">
    <div class="testimonial-wrapper">
        <h2 id="testimonial">TESTIMONIALS:</h2>
        <p class="testimonial-inner">
            Some Testimonial
        </p>
        <p class="testimonial-name">Some Name</p>
    </div>
    </div>
    </div>
    </a>
    </div>
    
    <div id="testimonial_div2" style="opacity:0.0;position:absolute;top:0;left:0;background-color:green">
    <a class="testimonial-link" href="<?php bloginfo('url'); ?>/testimonials">
    <div class="testimonial-title">
    <div class="wrapper">
    <div class="testimonial-wrapper">
        <h2 id="testimonial">TESTIMONIALS:</h2>
        <p class="testimonial-inner">
            The Second Testimonial
        </p>
        <p class="testimonial-name">Some Name</p>
    </div>
    </div>
    </div>
    </a>
    </div>
    
    <div id="testimonial_div3" style="opacity:0;position:absolute;top:0;left:0;background-color:yellow">
    <a class="testimonial-link" href="<?php bloginfo('url'); ?>/testimonials">
    <div class="testimonial-title">
    <div class="wrapper">
    <div class="testimonial-wrapper">
        <h2 id="testimonial">TESTIMONIALS:</h2>
        <p class="testimonial-inner">
            The Third Testimonial
        </p>
        <p class="testimonial-name">Some Name</p>
    </div>
    </div>
    </div>
    </a>
    </div>
    
    <div id="testimonial_div4" style="opacity:0.0;position:absolute;top:0;left:0;background-color:teal">
    <a class="testimonial-link" href="<?php bloginfo('url'); ?>/testimonials">
    <div class="testimonial-title">
    <div class="wrapper">
    <div class="testimonial-wrapper">
        <h2 id="testimonial">TESTIMONIALS:</h2>
        <p class="testimonial-inner">
            The Fourth Testimonial
        </p>
        <p class="testimonial-name">Some Name</p>
    </div>
    </div>
    </div>
    </a>
    </div>
    <input type="button" value="PUSH" onclick="change();" style="position:absolute;top:130px
    " />
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •