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 13 of 13
  1. #1
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    188
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Question Jquery Calling a function within a function

    Hey all i am trying to find a way to add a call to pause this image slider. Currently it only pauses when you roll you mouse over the image. Once you roll off the image the slide show continues.

    The start of the slider code is:
    Code:
    ;(function($) {
        $.fn.leanSlider = function(options) {
        
        // Defaults
            var defaults = {
                pauseTime: 4000,
                pauseOnHover: true,
                startSlide: 0,
                directionNav: '',
                directionNavPrevBuilder: '',
                directionNavNextBuilder: '',
                controlNav: '',
                controlNavBuilder: '',
                prevText: 'Prev',
                nextText: 'Next',
                beforeChange: function(){},
                afterChange: function(){},
                afterLoad: function(){}
            };
    
            var init = function() {
    
            // Set up pauseOnHover
                if(settings.pauseOnHover && settings.pauseTime && settings.pauseTime > 0){
                    slider.hover(
                        function () {
                            clearTimeout(timer);
                        },
                        function () {
                            doTimer();
                        }
                    );
                }
           };
           
           //More code here....
       };    
    })(jQuery);
    I've been trying to call it from a onClick button like so:
    Code:
        $.fn.init.slider.clearTimeout();
    But that just throws an error... What am i missing?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    That can't be right.

    First of all, clearTimeout() is *NOT* a local-to-your-code function. It's actually a method on window: window.clearTimeout( )

    And then your "path" has to be wrong.

    You start with this:
    Code:
    $.fn.leanSlider = function(options) {
    So the path to ANTHING in there is going to be $.fn.leanSlider.xxxx

    So you are going to want to do something like
    Code:
        clearTimeout( $.fn.leanSlider.???.timer );
    The ??? indicates I don't know at what "level" in your code the variable timer is declared. You don't show it in the code you posted.
    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.

  • #3
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    188
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Its just right above the mouseover code:
    Code:
    // Set up plugin vars
            var plugin = this,
                settings = {},
                slider = $(this),
                slides = slider.children(),
                currentSlide = 0,
                timer = 0;

  • #4
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    188
    Thanks
    14
    Thanked 0 Times in 0 Posts
    And the doTimer is right outside the init.
    Code:
    // Process timer
            var doTimer = function(){
                if(settings.pauseTime && settings.pauseTime > 0){
                    clearTimeout(timer);
                    timer = setTimeout(function(){ plugin.next(); }, settings.pauseTime);
                }
            };

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Quote Originally Posted by StealthRT View Post
    Its just right above the mouseover code:
    Code:
    // Set up plugin vars
            var plugin = this,
                settings = {},
                slider = $(this),
                slides = slider.children(),
                currentSlide = 0,
                timer = 0;
    Well, of course. And the mouse over code is in the zamitz function which is in the foofrah function.

    So clearly you need to use
    Code:
        clearTimeout( $.fn.leanSlider.foofrah.zamitz.timer );
    Ahhh...I see you added that bit about where the doTimer() function is.

    How can it be "outside the init"? Do you mean "at the same level as init"?

    If so, then *probably* you just need
    Code:
        clearTimeout( $.fn.leanSlider.timer );
    But getting your code in bits and drabbles makes it hard to be sure.
    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
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    188
    Thanks
    14
    Thanked 0 Times in 0 Posts

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Were I you, I'd create a stopTimer() function in the object and export it so it can be called from the outside world.
    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.

  • #8
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    188
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, of course. And the mouse over code is in the zamitz function which is in the foofrah function.

    So clearly you need to use
    Code:
        clearTimeout( $.fn.leanSlider.foofrah.zamitz.timer );
    Ahhh...I see you added that bit about where the doTimer() function is.

    How can it be "outside the init"? Do you mean "at the same level as init"?

    If so, then *probably* you just need
    Code:
        clearTimeout( $.fn.leanSlider.timer );
    But getting your code in bits and drabbles makes it hard to be sure.
    I have no idea where you got $.fn.leanSlider.foofrah.zamitz.timer unless your just trying to make a joke and/or make fun of....

    And for
    Code:
    clearTimeout( $.fn.leanSlider.timer );
    I get undefined

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Yes, it was a joke. I hadn't seen your post #4 when I started to write that.

    Yes, it is undefined. Because timer is private to the function/object.

    Somehow, you have to find a way to create a public member. But given the way that code is written, I don't now how. You might want to try asking in the jQuery forum.
    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.

  • #10
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    It's easier if only one slider is required for the page.

    Just create the button:
    PHP Code:
    <input type="button" 
        
    id="mode" 
        
    value="auto" 
        
    onclick="this.value = (this.value=='auto') ? 'manual' : 'auto';"
    For lean-slider.js,
    /* Lean Slider v1.0
    * http://dev7studios.com/lean-slider
    *
    * Copyright 2012, Dev7studios
    * Free to use and abuse under the MIT license.
    * http://www.opensource.org/licenses/mit-license.php*/
    We have some permission, right?

    Let's create a plugin's var called clicked and set it initially to false.

    Then, add a line to this block:
    Code:
    nextNav.on('click', function(e){
    	e.preventDefault();
    	clicked = true;
    	plugin.next();
    });
    Go a bit further down and add something to this block:
    Code:
    plugin.next = function(){
    	if ($('#mode').val() == 'auto' || clicked ){
    
    		// Trigger the beforeChange callback
    		settings.beforeChange.call(this, currentSlide);
    		currentSlide++;
    		if(currentSlide >= slides.length) currentSlide = 0;
    		slides.removeClass('current');
    		$(slides[currentSlide]).addClass('current');
    		updateControlNav();
    
    		// Trigger the afterChange callback
    		settings.afterChange.call(this, currentSlide);
    	}
    	clicked = false;
    	doTimer();
    };

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Why would you modify and add application-specific code to the plugin? The plugin should be generic and should work with any page it is used on.

    You can add pause and resume methods to the plugin if you want.

    Code:
    plugin.pause = function() {
        clearTimeout(timer);
    }
    
    plugin.resume = function() {
       doTimer();
    }
    Then you can call those methods from outside the plugin.
    Code:
    var $slider = $('sliderSelectorHere').leanSlider({
        //plugin options here
    });
    
    //call pause() and resume() whenever you want; example below
    $slider.pause(); //pause slideshow
    $slider.resume(); //resume slideshow
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    StealthRT (08-02-2013)

  • #12
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    375
    Thanks
    9
    Thanked 55 Times in 54 Posts
    Ahh, you have much better code Glenn

  • #13
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    188
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Why would you modify and add application-specific code to the plugin? The plugin should be generic and should work with any page it is used on.

    You can add pause and resume methods to the plugin if you want.

    Code:
    plugin.pause = function() {
        clearTimeout(timer);
    }
    
    plugin.resume = function() {
       doTimer();
    }
    Then you can call those methods from outside the plugin.
    Code:
    var $slider = $('sliderSelectorHere').leanSlider({
        //plugin options here
    });
    
    //call pause() and resume() whenever you want; example below
    $slider.pause(); //pause slideshow
    $slider.resume(); //resume slideshow
    That worked just fine! Thanks, glenngv!


  •  

    Posting Permissions

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