HTML file not loading jQuery

Question

I included

<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

in my index.html header, and script.js is in the same folder as index.html. I have a simple div that is to be resizable in the body section.

script.js has

$(document).ready(function () {
    $("div").resizable();
});

very simple.. but when I load index.html on all browsers the div is not resizable. Is the way im including the js file incorrect?

I'm assuming that I should be able to load index.html and just start resizing the div.

UPDATE:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css"/>
        <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <script src='script.js'></script>
    </head>
    <body>
        <div>Resize Me!</div>
    </body>
</html>

Are you doing this on your local machine? If yes, do you have a server installed? — Daedalus
– Daedalus, Commented Feb 6, 2013 at 22:35
yes, this is all local machine. i have the files in htdocs directory, which is what MAMP uses. im pretty beginner at this so it might not be in correct folder? — James
– James, Commented Feb 6, 2013 at 22:37
Place alert('boo') in script.js. Althrough, you said it is in same folder... — user133408
– user133408, Commented Feb 6, 2013 at 22:39
jQuery stylesheets should be loaded before the jQuery JS gets loaded. Also, check my answer pertaining to your function in your script. — rkeet
– rkeet, Commented Feb 6, 2013 at 22:52

Community · Accepted Answer · 2017-05-23 10:24:50Z

3

You're loading the jQuery UI file. You need to load the standard jQuery file as well.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css">

The standard jQuery file allows you to use the selector $("#div"), and the function ready(). The jQueryUI allows you to use the function resizeable(). So you need to load both.

EDIT: Since you tagged this as html5, you can use

<script src='script.js'></script>

It is assumed the <script> is javascript in HTML5.

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Feb 6, 2013 at 22:25

Phil Bozak

2,8401 gold badge21 silver badges27 bronze badges

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

5 Comments

James Over a year ago

It still does not work. I loaded this before script.js as well.

Daedalus Over a year ago

@James Change the position of script.js so it loads after the ui file.

James Over a year ago

i loaded both standard jQuery as well as jQuery UI lines. then loaded script.js, but no result still. i do not have browser extensions running either..

Daedalus Over a year ago

@James Then please update your question to show us what you are now doing.

Phil Bozak Over a year ago

I forgot. You have to also add the jquery ui css page. I'll put that in my answer.

b.Dye · Accepted Answer · 2013-02-06 22:49:19Z

1

In your 'stylesheet.css', are you referencing the jquery UI styles? That may be the problem - the draggable arrow that appears in the bottom right of your resizable element is produced using the jquery UI css.

From jquery UI's website:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

answered Feb 6, 2013 at 22:49

b.Dye

661 silver badge4 bronze badges

2 Comments

James Over a year ago

it seems though it added extra padding on the sides of the div. is this a side effect?

b.Dye Over a year ago

If you use the F12 developer tools in your browser and inspect the div, you can see where that extra padding is coming from. Look at the "styles" window on the right. Usually, if a style is inherited from jquery UI css that is undesired, such as extra padding, I will override it with a cascading style.

rkeet · Accepted Answer · 2013-02-06 22:49:52Z

You need a few more things to correctly setup the HTML + JS.

<html>
    <meta name="viewport" content="height=device-height,width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />

    <link href="Styling/jquery-ui/jquery-ui-1.10.0.css" rel="stylesheet" type="text/css" />

    <!-- Add your CSS here -->

    <script src="Scripts/External/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="Scripts/External/jquery-ui-1.10.0.js" type="text/javascript"></script>

    <!-- Add your JS here -->
</head>
<body>
    <div id='sizeableDiv'> Resize me! </div>
</body>
</html>

What you did is forget to add the styling for the jQuery.

EDIT Found in the documentation a slight variation on the resizable method as well. After the <div> tag, add:

<script type="text/javascript">
    $( "#sizeableDiv" ).resizable( "enable" );
</script>

Found this here.

Collectives™ on Stack Overflow

HTML file not loading jQuery

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related