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
– Filipe Manuel

2014-10-03 22:45:47 +00:00
Commented Oct 3, 2014 at 22:45 — Filipe Manuel
– Filipe Manuel, Commented Oct 3, 2014 at 22:45
<div class=border>? <div class='border'>

StackSlave
– StackSlave

2014-10-03 22:47:15 +00:00
Commented Oct 3, 2014 at 22:47 — StackSlave
– StackSlave, Commented Oct 3, 2014 at 22:47
@PHPglue Um… that was a copy/paste error…

Quintec
– Quintec

2014-10-03 22:49:41 +00:00
Commented Oct 3, 2014 at 22:49 — Quintec
– Quintec, Commented Oct 3, 2014 at 22:49

Community · Accepted Answer · 2017-05-23 10:26:32Z

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, 2017 at 10:26

CommunityBot

11 silver badge

answered Oct 3, 2014 at 22:46

benomatis

5,6537 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Quintec Over a year ago

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

benomatis Over a year ago

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 :)

James Over a year ago

Are you hosting jQuery locally or are you pulling it from a CDN?

benomatis Over a year ago

well, i'll appreciate if you'll do it after 8 minutes, if you'll still be here ;)

benomatis Over a year ago

@James think you meant to ask this on the original question, not in this answer, right?

|

Collectives™ on Stack Overflow

Something wrong with my HTML/CSS/JQuery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related