let's say this is my server structure:
www
source
main.js
assets
img1
img2
siteLink1
index.html
siteLink2
index.html
inside both htmls, I have <script src='../source/bundle.js'/> so I can have two links with the same JS source .
The problem is that bundle.js contains all of the css, which have somehing like :
.bg{
background: url(img1.jpg)
}
and then, the webpacked JS added <style> that says:
.bg{
background: url(./assets/img1.jpg)
}
which is great, if JS and HTML were at the same place, but since they are not, the style in html points to the non-existing relative assets folder.
So what I really need, is saying to JS - when you put style tags with all of css required with css-loader, make it relative to the place of the JS, and not to the place of HTML.
What can I do?
Related
I've just moved to github pages, and I have an index.html, an index.js and a style.css all in the same folder(master I believe). I've tried the following way to link the js and the css to the html:
<link rel="stylesheet" type="text/css" href="master/style.css">
<script src="master/index.js" type="text/javascript"></script>
However, it just doesn't seem to work. In the middle, the CSS seemed to link once, but then after that when I tried to link the JS too, the whole thing stopped working again. How do I fix this?
If all your files are in the same folder, I'm not sure you need to type folder's name. Try to remove "master/" in your two lines of code.
When you link stuff to your html file, the path is relative to that file.
So if style.css and index.js are in the same folder, you just link them by providing file names only.
If those file were in the folder above, you would link them by "../style.css" and "../index.js"
If those file were in the subfolder (in relation to index.html), you would link them by "subfolder/style.css" and "subfolder/index.js"
I have a very big CSS file that contains more than 10,000 lines and 10 HTML pages. As of now, the CSS file is getting loaded on all the 10 pages.
Can any one suggest a way to divide the big CSS file into smaller pieces so, I can only load required CSS file for specific HTML page ?
I have tried using Chrome console to see the coverage and only 10% of the css file is in use for particular page.
No Node js and No CSS Frameworks
Create more .css files and load them only in those HMTL files you need the CSS.
So for example make a file only for the slider in the index.html and link it also only in the index.html
TIPP: But also make sure that you make a global_style.css or styles.css for things like header and only connect the classes from the headers with this.
i'm creating a simple HTML site with css and javascript. so there are folders named css and scripts also images for images. the Project structure is like in this image
The problem i have is how to set the paths for the css, images and js files from the html
i have styles.css file with the following style
html {
padding-top: 25px;
background-image: url(images/bg_page.png);
}
the link to styles.css file from html like this
<title>Chapter 2</title>
<link href="css/styles.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Gravitas+One" rel="stylesheet" />
problem: it doesn't set the styles in the css to the html. I don't know how to set the image URL path in css as well. Any one who uses VS 2012, would be able to fix this path problems?
There is this "solution1" folder that it creates, which is kind of annoying. so i wonder is there a better way to organize folders and files especially in VS 2012?
thanks
Are you certain that you set up different folders? Just because the solution shows different folders doesn't mean that actual folders have been created. Check your source folder to make sure.
If the folders exist, try adding / before images in background-image in your css.
Your stylesheet must reference files relative to the stylesheet's folder, NOT the folder of the HTML.
You therefore want:
background-image: url(../images/bg_page.png);
First of all, I'm new to jquery and jQuery UI and how to use it. I downloaded everything I need and moved it to my project folder. However I keep getting the following error because it is looking for a folder in my Downloads folder that I moved to my project folder. I got this error multiple times for all of the images in the folder. How do I fix this?
GET http://localhost:#####/Downloads/jquery-ui-1.11.0.custom/jquery-ui-1.11.0.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png 404 (Not Found) jquery-1.11.1.js:6128
Presuming your project folder is (for example): C:\Projects\
You needed to move jQuery & jQuery UI into it. So your folder/file structure should have:
c:\Projects\
js\
jquery-xxxx.js
jquery-ui-xxxxx.js
css\
jquery-ui-xxxx.css
images\ ((all images for jQuery UI here))
Basically, your jquery UI css is going to have a heap of css lines like this:
background: #a6a6a6 url(images/ui-bg_dots-small_65_a6a6a6_2x2.png) 50% 50% repeat;
This means that wherever you have saved your jqUI css file, should also have an "images" folder which contains the images for the JQUI css!
JQuery UI has a number of images that should have come with it, they come in a folder called 'images' and should be placed in the same folder that you keep your jquery-ui css file. Right now, it looks as if you are keeping your css file inside your download directory, so you would need to copy your images folder (It should be part of the jquery-ui zip file) there.
I would also recommend that you don't work off your download folder, and instead move your jquery-ui files to the folder where your actual project is. Also make sure that you update your html file to point your link and script tags to the new proper directory.
These days I meet so many problems about the path in css and js. And after a few tests,I can not have a exact answer,so i ask here for help.
1 The file and structure.
1)test.css
body{backgorund-image:url(img/bg.gif);}
2)test/js
icon:img/icon.gif
3)example.html
<html>
<link.... src=css/test.css>
<script ... src=js/test.js>
....
</html>
4)example_sub.html
<html>
<link.... src=../css/test.css>
<script ... src=../js/test.js>
....
</html>
5)structue:
+img
icon.gif
bg.gif
+css
test.css
+js
test.js
example.html
+subfolder
example_sub.html
2 question
The example.html work,but the example_sub.html does not work,the icon.gif is missed.
So I wonder if the test.js is a common js which will be used in all the page,so all these pages should be put in the same directory?
How does the path work,I mean how does the browser find the image according the image path?
It seems that the manner in css are not the same as it in js.
Anyone can give me a clearly answer?
BTW,my pages are all jsp,so they are work inder the servlet container.
If I use the absolute path like:
xxxx src="/img/icon.gif"
It will try to find http//localhot:8000/img/icon.gif. Of cource it will get a 404 error.
Any ideas?
CSS
Paths in CSS are relative to the location of the stylesheet. If it is a linked stylesheet, then it is the path of the CSS file. If it is embedded in an HTML document (with the style element or attribute) then it is relative to the HTML document.
JavaScript
JavaScript generally manipulates other documents. Any paths mentioned depend on what manipulation was done to the document. If you use JS to add a style attribute which includes a URL, then that URL is relative to the HTML document since the style attribute is part of that.
Where you aren't manipulating the document directly (because I'm editing this almost a decade later and things like Ajax are now common) then the path is relative to the HTML document.
If I use the absolute path like src="/img/icon.gif" It will try to find http//localhot:8000/img/icon.gif. Of cource it will get a 404 error.
Why "of course"? Make sure that path exists, and you have no problems. Relative URLs with absolute paths (i.e. ones starting with /) are usually the most sensible choice.
CSS uses paths relative to the CSS file location.
JavaScript uses paths relative to the location of the file containing the script tag.
The path is always relative to the path the file referring to it is in. So, let's say your css is in /css/mystyel.css and images are in the path /img, then you refer to that image in css with:
background-image:url(../img/myimg.jpg)
If your js in in /js/myscript.js and you are adressing it from a html-file like /somepath/somehtml.html, then you use:
<script type="text/javascript" src="../js/myscript.js"></script>
If the html was in /somepath/somotherpath/somehtml.html, you would have used src="../../js/myscript.js"
Well
body{backgorund-image:url(img/bg.gif);}
is saying look in this directory for a folder img and the file bg.gif
You want to go back one parent directory.
body{backgorund-image:url(../img/bg.gif);}