CODEWITHSUNDEEP
javascriptjqueryhtml
user1712552
user1712552

Reputation: 53

multiple javascript in html

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>

Upvotes: 0

Views: 5966

Answers (3)

mplungjan
mplungjan

Reputation: 178079

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>

Upvotes: 2

Guffa
Guffa

Reputation: 700382

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.

Upvotes: 0

pckill
pckill

Reputation: 3759

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

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

Upvotes: 0

Related Questions