I'm using a Javascript library which takes a string specifying a relative path as an option. Using this path, it loads a CSS files which is used for the theme. However, I have placed the themes files elsewhere and want to reference this using an absolute path instead.
This path is relative to the page which calls it. So if the path I gave was /absolute/path/file.js, and I am on [host]/abc/def/ghi, it will call [host]/abc/def/ghi/absolute/path/file.js. If I am on [host]/xyz, it will call [host]/xyz/absolute/path/file.js
I cannot simple go up two or three levels ../../ because that might not be the root directory. Instead, I am doing ../../../../../../../../absolute/path/here.css, to ensure it goes as far back as practically necessary, which does work.
There are no option in the library to use base path.
Is there a more elegant way to specify an absolute path when the library parses only relative paths?
Related
Am using Input type 'file' for browsing files in from my machine using react js application , After select the file from my local i want to get the absolute path of my file , ex : C://something/something.png like this . so i searched on many sites , all are telling that from UI we cant access our machine!! .Ok fine , now my doubt here is then how can i achieve that . can someone help/give_ur_suggestion me on this.
thanks in advance .
You have to use relative path.
In practice, you have to put all your assets, source code, ressources, etc. in one directory to ease deployment. Indeed, when you deploy your code, the server is not aware of your computer. With relative paths, it can resolve the path to your ressources.
You can read on Wikipedia the difference betwen relative path and absolute path:
Absolute and relative paths. An absolute or full path points to the same location in a file system, regardless of the current working directory. To do that, it must include the root directory. By contrast, a relative path starts from some given working directory, avoiding the need to provide the full absolute path.
I'm implementing a jQuery plugin that needs to use some html markup. I try to load the html code by ajax request but the problem I'm facing is it doesn't accept relative paths. I can't specify the path from root folder because I need this plugin to run as library and I don't know on which path the user of the library will put the library folder.
If it's not possible to do something like that what is the best possible workaround. Personally I don't like to put the html markup inside of the javascript code.
UPDATE
html import seems to solve my issue but unfortunately most of the browsers don't support this future yet. Here is a link that describes what html import is http://www.html5rocks.com/en/tutorials/webcomponents/imports/
You shouldn't have to specify an absolute path. jQuery.ajax will accept a relative path. Just be sure to prefix the path with '/'.
The result here is that it will access the relative path of whatever domain/host the script is currently executing.
Alternatively, you can also make the host configurable within your app.
I have a CMS template that uses JavaScript/jQuery to insert an image onto the page. This works fine when I specify an explicit path to the image, but because I use the template on several sites, the path needs to be determined automatically.
Making things a little harder is the fact that the path to the template (and therefore the image I'm linking to) changes periodically with each revision to the template.
Here's the (extremely simple) relevant code at the moment - which technically works in the short term, but is not the solution I'm looking for:-
src = '../template_v1/images/pdf_small.png'
This correctly generates the base URL, but breaks as soon as the template version is incremented (and the path changed) to template_v2 or template_v3, for example.
The JavaScript/jQuery file (again, included with the template) is located at http://www.domain.com/template_v1/js/this_file.js - so with that in mind, I want to be able to automatically generate a path to the image relative to the location of the this_file.js file. If this were CSS this would be easy, as non-explicit paths are relative to the CSS file calling the path - but I don't know how to accomplish this with JavaScript/jQuery.
Thanks in advance for any tips.
Do you need to go up a folder at the start of the source? Would going from the current directory work and stay within the template folder entirely:
src = './images/pdf_small.png'
I'm working on a SPA, and have optimized one of my code files with the requireJS optimizer, and set the new path like this:
config.paths['billingmanager/billing/billing'] = 'billingmanager/billing/billing-build';
Unfortunately, code that now (conceptually) does this
require(['text!billingmanager/billing/billing.htm'], callback);
now attempts to find billingmanager/billing/billing-build.htm and fails miserably.
Can can I tell text! that, no matter how the normal require path for billingmanager/billing/billing is set, I want you to fetch the file billingmanager/billing/billing.htm—period.
I do have a workaround, to do something like this
config.paths['billingmanager/billing-htm'] = 'billingmanager/billing/billing.htm';
and then manually know to use require(['text!billingmanager/billing-htm']); but I'm really hoping there's a simple fix here.
I've not run into this specific problem but the first thing I'd do to work around it would be to replace the path I give to text! with a relative path, which should avoid the clash with the path you've got in your paths. So, for instance:
require(['text!../parent/billingmanager/billing/billing.htm'], callback);
Of course the actual relative path you should use depends on the architecture of your application. It turns out that just using ./ won't be enough to work around RequireJS' cleverness so in the illustration above, I'm backing out of the current directory and then going back in. I've assumed that the current directory is name parent.
Note that the rules for path resolution for the path given to text! is different than the regular path resolution rules. Normally, adding an extension to a path given to require will completely bypass the paths setting. So require(['billingmanager/billing/billing/foo.js']... will look for a file named billingmanager/billing/billing/foo.js relative to baseUrl and will not use the paths setting you've shown in the question. This is not the case for paths given to text!. These paths go through the paths setting even if they have an extension. (This is documented here.)
I'm working in Firefox and relative paths are not working.
One caveat is that I stream my .css file using AJAX and add it to the DOM dynamically.
Another caveat is that my site is entered in one of two ways:
www.host.com (use this for production)
or
www.host.com/dev/ (use this for dev)
Images are either here:
www.host.com/host/images
or
www.host.com/dev/host/images
depending upon how you enter the site.
I can post any information needed and test out a solution.
I was using
../images/name.jpg
but the browser somehow took this for:
hosts.com/images/name.jpg
which does not exist.
This is a question about relative paths and implementing correctly.
Absolute Path URLs
Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to this Web page is:
What is the correct way to specify relative paths in streamed CSS?
You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to google it would be ...
If you're referring to a Web element that is on the same domain that you're on, you don't need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name.
It is a good idea to use absolute paths, without the domain name, on most Web sites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance.
Relative Path URLS
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information
listed filename
sub-directories are listed without any preceding slashes
weekly/filename
links up one directory are listed as ../filename
How to determine the relative path:
Determine the location of the page you are editing. This article is
located in the/library/weekly folder on my site.
Determine the location of the page or image you want to link to. The
Beginner's Resource Center is located here: /library/beginning/
Compare the locations and to decide how to point to it From this
article, I would need to step up one directory (to/library) and then
go back down to the beginning directory
Write the link using the rules listed above: ...
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
The relative paths are always relative to the CSS location, not the web page location that references the CSS file. So the question is, what is the location of the CSS file to start with? If you make all paths relative to it, it should work for both your production and development URLs.
I need to test this out, but for dynamically inserted CSS all paths are relative to the root directory or www.host.com...where this resolves to...this is essentially saying all paths are actually absolute...this is the behavior I am seeing in FireFox.