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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    jquery plugin doesn't work?

    Here is the plugin code:
    Code:
    function textTyping_animation(text,location,speed){
        var progress = 0;
        var a = setInterval(function(){
            progress++;
            document.getElementById(location).innerHTML = text.substring(0,progress);
            if(progress == text.length){
                clearInterval(a);
            }
        },speed);
    };
    (function($){
        $.fn.textAnim = function(text,speed){
            var progress = 0;
            var a = setInterval(function(){
                progress++;
                $(this).html(text.substring(0,progress));
                if(progress == text.length){
                    clearInterval(a);
                }
            },speed);
        };
    })(jQuery);
    Here is the execution:

    Code:
    $(document).ready(function(){
        starttext = function()
        {
            document.getElementById("textbox").style.display = "block";
            //textTyping_animation("Dit is een dummy text!","textbox_inner",70);
            //game.output("klaar");
                $("#textbox_inner").textAnim("Dit is een dummy text!",70);
        }
    });
    Html load code:
    Code:
        <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
        <script type="text/javascript" language="javascript" src="js/jqueryplugins.js" ></script>
        <script type="text/javascript" language="javascript" src="js/libraries/gamelibrary.js"></script>
    textTyping_animation(); Works, but .textAnim not
    Last edited by mrbean; 11-27-2012 at 02:43 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Your problem is a scope switch. So inside the setInterval loop "this" will no longer refer to your jQuery object but rather to the "window" object. A workaround would be to store the reference and use this temporary variable instead of "this" inside setInterval
    Code:
    (function($){
        $.fn.textAnim = function(text,speed){
            var progress = 0;
            var that = this;
            var a = setInterval(function(){
                progress++;
                $(that).html(text.substring(0,progress));
                if(progress == text.length){
                    clearInterval(a);
                }
            },speed);
        };
    })(jQuery);

  • Users who have thanked devnull69 for this post:

    mrbean (11-27-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

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