So I code in Sublime Text 2 combining HTML, CSS, and jQuery to make web designs.
For some reason, when I am trying to specify a location of a file, say Pic01.jpg in the folder images, you would suspect typing in /images/Pic01.jpg should be enough to tell the browser where the picture is located.
But this is not the case. I find myself needing to specify the exact location of the file before the browser will render it. Like; User/Desktop/siteOne/images/Pic01.jpg
This path system is very inconvenient, as I would like to say - export my sites to different computers, but now the code is bound to that specific location on that specific computer.
How can I set it up to make /images/Pic01.jpg sufficient coding for the browser (or Sublime?) to understand what needs to be rendered?
Prepending the path by / means that it will start it search at the root, which can change depending on your server configuration.
With WAMP/MAMP, I have to prepend my URLs by / and then the name of the folder they are in, if they are not at the absolute root of the server. It depends on your setup.
If you want paths that will work regardless of the server root, it's best to use a relative path or use a constant that can easily be changed depending on the configuration.
Example :
define("PATH", "/");
Link that always work
You will only have one line to change to make your paths work all the time with a different configuration - relative paths can be tricky to deal with when working in deep sub-folders.
Furthermore, if you want to see where it's actually looking for the file, open the Console in your web browser of choice, they should display the error (404 most likely) and the path it's looking at.
Related
This is probably a dumb question, but I'm worried :
I have published a website on a server, then made some changes to a css file.
As the css file was already cached by my browser, it didn't display the changes.
deleting the cash allowed to display the changes.
Now my worry is that if some users have previously been to the website, and it is cached by their browser, if I make a change they wouldn't be able to see it.
How do you guys prevent this ? Do you just change the file names ?
Sorry for my noobness,
Thanks.
There are a number of solutions floating around the web, but as far as I can tell they all boil down to changing the CSS filenames whenever their content changes. That way you steer clear of user caches and server caches serving old content.
Variants:
Instead of changing the name of the file itself, create a symbolic link with a new name to the old file whenever content changes.
Instead of changing the name of the file, change the way it is referenced by the page. Replacing myfile.css?v=1 by myfile.css?v=2 circumvents people's caches.
Write code that automatically changes the name or the link name or the way the file is referenced
Use a framework that does one of the above.
And: remember that the same problem applies to any content that might be cached, like JS files.
Doxygen's html file extensions default to .html. I'm not so concerned about what the filenames are on disk--but the internal links in the pages will still have the extension. This runs counter to the recommendations of Cool URIs Don't Change.
I did discover that there is a HTML_FILE_EXTENSION, which theoretically lets you change the extension to anything you want. You can get it as far down as .--but you can't give them no extension. Leaving it blank causes it to default back to .html. :-/
It's of course easy that when you get ready to publish, you can switch the extension to .strip-me-from-docs-for-publication. Then do a search/replace of that with nothing (or / if you believe in trailing slashes in URLs, which I think I do). In the meantime you'll be able to take advantage of browsing the generated docs locally without pushing them to the server.
I'm wondering if there's any kind of smoother way to approach the problem, skipping the search/replace step?
I guess using a script to rename doxygen output files and then search and replace the links within these files is the straight forward option.
Another way could be to use mod_proxy_html and its ProxyHTMLURLMap feature.
See http://httpd.apache.org/docs/current/mod/mod_proxy_html.html
Maybe it has to be used in combination with mod_rewrite. See http://httpd.apache.org/docs/current/mod/mod_rewrite.html and http://httpd.apache.org/docs/current/rewrite
I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:
background-image: url('images/ClanSpider.png');
In my app, I have a method that changes the background DIV based on a selection made in a dropdown list from a previous method using jQuery:
function ResetMyHonor()
{
ClanImage = 'images/Clan' + MyClanName + '.png';
$("#MyClanName").html(MyClanName);
$("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}
All of this works fine when I'm on the root of my page. However, I have some links within the app using hash tags to navigate the page (such as #MyHonor). When I've navigated to one of these tags and call my reset function above, the image breaks. When I pull up the Chrome Inspector to look at the DIV tag, it says that the image it is trying to load is "images/MyHonor/ClanSpider.png" which doesn't exist.
I know the CSS url will generate links in reference to its location within the application, but it doesn't matter where I move the CSS files in the application.
Is there a way for me to rewrite what comes out of the url processing or an alternate way of specifying the background image of the DIV without doing any kind of server side processing? Ideally this app will run through the manifest cache feature of HTML5, so I won't have access to any server based languages.
Try putting a leading slash on those paths to represent the root.
ie use:
url('/images/ClanSpider.png')
instead of
url('images/ClanSpider.png')
From reading through your comments on the other answers I think you're creating a problem for yourself that doesn't really exist. If url('/images/ClanSpider.png') is going to work when you upload to the web server then the trick is to make it work the same way when working locally. By far the easiest way to do this, especially if your focus is an offline app which has little in the way of server side requirements (which I'm assuming is true, as you mentioned file:/// URIs), is to run a local web server.
Python ships with a module SimpleHTTPServer, if you have Python installed then starting it is as simple as going to your L5RHonor project directory in a command prompt and issuing the following command:
python -m SimpleHTTPServer
Then instead of accessing your files with URIs like this:
file:///H:/Projects/L5RHonor/images/ClanSpider.png
You will access them like this:
http://localhost:8000/images/ClanSpider.png
All your root relative file paths will now work correctly, as an added bonus the offline caching will work correctly in Chrome and you'll be able to see from the log in the command prompt window that it is requesting and caching the correct files according to your manifest.
The simplest solution is obviously adding a slash to the URL to make it absolute. That will work fine, but it makes it impossible to move the application into a sub-directory, or to move static resources to a different server. If that is a problem, there are various alternative ways.
If the number of possible background images is finite, you could define every one in a class of its own:
.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); }
...
and then do an .addClass() to set the correct image.
Other than that, as far as I know, there is no way to specify a path relative to the style sheet (rather than the current document) when setting a background image path in Javascript. You would have to work with absolute paths, or define a root path in JavaScript, and use that:
// in the script head
imageRoot = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');
The location of the CSS file is irrelevant, you are modifying the .style property of an HTML element. This is the same as using the style attribute.
As this is CSS embedded in the document, all URIs are relative to the document.
You probably want to start the URL with a /, or if you really want the absolute location specified in your question: http://
Try adding a / at the start of the URL?
I'm trying to move all the images stored in web application folder to a database. And calling them with a servlet. Is it possible to call a servlet from my css ?? or is there any way to call a remotely stored image file from css??
I tried to call a servlet method from CSS.But couldn't succeed. Is it possible to call a method like this?
background-image: url(servlet/com.abc.servlet.GetImage?name=home&GetImage('abc','123'));
Yes. As long as the images have urls, you can use it in your css.
For example:
background-image:url('/getimage.ashx?id=3');
You can even go a step further an reroute their urls - you can even use the same urls you have today, but having your server handle the request and loading files from the database.
Another tip: make sure you set the right headers. You want to use the correct content type, and probably want the images cached properly on the client side.
Yes. A CSS rule that specifies an image can contain any kind of URL that the browser can parse and fetch:
body {
background-image:
url(http://www.domain.com/servlets/my_servlet.jsp?argument=value)
}
It is possible. Just create an imageservlet like this example here. To the point just obtain the image as InputStream from DB by ResultSet#getBinaryStream() and write it to the OutputStream of the response as obtained by HttpServletResponse#getOutputStream() the usual Java IO way. Don't forget to add the HTTP content type and content length headers. If you omit the content type, the browser don't know what to do with the information. If you omit the content length, it will be sent with chunked transfer encoding, which is a tad less efficient.
As to referencing the servlet in the CSS file, just specify the URL relative to the CSS file. This way you don't need to worry about the context path. Determining the relative URL isn't that hard, it works the same way as with accessing local disk filesystem paths in the command console. cd ../../foo/bar/file.ext and so on. You've ever learnt that at schools, yes?
OK, assume that the imageservlet is located at http://example.com/context/image?id=x and that the CSS file is located at http://example.com/context/css/globalstyle.css (thus, the current folder is css), then the right relative URL to the imageservlet from inside the CSS file would be:
background-image: url('../image?id=123');
The ../ goes a step backwards in the directory structure so that you go from the folder http://example.com/context/css to http://example.com/context. If you still have a hard time in figuring the right relative path, then let us know the absolute URL of both the servlet and the CSS file, then we'll extract the correct relative path for you.
I have a large (700kb) Flex .swf file representing the main file of a site.
For performance testing I wanted to try and move it off to Amazon S3 hosting (which i have already done with certain videos and large files).
I went ahead and did that, and updated the html page to reference the remote .swf.
It turns out that Flash will load any resources relative to the .swf file accessing the resource - no matter what the root of the html page is. So my resources are now being loaded from the remote site (where they don't exist).
There are two obvious things I could do :
* copy all my resources remotely (not ready for this since i'm just testing now)
* add in some layer of abstraction to every URL that the .swf accesses to derive a new path.
I really want to flick a switch and say 'load everything relative to [original server]'.
Does such a thing exist or am I stuck loading everythin from the remote machine unless I fully qualify every path?
i want to avoid anything 'hacky' like : subclass Image and hack the path there
Append a slash before your urls, this should load relative to the domain instead of the current folder:
foo.load('/like/this/image.jpg')
This is a bit quick and dirty, feeding a "relative" url via a querystring (or the base parameter) would be way more flexible.
You could try specifying the base parameter of your SWF's embed/object tags. In theory it defines the base path that will be used to resolve relative paths for loading, but I don't know if it will work if the base value points to a different server from where the SWF is.
See the docs on embed/object params here. Scroll down to "base" at the middle.
If that doesn't work, another thing I've seen people do is to pass in a custom base path via flashvars. Then inside your SWF, you check if that base path is defined, and if so prepend it to relative URLs before loading.