HTML/CSS/JavaScript/Jquery issue
I'm trying to learn programming from various online tutorials, and I've
been trying to figure out this issue for about the last three days with no
success. I have three files (myindex.html, stylesheet.css, and jscript.js)
and I'm trying to make sure that everything is properly linked up before I
start experimenting with different things.
MyIndex.html file contains:
<!DOCTYPE>
<HTML>
<head></head>
<title>Mary</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<body>
<div ID="contact">Hello</div>
</body>
</HTML>
my stylesheet.css file contains:
#contact {
height: 100px;
width: 100px;
background-color: #517F8F;
border-radius: 25px;
border: 2px solid blue;
text-align: center;
display: block;
vertical-align: middle;
line-height: 100px;
}
my jscript.js file contains:
$(document).ready(function(){
$('#contact').click(function(){
$(this).hide();
}();
});
I keep dragging the file into chrome to see if it will work. It shows the
div element, but won't hide it when clicked. After much frustration, I
entered all of the info into jsfiddle and it says it works properly and in
the result window if I click the element, it hides like it's supposed to.
I'm using sublime to edit it, but I've also tried notepad++. I can't
figure out why it's not working correctly when I drag the index file into
the browser. I know this is probably a silly question, and I sincerely
appreciate any advise.
No comments:
Post a Comment