JQuery in HTML doesn't do anything

Question

So, i've been trying to get this JQuery code to run in my HTML code, but it just won't. I have been looking the site over for ages, and still can't find a solution. (I found similar problems, but the fixes doesn't work.)

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>
    <script type='text/javascript' src='script.js'></script>
</head>
<body>
    <div id="header"><h3 class="hf"></h3></div>
    <div class="left">
    <h3 class="arial"></h3>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    <h3 class="arial"></h3>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="picroll">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        <tr>
            <td></td>
            <td></td>
            <td></td>
    </div>
    <div class="right"><img id="pb" src=""/>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <lI></li>
        </ul>
    </div>
    <div class="box">
        <p id="fb">Add me on Facebook!</p>
        <a href="#"><img id="flogo" src="https://www.seeklogo.net/wp-content/uploads/2013/11/facebook-flat-vector-logo-400x400.png"/></a>
    </div>
</body>
<div id="footer"><p class="hf"></p></div>

So this is the whole thing. I removed the data itself, but I don't see it should be a problem.

JS:

$(document).ready(function() {
$('.box').mouseenter(function() {
    $('.box').fadeTo('fast', 1);
});
$('.box').mouseleave(function() {
    $('.box').fadeTo('fast', 0.5);
});
});

My guess is that I don't link to the JQuery script properly, but I can't find the answer. I simply want the ".box" to go from opacity 0.5 (which it is in my CSS file aswell) to 1 when hovering the mouse over it, and then go back to 0.5 when I remove te cursor again.

Where is your JavaScript, within the script.js file? If so, the script.js file needs to be placed after the jquery library script. — Seano666, Dec 11 '15 at 00:13
Check browser console for any errors. Like Sean said, you need to load jquery library before your `script.js`, if that depends on jQuery. — Chris Yongchu, Dec 11 '15 at 00:21
Well I switched the jquery library and my script around. Still doesn't react. What do you mean with JavaScript within the script.js file? Should I try to link to another library? — Jens Dissing Poulsen, Dec 11 '15 at 00:36
@JensDissingPoulsen, it works here. http://codepen.io/anon/pen/KVpbbg. Initially it doesn't show faded, the effect only works after hover over and off it. — Chris Yongchu, Dec 11 '15 at 00:47
Chris, that's EXCATLY how it should run! How in hell can't it run on with my own files? — Jens Dissing Poulsen, Dec 11 '15 at 00:50
Jens, where ***is*** the **JS:** you show, starting `$(document).ready(function() {` — is that code in your `src="script.js"` file, or is it in `` tags somewhere in the html file? Where it is _matters_, and that is what Seano666 was asking. You should update your question and state where that JS is. — Stephen P, Dec 11 '15 at 01:22

Binary101010 · Answer 1 · 2015-12-11T00:54:26.000

4

You need to run the js script AFTER the jquery call in your header like so:

<html>
<head>
<title></title>
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>
<script type='text/javascript' src='script.js'></script>
</head>

Chrome does have a switch to enable this, it’s quite easy to turn on. You’ll need to make sure Chrome is closed completely, and run chrome with the ‘–allow-file-access-from-files’ flag. Ie:

C:\Users\\AppData\Local\Google\Chrome\Application> chrome --allow-file-access-from-files

To see if the flag is set, you can visit: chrome://version/ and look at the Command Line section and you should see –allow-file-access-from-files

You’ll most likely need to run this with at least admin access, and I would caution visiting unknown sites with this setting on, as they could capitalize on your setting and potentially read local files.

edited Dec 11 '15 at 00:54

answered Dec 11 '15 at 00:13

Binary101010

580
4
11

Still won't do.. Is what it looks like now, and it won't change a thing... Do I link to a working JQuery, or does that even matter? Thanks for the quick reply btw, much appreciated! Didn't know how to make code block in comment apparently.. – Jens Dissing Poulsen Dec 11 '15 at 00:19
1

please list your entire HTML page. I cannot assist further without it. Edit your original post with that data. – Binary101010 Dec 11 '15 at 00:23
I've done that. Still seems to have no effect though. Should I try linking to another library? – Jens Dissing Poulsen Dec 11 '15 at 00:42
right click your page and click inspect element. Click console tab and then reload the page with that open. Post the error message – Binary101010 Dec 11 '15 at 00:43
"Not allowed to load local recouce" All files is from my own PC except from the JQuery library. – Jens Dissing Poulsen Dec 11 '15 at 00:46
ah! You are developing locally I assume? You are using Chrome as well? – Binary101010 Dec 11 '15 at 00:53
Indeed I am. I just read about the problem where I have to give access to local files, which would in the end result in lack of security.. Should I just switch over to Firefox when doing it locally then? – Jens Dissing Poulsen Dec 11 '15 at 00:56
You can do that. it should work. Not guaranteeing it. Or you can enable it and disable it as soon as you know it works. – Binary101010 Dec 11 '15 at 00:57
Out of curiosity, are you developing without a server @JensDissingPoulsen? – noahdotgansallo Dec 11 '15 at 01:00
Switching seems to be more of a real solution, until they fix it, if they do. Last question. Would I have to do same procedure in FF and if so how? Thank you very much for your help so far! Noah, as of now yes. It is my plan to have a server running in 2-3 days. But I didn't even think to run into a problem like this. At the moment it is only a hobby. It would be necessary to do it off a server, you think? – Jens Dissing Poulsen Dec 11 '15 at 01:01
Not necessary, but I'm pretty sure that this problem is because you're running your HTML without one. I did a little research, and came up with a stack overflow link that should answer your question. It's right below @JensDissingPoulsen. – noahdotgansallo Dec 11 '15 at 01:10

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

I am not sure that you're running a local server and if you are, then this answer is completely incorrect. However, I am guessing that you are not. Therefore, in Chrome, you can either enable the –allow-file-access-from-files flag, or you can use the file:/// protocol like so. The link below should address your question.

How can I create a link to a local file on a locally-run web page?

Personally, I would suggest running files from a server - if you aren't already - as I have never run into this problem using one. Wamp (Windows), Mamp (OSX) are ones that I've found reliable.

edited May 23 '17 at 10:27

Community

1
1

answered Dec 11 '15 at 01:07

noahdotgansallo

763
1
6
15

1

Allright, seems I might as well set it up through the server then. It should fix all my heartaches! Thank you very much for your help! – Jens Dissing Poulsen Dec 11 '15 at 01:14

JQuery in HTML doesn't do anything

2 Answers2