Something wrong with my HTML/CSS/JQuery

Question

Without any script tags, the HTML and CSS work fine. After I add the script and I load the page nothing appears.

<!DOCTYPE html>
<html>
    <head>
        <title>E-Chef: Homepage</title>
        <script type="text/javascript" src="jquery-1.5.2.min.js"/>
        <link rel="stylesheet" type="text/css" href="/Users/stephenhjb/Desktop/Html:Css:JQuery/E-Chef/Stylesheets/E-Chef.css"/>
    </head>
    <body>
        <div class=border>
        <h1 class="header big">E-Chef: All your recipes in one place. Online.</h1>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){ 
            $('div').animate({'fontSize+=36'}, 2000, 'linear');
            });
        </script>
    </body>
</html>

Here is the E-Chef.css file:

.header {
    font-family: Times New Roman;
    color: #5F9EA0;
    text-align: center;
    background-color: #FF7F50;
    border: 30px dotted #FAEBD7;
    margin: 0 0 0 0;
}
.big {
    font-size: 36px;
}
.border {
    border: 5px solid black;
}

Try put this `script` on bottom of the code. – Filipe Manuel Oct 03 '14 at 22:45 — Filipe Manuel, Oct 03 '14 at 22:45
@PHPglue Um… that was a copy/paste error… – Quintec Oct 03 '14 at 22:49 — Quintec, Oct 03 '14 at 22:49

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

You missed to close the first script tag.

Do it like this:

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>

EDIT: more exactly, script tags are not self-closing, meaning they cannot be used like <script..... /> alone. More on this can be read here: https://stackoverflow.com/a/69984/2037924

EDIT #2: to answer the 2nd part of your question: you'll have to exclude the option of fontSize from the quotes (') in the animate function. Also you're using the incorrect selector, it's actually the font size of the h1 element that you want to increase, not the div's, so change it like this:

$('h1').animate({ fontSize: '+=36'}, 2000, 'linear');

Source: http://api.jquery.com/animate/

Here is a demo: http://jsfiddle.net/y0xkz4un/1/

edited May 23 '17 at 10:26

Community

1
1

answered Oct 03 '14 at 22:46

benomatis

5,536
7
36
59

Thanks, that was the problem, but my JQuery still doesn’t work. What should I do? Tell me if you want to see my JQuery-1.5.2.js – Quintec Oct 03 '14 at 22:48
2

if this answers your question, accept it as the correct one (big gray check mark), if you have another question, post it as new, someone will answer it, i'm sure (i need to go to bed now :) – benomatis Oct 03 '14 at 22:50
Are you hosting jQuery locally or are you pulling it from a CDN? – James Oct 03 '14 at 22:52
well, i'll appreciate if you'll do it after 8 minutes, if you'll still be here ;) – benomatis Oct 03 '14 at 22:52
@James think you meant to ask this on the original question, not in this answer, right? – benomatis Oct 03 '14 at 22:52
just answered your 2nd question ;) – benomatis Oct 03 '14 at 23:00

Something wrong with my HTML/CSS/JQuery

1 Answers1