Why does href="/../subpage/doc.html" work? - html

The website I found looks like the following:
current URL: http://www.example.com/stocking/
a link: <a href="/../shop/alphabetic/page">
this takes you to http://www.example.com/shop/alphabetic/page.
From what I understand about relative paths, you use a leading slash to refer to the current base URL and leading points to go from the current directory. Therefore, it should make no sense to do the above.
Actually, I'm surprised this is even working and somehow equivalent to either
href="../shop/alphabetic/page"
href="/shop/alphabetic/page"
which should work as well for this purpose.
So how does this even work?

/ starts an absolute path.
../ then goes up a path segment, but as you are at the top already, it has no effect and is ignored.

Related

HTML form action relative path wrong

I have a form with a relative path action action="updateItem/:id" in the route /wishlist/admin. I expected this to post to /wishlist/admin/updateItem/:id but it's posting to /wishlist/updateItem/:id instead.
Is there any way to make this relative to the current page or should I add admin/ to the start of the form action?
A relative path replaces everything after the last / in the existing path.
Your base URL needs to be /wishlist/admin/ and not /wishlist/admin.
I generally recommend using absolute paths to avoid any issues with having two similar URLs like that.

Why doesn't appending a path segment work using href="./other"?

I'm confused when it comes to how relative paths are calculated in urls.
When having a base url without a trailing slash ("example.com/a/b") I can't append a new segment with a relative path using only the new segment?
Why doesn't appending a path segment work using href="./c"?
When using href="../c" I get the expected result, a relative path one level up in the hierarchy. But what is the syntax to append a relative path even when the base url doesn't end with a trailing slash?
Just using href="c" replaces the last segment and using href="/c" removes all segments. The only relative option I have seem to be href="b/c" but then I have to repeat the last segment which doesn't always make it so easy. I wish href="./c" or something similar would work...
But perhaps "./c" is not correct because the dot refers to the "folder" which in this case could mean the last segment ending with a slash? But even then it should be possible to use some other syntax to accomplish the same.
Relative URLs (which don't start with a /) are always computed from the last "directory" segment of the path. Any "file name" part is dropped. There is no way to change that with plain URL syntax.
You could do it by writing your own URL resolution code in a programming language of your choice.

Absolute href address resolves with prepended relative link?

I'm a bit baffled about this, so I'm guessing I must be overlooking something very simple or obvious.
I'm trying to provide some external links on a page advertising a bicycle, but the absolute links are resolving with the relative path prepended to it. Here is [the page] https://dl.dropboxusercontent.com/u/9972753/rambler.htm.
Click on any link and you'll see they resolve as:
location of HTML file(Dropbox)/"absolute link"
Any help would be much appreciated.
Thanks!
Rory
You're not using the correct double quotes characters. You must use " instead of ” otherwise your browser will add the correct double quotes itself and use the document base of the page (i.e. the dropbox link) as a prefix of whatever comes after the href attribute. In your case that includes the whole URL with the wrong doubles quotes, which the browser thinks are part of a relative URL (since the URL doesn't start with either an URL scheme (e.g. http://) or a forward slash.
PS: Is it possible that you've copy-pasted these links from Word or something?

How to go to sub-directory with relative URI

Sorry if it so basic but I could not find the answer by searching.
If we are in the page http://www.example.com/a-dir-without-trailing-slash how we can reach the sub-directory http://www.example.com/a-dir-without-trailing-slash/pic using relative URI? (we do not know the current directory name(i.e. a-dir-without-trailing-slash)
Some more explanation:
a-dir-without-trailing-slash is the name of an article in the website. It is not an actual directory nor an actual file name. Now, I want to get the pictures that are used in this article by addresses like:
http://www.example.com/a-dir-without-trailing-slash/pic/1
http://www.example.com/a-dir-without-trailing-slash/pic/2
,...
and in the webpage html, I would refer to them with something similar to:
<img src="pic/1" />
If the original article address was in the form of http://www.example.com/a-dir-with-trailing-slash/, the above example would work finely. I want to know if is it possible to get a relative URI with current article addresses (without trailing slash)?
Thank you very much
I suppose you want to avoid hard coding "slugs" in the content so that they can be stored and manipulated independent of each other.
One solution is to use the base tag which allows you to specify the prefix that is added to relative URLs instead of typing them all over the place.
Make sure that your website uses absolute URLs where necessary.
Modify your CMS to "generate" and place the following tag inside the head section that contains trailing slash:
<base href="/a-dir-without-trailing-slash/">
Then you can use relative URLs inside the content, for example:
<img src="pic/1">
<!-- http://www.example.com/a-dir-without-trailing-slash.html/pic/1 -->
You need server side scripting to add the filename to urls (or may be just one '> tag in the head). – Salman
Bounty get.

Absolutizing an image url with a ".."

I have an HTML document I'm transforming with an image whose source url looks like this:
"../foo/bar/baz.png"
I'm using a tritium function to absolutize image source urls, but the ".." seems to be stumping it. It's prepending the hostname, etc, but when it does, it adds one too many layers.
So for example, the correct URL of the image is:
"www.host.com/foo/bar.png"
But the page on which it appears is at "www.host.com/site/baz/page.html"
The source of the image in the original html is therefore "../foo/bar.png"
But the absolutized result I'm getting is: "www.host.com/site/foo/bar.png"
In other words it's going up the file tree to "/site/", but it needs to be going up one more. I don't really see how it even works on the original page without another ".." How should I be handling the ".." in the url?
.. means to traverse one level up; you are using a relative path, not an absolute one like you should be. Drop the dots:
<img src="/foo/bar.png"> will load the image from the root of the domain.
There is a huge difference between src="/foo/bar.png" and src="foo/bar.png" (Notice the slash after the first double quote)
First one points to http://example.com/foo/bar.png NO MATTER what.
Second one, however, (without the beginning slash) is relative URL so the output path depends on the file on which the image appears.
That is why you were getting "www.host.com/site/foo/bar.png" (one level up relative to the file path).
Two solutions:
1) src="/foo/bar.png" OR
2) src="../../foo/bar.png"
I always recommend the first approach because even after you move the files around, you won't have to change the absolute URL. (I learned it the hard way)
P.S. this rule applies to CSS files as well. (for example when specifying the background image URL) If you use absolute paths, you won't have to bang your head on the wall when you change the directory of the CSS file.
As you're in a Moovweb project, I would suggest manipulating the problematic src before you use the absolutize() function.
Is there an easy way you can select the image using Tritium? I'd suggest doing that, then manipulating the src attribute:
$("./img[#id='']") {
attribute("src", "/foo/bar.png")
}
After this, you should be able to use the absolutize() function and the src will be rendered correctly.