Let's say I have style.css:
#some_element{
background-image: url('img/picture.gif');
}
The css and picture.gif are located in such a structure:
style.css
other_style.css
more_style.css
img
picture.gif
Using php, I combine style.css,other_style.css and more_style.css into cache_style.css which is located far far away from the original location.
In this case, the link will be broken.
In html, we have tag to define (as it name) base url of current document. So that every link and every image can take things base on that base url.
Is there any alternative for css & javascript to do this?
EDIT: some of the css/javascript are minified third party, which is nearly impossible to change "img/picture.gif" into "/something/img/picture.gif"
Use an absolute path from the root directory that you're serving:
background-image: url('/img/picture.gif');
In javascript you can define a variable to hold your base url, however you can't reference or set CSS with that variable. One approach that would work is to use an absolute link to the gif instead of a relative one. Alternatively, if you know where your cache_style.css file will end up in relation to the root of your site, you can reference the gif by it's relative location to the root. For example if your cache_style.css is located at www.example.com/path/path/cache_style.css, you can reference the img directory by doing this ../../img/picture.gif
Related
I'm trying to make a little website browsable both online and offline using only html, css and a little of jquery\javascript.
Hence I'm using all relative paths and everything works fine unless I came to the issue to load a custom menu in all my pages with a little smart jquery include.
However since my menu.html is loaded in different pages located in different subdirectories of the tree structure I am wondering what's the smartest way to write down the href links of the different voices in the menu.
I initially started using all absolute paths in the menu.html, but of course it just works only online or offline based on which root domain I use in the absolutes paths (either http://mywebsite.com/ or file:///D:myfolder/etc).
Of course also using the / at the beginning of a link works only online, since locally the / stands for the drive letter where the websites' folder is placed and it will work if and only if the website's folder is saved in the highest path like as D:/myWenbsite. I'd like to make something more adaptable regardless of the local path.
The best way in my opinion is to use relative URL's from the root. For example in your menu.html file when you reference jquery you can do the following:
/javascript/jquery.min.js
Adding the beginning '/' makes it so that the path always starts from the root of the domain no matter where your html is at in your directory.
If you used:
javascript/jquery.min.js
That means in whatever directory your menu.html file is in, a folder for javascript would also need to exist and that is not generally wanted.
Using the <base> command within a little script to change it solved my issue.
Here is an example:
<head>
<!-- Here a direct path is need to firstly load jquery -->
<script type = "text/javascript" src = "../include/js/jquery-1.10.2.min.js"></script>
<base id="host" href="" />
<script>
/* Where am I? */
here = window.location.href;
hereIndex = here.indexOf('temp-test');
/* make substring from root till temp-test/ */
newPathname = here.substring(0, hereIndex+10); //+10 to consdier also temp-test/
$("#host").attr("href", newPathname);
</script>
</head>
Don't know if there is a better way to do it.
Anyway even if the page renders correctly in the console log I still get errors on every relative path I have GET file:///D:/temp-test/core/image/temp1.jpg net::ERR_FILE_NOT_FOUND however for instance, this image is instead properly loaded. So what's up here with the base tag? It is kinda of not getting recognized but it works..
Further investigation is needed for me.
I have a new server and I have existing files with relative links in CSS, img tags, etc. How do i set my own window.location to be followed by such files, I am not looking for anything hectic in particular just for within my website. e.g http://stackoverflow.com and https://stackoverflow.com/questions/ I need the latter to be my site-url. I am thinking in the lines of javascript but any solution is welcome.
Maybe you will be able to use the <base>-tag
<base href="http://www.example.com/">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
i have problem this is javascript function its dont show the image in background.
document.getElementById(showtag).className='loadings';
and this is class property in css i think the problem is in url path.loading.gif is in images folder.
.loadings
{
height:50px;
padding-left:15em;
background-image:url('images/loading.gif');
background-repeat:no-repeat;
background-position:center;
}
The problem is most likely that you have a directory structure like:
/css/style.css
/images/loading.gif
so your CSS is pointing to
/css/images/style.css
If so, add a / to the front of the URL.
You'll have to use the right path for the gif.
Now let's say your css loads from the path /style, and the image you look for is stored in the path /img/backgroundimages, then the background-image url could be url(../img/backgroundimages/loading.gif) or url(/img/backgroundimages/loading.gif). In other words, use a relative path originating from the path your css-file is stored, or use the absolute path from the server root (prefixing the url with /).
Assuming the variable showtag contains the id of an element that already exists on the page, your code should work.
So things to look at:
Does showtag have the correct value? (Check it by single-stepping the code in a debugger; in 2011, there's no excuse for not using debuggers for client-side code.)
Does the element exist when the code runs? Or is it added later? If it's added later, you will want to schedule your code to run later (by putting your script element at the end of the page, just before the closing </body> element, or by using window.onload or whatever "loaded" or "ready" event is provided by your library, if you're using one).
What happens if you manually add a div with that class to the page? Do the styles from the class get applied correctly? If not, you know you have a CSS/HTML problem, not a JavaScript problem. The developer tools in most browsers (see point 1 above) will help you figure out what the CSS problem is as well — for instance, by showing you that the image request is a 404 if the path to the image is incorrect.
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);}
If I put in the src attribute ./images/nothing.gif what does that translate to?
I have a javascript file that makes src attribute of some html element to 'nothing.gif'
but on the page nothing.gif shows as 'file not found' symbol.
Currently nothing.gif resides at the following place in my ftp server:
/www/foldername/wp-content/themes/themeg/images/nothing.gif
the javascript resides at:
/www/darksnippets/wp-content/themes/themeg/javascript.js
since this is wordpress there is no actual 'html page' the content is stored in the DB. so If I used ../ where should I place nothing.gif?
Edit:
here is the link to the page: http://www.darksnippets.com/?page_id=56
nothing.gif can be found here: http://www.darksnippets.com/wp-content/uploads/nothing.gif
in the bottom right you will see broken image symbol (this shows up in IE of Chrome. does not show in FF)
The relative path ./images/nothing.gif is interpreted by the browser, not the server. So it will look at the url from the browser's perspective to resolve the path. What is the url that the browser sees?
Update:
I see you've provided URLs. Change your relative path to:
./wp-content/uploads/nothing.gif
But a better solution would be to use a root relative path. i.e. one that starts with a /
If the HTML page is http://www.darksnippets.com/?page%5Fid=56 then nothing.gif points to http://www.darksnippets.com/nothing.gif. The location of the Javascript is not relevant. So you should just need "wp-content/uploads/nothing.gif".
One of the ideas is to use a full path to the image file
e.g. http://www.yourdomain.com/images/nothing.gif
Not having worked with wp very much, I can't give a specific answer, but a general solution would to be to use the format "http://www.sitename.com/folder/nothing.gif" Where, of course, sitename.com/folder gets replaced with your domain name and the folder on your site.
If you're writing a Wordpress template in PHP, you can access the full path to your template directory with:
bloginfo('template_directory')
Alternatively, if you can set the images as background images via CSS (instead of using src), relative image paths defined in CSS will be relative to the CSS path:
.nothing { background: url(images/nothing.gif); }
As I thought, in IE and Firefox the browser is looking for http://www.darksnippets.com/images/nothing.gif. The relative URL is relative to www.darksnippets.com (the url of the page), not to the javascript's location.
Ates Goral's answer is correct. I'll expand to address other questions you raised.
In relative paths, . (single dot) refers to the current path. This will generally be the path of the page loaded (and resolved according to the rules of your web server), unless your page uses a <base href="..."> which is different from your current path. This is because every page loaded has a base path, which defaults to... you guessed it, . (single dot). Likewise, .. (two dots) refers to the parent directory of the current path (also resolved according to rules on your web server).
For this problem you can simply remove the dot(.) and / sign from your code
So now your code will be like
src = images/nothing.gif
I think this will work for you.