Import several js files in html code

Question

I ve just begin with Jquery, i ve import the jquery file src="http://code.jquery.com/jquery-latest.min.js in my html file. I want to import also other functions that i ve created in the same file. How is this possible to import several js files? For example i want to seperate ready from html file to a new js file:

enter <!DOCTYPE html>
      <html>
      <head>

      <link rel="stylesheet" type="text/css" href="site.css" />
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">                                          
      </script>

      </head>

      <body>

   <h1><b> TWEET PEAK  </b></h1>
   <a class="button_example button_about" href=" menu.html">    </a>

   <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/elevator.png"/> 

    <script> 
        $(document).ready(function(){

        $('img').animate({top:'+=100px'},1000);
    });
</script>

    </body>
    </html>here

Just add another script tag and reference any filename you want, then create that file and add your script into it (without the script tags) :) — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Oct 3, 2013 at 12:32
something like that?? <script src = script.js><img src="http://... .png </script> — Jose Ramon
– Jose Ramon, Commented Oct 3, 2013 at 12:34

Kai · Accepted Answer · 2013-10-03 12:48:30Z

3

You'll want to put your JavaScript code in a separate file and link to it using another script tag. For example, if you put your JavaScript in a file called "mycode.js" you would link to it like this:

<script type="text/javascript" src="mycode.js"></script>

In this example mycode.js would contain:

$(document).ready(function(){

    $('img').animate({top:'+=100px'},1000);
});

Edit, to be more clear:

Here is how I see your example code looking:

  <link rel="stylesheet" type="text/css" href="site.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">                                          
  </script>
  <script type="text/javascript" src="mycode.js"></script>
  <style> img { position: relative; } </style>
  </head>

  <body>

<h1><b> TWEET PEAK  </b></h1>
<a class="button_example button_about" href=" menu.html">    </a>

<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/elevator.png"/> 


</body>
</html>

edited Oct 3, 2013 at 12:48

answered Oct 3, 2013 at 12:34

Kai

463 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Reinstate Monica Cellio Over a year ago

Note - the script tag needs to go after the one that's already in the html file so that jQuery gets loaded first :)

Jose Ramon Over a year ago

Ok so then my problem is animate since it doesnt function properly.

Kai Over a year ago

You don't want to put your img tag inside the script tags. You should place it between the "<body></body>" tags in your HTML.

Jose Ramon Over a year ago

Yeah it is quite logical, but for some reason the animation doesnt function.

Kai Over a year ago

By the way, your problem with the animation is that your image should be positioned relatively. In otherwords, add this style: <style>img { position: relative; } </style>

|

Collectives™ on Stack Overflow

Import several js files in html code

1 Answer 1

6 Comments

Your Answer

Collectives™ on Stack Overflow

Import several js files in html code

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related