jQuery won't work on brackets editor
So, hi. I've tried everything I know and don't know, and I simply can't make it work. Yes, I have a script tag in my html skeleton.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
I also tried downloading it and then adding to my html skeleton as a script tag. Nothing works. I am typing my javascript/jquery in another file.js, which is obviously also linked to my html.
I'm using the Brackets editor. I couldn't find anything on the web... and I'm pretty sure that the problem is that for some reason, the jQuery directory is not linked to my other .js files, because when I type my javascript direct to a inside my html file, it works.
For everyone using the Brackets editor, what do I have to do? :(
Full html code:
<!DOCTYPE html>
<html>
<head>
<title>One Piece Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>
<div id="banner"></div>
<div id="wrapper">
<header>
<div id="logo"></div>
<div id="navbar"></div>
<div id="slider">
<img src="imgs/slider-arrow.png" id="leftarrow" />
<h1>Novidades</h1>
<h2>Mantenha-se sempre informado.</h2>
<h3>
<a href="">SIT ELIT PELLENTESQUE</a>
</h3>
<p>
Ipsum et praesent elit accumsan pellentesque elit varius elit tellus tellus curabitur. Varius sollicitudin tortor velit faucibus varius vestibulum in praesent sit accumsan at mauris lacinia diam sollicitudin iaculis. In ad adipiscing adipiscing adipiscing nulla consectetur ac amet.
</p>
</div>
</header>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>
JS:
$(document).ready(function() {
$('#slider').mouseenter(function() {
$('#leftarrow').css('display', 'block');
$('#rightarrow').css('display', 'block');
$('#leftarrow').animate({left: '-30px'}, 'slow');
});
$('#slider').mouseleave(function() {
$('#leftarrow').delay(50000).css('display', 'none');
});
});
Answer
For posterity: from the comment thread above, it sounds like the problem wasn't in running the web page, it was warning messages that appeared in the Brackets editor while editing the source code. The warnings are JSLint errors - Brackets runs JSLint automatically on JS files by default. And JSLint warns by default any time you reference a global variable that wasn't defined in the same file.
To avoid errors like this, see my answer to a similar question here: How to get brackets to ignore particular repeating errors?
You can also turn JSLint off completely just by unchecking the View > Lint Files on Save menu item. Or you can make the errors less obtrusive by clicking the "X" in the upper-right of the error display panel – then you'll only see a subtle status bar icon telling you whether JSLint errors were found (yellow "!" triangle) or not (green checkmark).