Use jqueryui in index.html

Question

I just finished codecademy tutorials on html, css, js and jQuery. Now I am trying to create something on my own. But I can't make even the simplest thing work. I did everything in some kind of "browser consele lab" till now. Question is, how do I use or include jQuery in my index.html so it will work when I open it in browser? After some searching I used google hosted libraries links but it still doesn't work. I have 3 files created: index.html, style.css and script.js.

Now it just loads page with that square on it, but does nothing when I click it, even tho my jQuery code should be correct.

index.html code:

<!DOCTYPE html>
<html>
<head>
    <title>My thing</title>
    <link rel='stylesheet' type='text/css' href='style.css'/>
    <script type='text/javascript' src='script.js'></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

</head>
<body>
    <div>
    </div>
</body>
</html>

style.css code:

div {
height: 250px;
width: 250px;
background-color: #008800;
}

script.js code:

$(document).ready(function(){
  $('div').click(function(){
      $(this).effect('explode');
  });
});

Arun P Johny · Accepted Answer · 2013-07-24 01:05:06Z

3

it should be

<!DOCTYPE html>
<html>
<head>
    <title>My thing</title>
    <link rel='stylesheet' type='text/css' href='style.css'/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type='text/javascript' src='script.js'></script>

</head>
<body>
    <div>
    </div>
</body>
</html>

Your script page script.js used jQuery, so it should be included after jQuery library

Demo: Plunker

answered Jul 24, 2013 at 1:05

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

ruby_ruby Over a year ago

Combination of adding http: and moving my 'script.js' link after those links worked.

Arun P Johny Over a year ago

@ruby_ruby there is no need to add http: as I shown in the demo

ruby_ruby Over a year ago

I see it works in demo, but when I delete the http: in my file it realy doesn't explode. When I keep it there it works. Anyway thank you for helping a newbie out.

Satyajit · Accepted Answer · 2013-07-24 01:03:32Z

0

You are missing the protocol part from your script source URLs. Add either http: or https: depending on where you are getting them from.

answered Jul 24, 2013 at 1:03

Satyajit

3,8591 gold badge22 silver badges14 bronze badges

1 Comment

Arun P Johny Over a year ago

that is fine, it will use the protocol used to load the index page

Jason Young · Accepted Answer · 2013-07-24 01:04:29Z

0

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

you miss the http: try this one and see if it works

answered Jul 24, 2013 at 1:04

Jason Young

5753 silver badges16 bronze badges

1 Comment

Arun P Johny Over a year ago

that is fine, it will use the protocol used to load the index page

Collectives™ on Stack Overflow

Use jqueryui in index.html

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related