File: example.html

Recommend this page to a friend!
  Classes of Jackson Knowlton  >  jQuery TypeByLetter  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Example Page
Class: jQuery TypeByLetter
Make string of text appear letter by letter
Author: By
Last change:
Date: 5 years ago
Size: 2,232 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        * {
            color: #2C2E37;
        }

        body {
            font: 18px sans-serif;
            background-color: #ddd;
        }
    </style>

    <script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>
        (function($) {

            $.fn.TypeByLetter = function(options) {
                var settings = $.extend({
                    speed: 100,
                    content: $(this).text(),
                    append: false,
                    callback: function() {}
                }, options);

                return this.each(function() {

                    var $object = $(this);
                    var text = " " + settings.content;
                    var arrayOfText = text.split("");
                    if (settings.append == false) {
                        $object.text("");
                    }

                    function type(i) {
                        i = i || 0;
                        $object.append(arrayOfText[i]);
                        console.log(arrayOfText[i]);
                        if (i < arrayOfText.length) {
                            i++;
                            setTimeout(function() {
                                type(i)
                            }, settings.speed);
                        } else {
                            settings.callback.call();
                        }
                    }

                    type(0);
                });

            };


            //Calling the plugin
            $('h1').TypeByLetter({
                callback: function() {
                    $('body').TypeByLetter({
                        speed: 50,
                        content: 'This text is loaded into .TypeByLetter through the option "content", and has the options of- speed:50, append: true',
                        append: true
                    });
                }
            });
        })(jQuery);
    </script>
</head>
<body>
    <h1>This is the new and upgraded .TypeByLetter Plugin!</h1>
</body>
</html>