CODEWITHSUNDEEP
javascriptjquerycsshtml
RM GoodMan
RM GoodMan

Reputation: 69

How to include javascript in html5

I can not connect an external JavaScript file to my html page. When I put the script in the page with the tag it all works but when I insert it in an external file is not working, what is wrong?

<!DOCTYPE!>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- JQuery da Google -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!---------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- JS-->
<script src="js/function.js" type="text/javascript"></script>
</head>

<body>

<footer>
<img class="info" src="img/newsletter.png" width="32" height="32" alt="info" />
</footer>

<div id="info">
    <ul class="infomenu">
        <li class="newsletter">NEWSLETTER</li>
        <li>PRIVACY</li>
        <li>CONTACT</li>
        <li>FOLLOW US</li>
    </ul>

</div>
</body>
</html>

Javascript

    //Jquery Info
$(document).ready(function(){
    $(".info").hover(function(){
        $("#info").fadeIn("slow");
    });

    $(".close").click(function(){
        $("#info").fadeOut("slow");
    });

});

Upvotes: 4

Views: 22641

Answers (2)

Casper Round
Casper Round

Reputation: 343

<script>
  $(document).ready(function(){
    $(".info").hover(function(){
        $("#info").fadeIn("slow");
    });

    $(".close").click(function(){
        $("#info").fadeOut("slow");
    });

});

</script>

Upvotes: 1

Cagatay Ulubay
Cagatay Ulubay

Reputation: 2559

You really messed up your html code, try googling for the HTML(5) basics, first of you should learn the basic construction of it like following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf8">
        <title>Welcome</title>
        <link type="text/css" href="styles/default.css">
    </head>
    <body>
        <!-- HTML Content -->

        <script type="text/javascript" src=".."></script>
        <script>
        // Javascript inside this file
        </script>
    </body>
</html>

The link- and script part is not necessary, but you mostly will need it so I put it in the right order in. Try putting script-Tags over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.

This way the external Javascript should work, also if you working localy, you should use a Webserver software like XAMPP. If you use XAMPP, after installing it, you have to start the Apache Service and then you work inside (if you didn't changed the path) the C:\xampp\htdocs folder. If you create a folder inside it called testing and place your index.php inside it, you just can type following in the browser http://localhost/testing and it will search for a index. html or php file and parse it.

If you just double click the file, you mostly will end up with security issues, which will prevent your code will work like you intended to do. You know that you double clicked a file if it starts like file:// and not http://.

But like I said, google for tutorials from the scratch. It takes time, but you can't do it without taking the time. Trust me, I do this for over 7 Years now and I am online nearly everyday and learning, learning, reading, testing, coding, learning, reading, testing and I STILL think that this is less than 5% of knowledge what I could learn.. never think you are at the end or near to it.. you never are, there are always things to learn and if you keep in thought that you are near the end, you will stop improving and never become good.

Upvotes: 5

Related Questions