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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to call a function with a button

    Hi probably a simple question for someone who knows what they are talking about... I have a neat testimonial script that automatically plays the next one in the list after a certain delay duration. All i require is a button that calls the function as well so users can scroll through them rather than waiting.

    The script can be seen here:

    http://www.begraphics.com/sites/fands/testimonials/

    And the function used to scroll through the testimonials is this:

    Code:
    (function showNextTestimonial(){
    		
    		// Wait for 7.5 seconds and hide the currently visible testimonial:
    		$('#testimonials li:visible').delay(7500).fadeOut('slow',function(){
    			
    			// Move it to the back:
    			$(this).appendTo('#testimonials ul');
    			
    			// Show the next testimonial:
    			$('#testimonials li:first').fadeIn('slow',function(){
    				
    				// Call the function again:
    				showNextTestimonial();
    			});
    		});
    	})();
    Thanks

    Eddie

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,253
    Thanks
    12
    Thanked 341 Times in 337 Posts
    not sure if this applies correctly to your problem, but you add a function to a button (in jQuery) like:
    Code:
    $("#button_id").on("click", doSomethingOnClick);
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for your response but I'm not sure how I can incorporate that with my function. 1 thing I have tried is replace the top of the code with the click function

    Code:
     $('#myLink').click(function showNextTestimonial(){
    Then tried to call this through a standard URL

    Code:
    <a id="myLink" href="#">next</a>
    But no joy

    :-(

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Anyone :-)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Quote Originally Posted by Eddie_E View Post
    Code:
     $('#myLink').click(function showNextTestimonial(){
    No, that won't work. You could do
    Code:
     $('#myLink').click(function() { showNextTestimonial() } )
    But that would still cause the 7.5 second delay after the click.

    I don't use jQuery, so there's surely a better way, but you could certainly simply duplicate the code:
    Code:
        $('#myLink').click(function() {			
    			// Move it to the back:
    			$(this).appendTo('#testimonials ul');
    			// Show the next testimonial:
    			$('#testimonials li:first').fadeIn('slow',function(){
    				// Call the delay:
    				showNextTestimonial();
    			});
    		});
    	}
    But I think that may cause more problems. Because under it all, your showNextTestimonial function is using a setTimeout() to trigger the change, so if the user clicks on the link after, say, 5 seconds, it will do an immediate change, *BUT* then the scheduled change will *ALSO* take place, 2.5 second later. *WORSE*, another change will take place 7.5 seconds after the onclick. And so on. The more times the user clicks, that shorter the time is going to get between delays.

    I suspect you will need to *NOT* use the jQuery delay and need to deal with a setTimeout "manually", so that you can cancel the pending one upon the onclick.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Again, I don't use jQuery, but I'll take a stab at this.
    Code:
    var repeat = null; // nust be global or scoped variable
    function showNextTestimonial( )
    {
        $('#testimonials li:visible').fadeOut('slow',
            function()
            {
                clearTimeout(repeat); // kill any existing timeout!! important!
                $(this).appendTo('#testimonials ul');
                $('#testimonials li:first').fadeIn('slow',
                      function(){ repeat = setTimeout(showNextTestimonial, 7500); } 
                );
            }
        );
    }
    // allow a click to force next, including killing existing timer
    $('#myLink').click(showNextTestimonial);
    // and then start it all up:
    repeat = setTimeout( showNextTestimonial, 7500 );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Eddie_E (06-06-2013)

  • #7
    New Coder
    Join Date
    May 2008
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This worked perfectly... thanks... :-) How hard would this be to append to include a previous button also?

    Eddie


  •  

    Posting Permissions

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