SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Just started with Jquery - confused!

    The following script works fine:



    <html>
    <head>
    Test Typewriter script

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var text = "";
    var count = 0;
    var maxspeed = 200;

    $(document).ready(function(){

    function typeit(punch){
    text=punch;
    type();
    }


    function character(start, end, text){
    return text.substring(start, end);
    }

    function type(){
    var random = Math.floor(Math.random() * maxspeed);
    setTimeout(type, random);
    $('#box').append(character(count, count+1, text));
    count++;
    }


    typeit("This should be output like a typewriter");


    });

    </script>


    </head>

    <body>
    <p>
    <div id="box"></div>
    </body>
    </html>



    But I'd like to call the typeit function within the body

    i.e Use the typeit function by sending the text to the function and have it applied to one or more divs

    - and can't figure out how to do it.

    Can someone help? - thanks!

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I may have misunderstood the problem, but I think I see what's tripping you up. You're only defining your "typeit" function inside another function--which means it will not be in the global scope, and you will not be able to use it anywhere else.

    The quick fix is to simply declare it with your other variables (text, count, maxspeed) out in the open:

    Code JavaScript:
    var text = "";
    var count = 0;
    var maxspeed = 200;
    var typeit; // just create it here...
     
    $(document).ready(function(){
     
    typeit = function (punch){ // and assign the (exact same) function here

    Does that help at all?
    I'm the web overlord for Graphic Business Systems

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks for your reply and yes it does help - however not working ....

    <html>
    <head>
    Test Typewriter script

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var text = "";
    var count = 0;
    var maxspeed = 200;
    var typeit;

    $(document).ready(function(){

    typeit = function (punch){
    text=punch;
    type();
    }


    function character(start, end, text){
    return text.substring(start, end);
    }

    function type(){
    var random = Math.floor(Math.random() * maxspeed);
    setTimeout(type, random);
    $('#box').append(character(count, count+1, text));
    count++;
    }


    //typeit("This should be output like a typewriter");


    });

    </script>


    </head>

    <body>
    <p>


    typeit ("does this work?")

    <div id="box"></div>
    </body>
    </html>

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    First of all, it looks like you forgot to put 'typeit("does this work?");' in a <script> (not sure if this was a typo). However, even if you do that, it will fail. Stupid mistake on my part, and here's the explanation:

    The function you passed to $(document).ready will only be executed when the DOM is fully loaded. Your second script (the "does this work?" part) is trying to execute before the DOM has loaded, when the variable typeit is still undefined.

    So how do we fix it? Luckily, nothing in your $(document).ready function requires the DOM. You're just creating functions. So we don't have to involve jQuery at all (which means that the last piece of advice I gave is irrelevant; if you're creating the typeit function in the global scope, then you don't have to worry about declaring the variable; you take your first script that you posted and literally just get rid of the $(document).ready(function () {}) wrapper).

    Once you've done that, where are you allowed to use your typeit function? Well, because you hardcoded in the element that you want to use (the #box <div>), you have to wait until that DOM node has been created. Which just means: after the #box <div> in your HTML.

    HTML Code:
    <head>
        <script>
        // create the typeit function
        </script>
    </head>
    
    <body>
        <script>
        // this WILL NOT work
        // because the #box <div> doesn't exist yet!
        typeit('hello?');
        </script>
    
        <div id="box"></div>
    
        <script>
        // this WILL work
        typeit('huzzah!');
        </script>
    </body>
    I'm the web overlord for Graphic Business Systems

  5. #5
    Non-Member
    Join Date
    Jan 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi lo_toots.

    I think your Math.floor() should really be Math.ceil() otherwise I don't think your max speed will ever be reached.

    This is how I would do it without jQuery.

    Code JavaScript:
     <body>
            <p id="strOutput"></p>
            <script type="text/javascript">
                var str='qwertyuiopasd';
                var curChar=0;
                var maxspeed=2000; //milliseconds
                var txtHolder = document.getElementById('strOutput');
                function typeIt(str){
                    txtHolder.innerHTML += str.charAt(curChar);
                    if(++curChar < str.length){
                        setTimeout(function(){typeIt(str);},Math.ceil(Math.random()*maxspeed));
                    }  
                }
                typeIt(str);
            </script>
        </body>

  6. #6
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    thanks sdleihssirhc - now I know why I was confused here - don't need jQuery at all!

    and lyndah - still evaluating your suggestion

    thanks both!


Bookmarks

Posting Permissions

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