I've previously written about absolute and relative paths in web development, and this follow-up post is here to show the method I've been using to get around the problem.
The secret sauce is the old HTML <base> tag. Simply
output this in the <head> section of your template,
with the href attribute set to the full URL of your site's
root, then you can use a simple helper function like the one below to
build full URLs in your javascript!
I've been working on multiple computers for some time now, and there's one problem that keeps cropping up now and then, and sometimes when going from development to production, or when a folder changes name... Whatever.
The problem I'm talking about is relative/absolute paths in non-server-side processed files. For example, creating an AJAX loading image from a JavaScript file. What path should you use? "/images/file.gif" will point to the root, and "file.gif" will look in the current directory. The script doesn't always know the path relative to the current document, and it won't (easily) know what directory the images are in from the docroot. So what to do in this case?