JS and CSS files not loading inside html

Question

My folder structure looks like,

MyProject
       |
       webcontent

Inside webContent folder I am having my html, js,CSS files. Here I am loading the js & CSS files directly as below.

<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

<link rel="stylesheet" href="jquery-ui.css">

But I want to keep the js and CSS file in different folder and I need to call them where I want. But I am not getting where to place the js & CSS file and how to define the path inside html or jsp.

Well, what folder do you want them in? We can't help you with relative paths unless we know where we're going. — T.J. Crowder
– T.J. Crowder, Commented Nov 16, 2015 at 7:20

T.J. Crowder · Accepted Answer · 2015-11-16 07:22:19Z

1

It depends on where they are and how you configure your web server. With a default configuration on nearly all web servers, if you want your scripts in a subdirectory of webcontent, then just add directory-name/ in front of the paths. E.g., for:

MyProject/
       |
       webcontent/
               |
               js/
                  jquery-1.0.2.js
                  jquery-ui.js
               css/
                  jquery-ui.css

then

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>

<link rel="stylesheet" href="css/jquery-ui.css">

The search terms for this are "relative URL" and/or "relative path."

answered Nov 16, 2015 at 7:22

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

5 Comments

user2473779 Over a year ago

And store the html (or jsp,php,etc) files directly under webcontent

Nat Over a year ago

Sorry.. Now its working. But my image is not loaded.

Nat Over a year ago

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url("images/ui-icons_555555_256x240.png"); } Code in CSS file. I need to load the image which resides inside webContent/images/ui-icons_555555_256x240.png

T.J. Crowder Over a year ago

@NarendrakumarM: The images must be in the same place relative to the CSS (not the HTML) that they used to be; paths in CSS files are relative to the CSS file. By default, for instance, jQuery UI expects images to be in an images subdirectory, so in your case you'd make sure they were in css/images/.

Nat Over a year ago

If I place js & css folder outside WebContent folder. How to call them?

Visky G · Accepted Answer · 2015-11-16 07:24:09Z

0

Suppose you have your css file in

WebRoot --> Css

folder then use below line in your html

<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

I hope this helps you

answered Nov 16, 2015 at 7:24

Visky G

912 bronze badges

Comments

Majid Sadr · Accepted Answer · 2015-11-16 07:25:24Z

0

for example, Your HTml file is in one folder and your CSS/js file is in a folder name "mystyle" inside HTML folder. You should address your CSS file LIKE this:

<link rel="stylesheet" href="mystyle/style.css" />

And if your file is in a folder "before" HTML folder, your address your css/js file like this:

<link rel="stylesheet" href="../mystyle/style.css" />

answered Nov 16, 2015 at 7:25

Majid Sadr

1,10110 silver badges19 bronze badges

Collectives™ on Stack Overflow

JS and CSS files not loading inside html

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related