I just started coding with jQuery and I'm stuck: how do I link my HTML to my jQuery, I've read different methods of doing so, but I haven't figured it out.
As far as I know, there are two ways of implementing jQuery into your webpage, you can write the script in your HTML file between <script></script>, or you can create a separate file, I'd like to create a separate file, because it looks more organized and I find it easier to work with, just like with separate CSS.
Here is my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- links-->
<link type="text/css" rel="stylesheet" href="niks bijzonders.css"/>
<script type='text/javascript' src='niks bijzonders.js'></script>
<title>
Niks bijzonders.
</title>
</head>
<body>
<div class='bovenkant'><p class='bovenkant-text'><b>Niks Bijzonders</b></p></div>
<!--One Div to rule them all-->
<div class="ruler">
<div id="one" class="onderliggend"></div>
<div id="two" class="onderliggend"> </div>
<div id="three" class="onderliggend"></div>
<div id="four" class="onderliggend"></div>
<div id="five" class="onderliggend"></div>
</div>
<!--Het heeft wel wat-->
<div class="wat-text_div"><p id="wat-text_p">Deze eerste pagina is hoogstwaarschijnlijk abominabel lelijk... Maar toch... Het heeft wel iets... Ik kan mijn vinger er nog niet op leggen...</p></div>
</body>
</html>
CSS:
/* CSS Document */
body {
background-image:url(niks%20bijzonder%20achtergrond.jpg);
background-color:white;
}
div {
width:100px;
height: 40px;
}
.bovenkant {
width:1900px;
height:250px;
background-color: rgba(204,255,0,0.4);
border: 2px dashed black;
margin:auto;
border-radius:10px;
}
.bovenkant-text {
padding-left:50px;
font-family: century;
font-size:120px;
margin-top:50px;
}
.ruler {
background-color:rgba(255,255,255,0.4);
border:solid black 1px;
width:1900px;
height:100px;
margin:auto;
margin-top:10px;
border-radius:10px;
}
#one {
background-color:rgba(0,255,0,1);
}
#two {
background-color:rgba(255,0,0,1);
}
#three {
background-color:rgba(0,0,255,1);
}
#four {
background-color:rgba(255,255,0,1);
}
#five {
background-color:rgba(0,255,255,1);
}
.onderliggend {
display:inline-block;
margin:5px;
height:90px;
width:366px;
border-radius:10px;
opacity:0.8;
}
/*
.onderliggend:hover {
opacity:0.5;
}
*/
.wat-text_div {
width: 438px;
height:110px;
background-color:rgba(153,0,0,0.3);
border-radius:10px;
float:right;
margin-top:15px;
}
#wat-text_p {
font-family:century;
font-size:20px;
padding:5px;
margin:auto;
}
jQuery:
$(document).ready(function(){
var $bar = $('.onderliggend')
$bar.mouseenter(function(){
$(this).animate({
height: '+=10px'
});
});
});
Please help!
Jippe