Home/ Questions/Q 8716849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T06:10:58+00:00

I am having trouble loading multiple javascripts in HTML page. Here is the code

  • 0

I am having trouble loading multiple javascripts in HTML page. Here is the code it is for the txtlzr and spin effect. . The spinner function name is “rotation” and the txtlzr function name is “rr”

 <html>
 <head>
   <title></title>
   <script src="http://code.jquery.com/jquery.min.js"></script>
   <script src="http://raw.github.com/krisk/textualizer/master/textualizer.min.js"></script>
   <style type="text/css">
     #txtlzr { font-size: 150px; width: 960px; height:250px; }
    </style>
 </head>
 <body onload: "rr(); rotation()";><div id="txtlzr"> </div> </body>

    <script>
    $(function rr() {
             var list = ['Text 1', 'Hello World', 'Screencasts'];
        var options = {
            duration: 1000,          // Time (ms) each blurb will remain on screen
            rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
            effect: 'random',        // Animation effect the characters use to appear
            //centered: true           // Centers the text relative to its container
        }
        var txt = $('#txtlzr');
        txt.textualizer(list, options); // textualize it!
        txt.textualizer('start'); // start
    });

    </script>
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image">​
    <script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
    <script type="text/javascript"        src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
    <script type="text/javascript">
    function rotation() {
        $("#image").rotate({
            angle: 0,
            animateTo: 360,
            callback: rotation,
            easing: function (x, t, b, c, d) { // t: current time, b: begInnIng value, c:      change In value, d: duration
                return c * (t / d) + b;
            }
        });
    };
    $(document).ready(function () {
        rotation();
    })
</script>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Huge mess

    1. put the scripts in the head
    2. load jQuery once
    3. rr was not a function but a mix of jQuery and plain JS
    4. the HTML would never validate
    5. do not use body onload when you have document.ready (and even then use window.onload instead if you do not have jQuery

    try this DEMO

    <html>
  <head>
    <title></title>
      <script src="http://code.jquery.com/jquery.min.js"></script>
      <script src="http://raw.github.com/krisk/textualizer/master/textualizer.min.js"></script>
      <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
      <script>
        function rotation() {
          $("#image").rotate({
            angle: 0,
            animateTo: 360,
            callback: rotation,
            easing: function (x, t, b, c, d) { // t: current time, b: begInnIng value, c:      change In value, d: duration
                return c * (t / d) + b;
            }
          });
        };

        function rr() {
          var list = ['Text 1', 'Hello World', 'Screencasts'];
          var options = {
            duration: 1000,          // Time (ms) each blurb will remain on screen
            rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
            effect: 'random',        // Animation effect the characters use to appear
            //centered: true           // Centers the text relative to its container
          }
          var txt = $('#txtlzr');
          txt.textualizer(list, options); // textualize it!
          txt.textualizer('start'); // start
        };
        $(document).ready(function () {
          rr();
          rotation();
        });

      </script>
      <style type="text/css">
       #txtlzr { font-size: 150px; width: 960px; height:250px; }
      </style>
    </head>
    <body>
      <div id="txtlzr"> </div> 
      <img src="https://www.google.com/images/srpr/logo3w.png" id="image">​
   </body>
</html>
    • 0