multiple javascript in html

Question

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>

Just looking at it, you're including the jQuery source include (the googleapis line) after you've already run a jQuery block of code. Eh, scratch that, you're multiple including it (seeing the misformatted line at the very top). — Jared Farrish
– Jared Farrish, Commented Oct 21, 2012 at 15:18
stackoverflow is not letting me insert the additional url script sources for the above code. The problem I am getting is running two of the functions at the same time. For some reason the google spinner only works but not the textualizer. I want both to work at the same time. — user1712552
– user1712552, Commented Oct 21, 2012 at 15:27

mplungjan · Accepted Answer · 2014-07-06 21:44:04Z

Huge mess

put the scripts in the head
load jQuery once
rr was not a function but a mix of jQuery and plain JS
the HTML would never validate
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>

I prefer to be a star rather than start which is a tail in Dutch ;)))

pckill · Accepted Answer · 2012-10-21 15:27:04Z

0

If you are using jquery, you are better off using this instead of the onload attribute:

$(document).ready(function(){
    //your code here
});

answered Oct 21, 2012 at 15:27

pckill

3,75939 silver badges49 bronze badges

Comments

Guffa · Accepted Answer · 2012-10-21 15:29:50Z

0

You end the body element too early, so the scripts are not inside the body. I'm not sure how all different browsers react to this, but they might ignore the scripts, or run the load event before the scripts are loaded.

Either way, move everything inside the body element, and it should work.

answered Oct 21, 2012 at 15:29

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

multiple javascript in html

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related