I'm trying to integrate a simple html, js, and css file:
like this example on this link: jsfiddle.net/MHDhT
I can link no problem to the css file like this (in the head tag):
<link rel="stylesheet" href="style.css" />
but then I dont know how to link to the js file, and Im not sure If just having the js content I can see on that link is enough ??
can someone help me ?
Your js shoul be place on the end of your page for loading performance. (Like that the browser can start to render the web-page before the js has finished to load). But only if your Js is not mandatory for your Dom to load (it should be the case)
<script type="text/javascript">
//Here is your code
</script>
<script type="text/javascript" src="url_of_your_js.js"></script>
Be sure to include jquery:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
If your code require the dom to be ready to be executed your should use
$(document).ready(function() {
//This is executed when dom is ready
});
The final result shoul look like this: (I put all In 1 file to be easier for you)
<html>
<head>
<style type"text/css">
.menu {
background: #3B6997;
font-weight: bold;
padding: 10px;
width: 300px;
display:none;
}
.menu a {
color: white;
}
.hov {
width: 300px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.hov').hover(function() {
$('.menu').slideDown();
}, function() {
$('.menu').slideUp();
});
});
</script>
</head>
<body>
<div class="hov">
<a href="#">Activate Menu vv</a>
<ul class="menu">
<li>
<a href="#">Item</a>
</li>
</ul>
</div>
</body>
</html>
If you want to put yout js in separate file, let's say 'app.js', put this in this file:
$(document).ready(function() {
$('.hov').hover(function() {
$('.menu').slideDown();
}, function() {
$('.menu').slideUp();
});
});
You link it by putting this on your head section :
<script type="text/javascript" src="app.js"></script>
In JSFiddle you no need to specify these html, head, external css or js tags. But in your .html it is must. The script tag is used for linking a javascript file.
<html>
<head>
<link rel="stylesheet" href="/folderpath/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/folderpath/filename.js"></script>
</head>
<body></body>
</html>
To insert a JavaScript into an HTML page, use the <script> tag in the .html file
<script>
//Your js code here
</script>
To include a separate file (.js), use :
<script type="text/javascript" src="mycode.js"></script>
<script src="src.js"></script>