Why won't jQuery work in my project?

Question

I'm working on a small project for a friend. I recently learned jQuery on Codecademy, and this is my first time incorporating it in to a web page. However, it doesn't work and I'm not sure why. Also, if someone could direct me on how to center the text boxes, and so on, to look like the image linked below, please let me know.

screenshot of login form

Here is my index.html:

<!DOCTYPE html>
<html>
    <head>
    <title>DNA Translator</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script> type="text/javascript" src="script.js"</script>
    <script></script>
    </head>
    <body>
        <div id="content">
            <form>
                DNA: <input type="text" name="dna" placeholder="DNA"><br>
                mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
                tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
                Amino Acids: <input type="text" name="aminoAcids" placeholder="Amino Acids"<br>
            </form>
            <button id="button" type="button">Tanslate</button>
        </div>
    </body>
</html>

Here is my stylesheet.css:

h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#content {
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}

#button{
    opacity: 0.7;
    display: inline-block;
    height:25px;
    width:300px;
    background-color:#293FE3;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
    /*display: block;*/
    margin: 30px auto;
}

input[type="text"] {
    display:/*block;*/ inline-block;
    height:20px;
    padding:4px 6px;
    margin-bottom:10px;
    font-size:14px;
    line-height:20px;
    color:#555;
    vertical-align:middle;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
    background-color:#fff;
    border:1px solid #ccc;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition:border linear .2s,box-shadow linear .2s;
    -moz-transition:border linear .2s,box-shadow linear .2s;
    -o-transition:border linear .2s,box-shadow linear .2s;
    transition:border linear .2s,box-shadow linear .2s
}

Here is the script.js:

$(document).ready(function() {
    $('#button').mouseenter(function() {
        $('#button').fadeTo('slow', 1);
    });
    $('#button').mouseleave(function() {
        $('#button').fadeTo('slow', 0.7);
    });
});

It's not included in what is up there. I did edit that, but the ultimate problem was that I was not correctly linking my script.js file. If I could pick to answers I would. They were both needed. but that is the bigger problem I think. — MacBoss123541, Aug 08 '13 at 18:24

Rob · Answer 1 · 2013-08-08T18:08:17.927

6

You need to include jQuery!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

edited Aug 08 '13 at 18:08

answered Aug 08 '13 at 17:55

Rob

5,578
3
23
28

2

It's not a plugin, it's a library! – Bergi Aug 08 '13 at 17:59
Is it really OK to load the jQuery js file directly from the download link like that? I thought that should only really be used for JsFiddle or JsBin and the like. – Zack Aug 08 '13 at 18:00
1

`script` is not a self-closing element, and I suggest removing the `type` attribute. Also consider HTTPS. Apart from that, +1. – rink.attendant.6 Aug 08 '13 at 18:00
That's a link to the CDN listed on the jquery website. It's not a download link. The other answer is the download link (code.jquery.com) – Rob Aug 08 '13 at 18:01
So the Content Delivery Network (CDN) is specifically made so you can just load your jquery for your own website from it? – Zack Aug 08 '13 at 18:03
1

@Zack ya, that's the purpose of a CDN – A. Wolff Aug 08 '13 at 18:04
@rink.attendant.6 thanks for the script correction. But why HTTPS? It's not exactly secure information and I would assume some overhead for https. (actually, if the host site is using https, it should be https) – Rob Aug 08 '13 at 18:04
1

@rink.attendant.6 there's no such thing as a self-closing element in HTML5 anyway. A closing tag for a single element is `[/]?>`. @Zack use a CDN for your common libraries, it'll usually be faster than your site (bonus: it's also cached before the user first loads your site, 9 times out of 10) – Amelia Aug 08 '13 at 18:05
@Zack Yes, that is the purpose of a CDN. http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jquery – Rob Aug 08 '13 at 18:05
1

@rob you should *always* specify CDN URLs as https, ideally, since it's a remote script that can be man-in-the-middled (if you need plaintext compatibility, use `//domain.tld/resource` instead of `http://` or `https://`) – Amelia Aug 08 '13 at 18:07
@Hiroto It's not just CDN URLs...it's URLs for any resources. And they're called "void elements" – Ian Aug 08 '13 at 18:09

Elmer · Answer 2 · 2013-08-08T18:03:24.143

3

Include the link to the jQuery library:

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

Make sure to do this before you call any .js files.

edited Aug 08 '13 at 18:03

answered Aug 08 '13 at 17:56

Elmer

180
1
2
12

1

It's not a plugin, it's a library! – Bergi Aug 08 '13 at 18:00

score 1 · Accepted Answer · answered Aug 08 '13 at 18:00

1

You're closing your script tag too early

<script> type="text/javascript" src="script.js"</script>

Should be

<script type="text/javascript" src="script.js"></script>

answered Aug 08 '13 at 18:00

Kevin Lynch

24,427
3
36
37

Thank you very much!!! This was the problem. I knew I was doing something stupid. – MacBoss123541 Aug 08 '13 at 18:07

score 0 · Answer 4 · answered Aug 08 '13 at 18:01

0

This center alignment of text boxes you can do through css. If you want to use jQuery then download that and include on your page or add directly <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>. And then you are ready to use jQuery. What you want to do if you let us know then we can suggest something.

answered Aug 08 '13 at 18:01

Deepak Biswal

4,280
2
20
37

I know i can do it through CSS, but I'm not nearly as experienced with CSS as you people, and I wanted some input on how to do it. – MacBoss123541 Aug 08 '13 at 18:11

Why won't jQuery work in my project?

4 Answers4