I want to use Javascript to open an HTML page which is in a sub-folder, but continue to have the path relative to my top level files. I have the code below and the HTML link works before the page is changed but not afterwards, because everything is then relative to the sub-page. If I click on the link after the page has been changed, it tries to open 'myFolder/myPage.html' which of course does not exist:
.. in HTML
My Page Link
.. in javascript
var pageInFolder = 'myFolder/mySubPage.html';
window.location.href = pageInFolder;
I could change my links to have absolute paths, but is there a way to display the page in the folder, but keep the path unchanged at my top level?
You can use the HTML <base> tag. It lets you define where paths are relative to.
Something like:
<base href="http://www.example.com">
It is recommended that you put the base tag as the first tag inside the <head> so all paths in your file appear after it. With my example, even if you're in myFolder, any relative path will refer to http://www.example.com/myPage.html, not http://www.example.com/myFolder/myPage.html
Note though, this doesn't just apply to <a href="">. It applies to images, JavaScript files, CSS files, etc. Anything where you'd use a path.
Just add / at the beginning of your relative paths
var pageInFolder = '/myFolder/mySubPage.html';
Related
I'm wanting to create a website with common headers and footers for each webpage and am currently using the answer supplied here.
However, I have a website with a tree diagram similar to:
- index.html
- header.html
- footer.html
- folder
- info.html
In my header and footer files, there are multiple (relative) links such as to image sources, other pages, etc, which means while they may work in index.html, if I try to load it into info.html, the links break.
Is there any way to change all links to look one folder back, etc, or would I have to use javascript to change the src property for every referenced image?
Add the <base> element to your info.html and make its href tallying the relative links of your header and footer markups.
For example, if your website is hosted in http://example.com/foo and your relative links are such as ./images/xyz.jpg, the base element of the info.html would be like this:
<base href="http://example.com/foo">
The browser will compose the relative urls from there.
Another option is to configure your relative urls to pick up resources from the root.
In above configuration, instead of this:
<img src="./images/xyz.jpg">
...you can use
<img src="/foo/images/xyz.jpg">
So, wherever it is executed from, browsers will start the relative paths from the root.
The advantage is that this will enable easy local testing too.
You can use <base> tag in your info.html file's <head> tag with a href attribute.
The <base> tag specifies the base URL and target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be inside the <head> element.
You can find more in this example.
This is basically what the <base> element is for. You include it in the document and specify an href from which all relative links/urls are resolved.
I have a webpage at a certain url, say https://example.com/foo/bar/xyz
In this said page, I have multiple anchor tags with root relative paths, e.g. Link 1
Now when I hover over these links, my browser shows a valid preview of them, i.e., it shows https://example.com/blah/rand/abc which is expected, but on clicking them, I get routed to https://example.com/foo/blah/rand/abc
I find this behavior very strange and I have verified that the html served at the original url does not have any <base> tag in the head section. Is there any other way to control the base path for a relative url?
What's also strange is that there are a bunch of css files loaded through their root-relative paths, and they seem to be loading fine. So, I suspect something in the javascript on the page to be interfering with these. Also to add context, this is a SPA built on backbone.js - so the base html returned by url mentioned in line 1, just returns a skeleton html with a div where the actual app is initialized - which is where these buggy anchor tags eventually turn up.
I have a somewhat annoying issue... I have a JS function which toggles the image of an element on a certain event (click). This function is executed on multiple pages.
In the js, I have a like that goes like so:
img.style.backgroundImage = 'url(../assets/img.png)';
Everything works perfectly fine when the function is being called from a file that exists in a different folder... Folder structure is like so:
/project
/assets
/html
/js
index.html
Notice the index file sitting the parent folder? When I execute the function from this index.html file, the images can't be found (Since the JS is looking outside the parent folder thanks to the '../'), but it works for all other pages inside the html folder, since the relative path finding will go out to the parent folder, and then into assets...
Anyway I can make this smart without having to resort to other completely different approaches? I know I can just rely on some CSS here, add and remove classes to toggle images instead of directly changing the image source...
Its odd though, the relative path works from css where the css behaves as the anchor for the path finder... But if you use JS to change the css property, the html file becomes the anchor...
img.style.backgroundImage = 'url("assets/img.png")';
Make the path relative to site NOT the current page or style sheet.
When including a relative url in CSS the url is relative to CSS's url, which is I assume is in the assets folder.
img.style.backgroundImage = 'url("/assets/img.png")';
I am using javascript and somethimes a cretain js file need specific css file made for it.
I want to prevent put absolute paths of the css files in javascript.
I even want to put the js file in the same folder of the css file.
But the path of the js file is calculated from the file that executes it.
How can I connect between this js file and the css file?
There is no perfect solution to this.
One of the solutions that come to mind is to analyze (using DOM) the script tags on page to find out the path that was used to load script itself, then calculate path relative to this.
Other solution is to use js combiner and css combiner and just always load all js and css needed for site.
But the path of the js file is calculated from the file that executes it
This is not always true. Just start the path with a forward slash and it will be relative to your root web directory e.g.
<link type="text/css" rel="stylesheet" href="/path/to/style.css" />
You can declare one global variable holding the "relative" path than use it whenever you need to specify file path. Example:
<script type="text/javascript">
var _relPath = "MyFolder/CSS";
...
function SomeFunc() {
var cssFileName = _relPath + "/myfile.css"; //instead of MyFolder/CSS/myfile.css
}
...
</script>
This way it's easier to change.
If you have server side language in use e.g. ASP.NET, classic ASP, PHP - you can output the relative path of the current page let us know if relevant.
It would be simpler just to define the needed CSS within the JavaScript file, if you absolutely need to link the CSS and JavaScript together. You can make a HTML page use CSS files dynamically from JavaScript by adding new link tags, but to my best knowledge, there is no way to specify the paths relative to the JavaScript file.
However, one thing you could do is this. First have each HTML file specify the script root path relative to that file, like:
<script type="text/javascript">
var jsPath = "relative_to_this_file/styles_and_scripts/"
</script>
<script type="text/javascript"
src="relative_to_this_file/styles_and_scripts/styler.js">
</script>
and having the styler.js code do this:
var myStylePath = jsPath + "myStyle.css"
// add link tag for the CSS to HTML here using myStylePath
You could also generate absolute paths in JavaScript or in code that is serving the JavaScript dynamically in a similar fashion. If the root part of the absolute path changes, you only need to adjust a single line of code accordingly.
Alternatively, you could also consider a different strategy: link the CSS files statically from your HTML pages, and use classes in your CSS selectors (.myClass { float: left; } ). Then you can easily use JavaScript to add new classes to the HTML tags you want to style.
I am trying to change the background of the input button when clicked by using jquery but for the life of me, can't figure out the relative path to make it work.
js file is in root/js folder
css file is in root/css folder
My code looks like this:
jQuery($button).css('background',"url(../images/updating_button.gif)");
But this just doesn't work...it can't find the image with that path. if I use absolute path it works obviously but i really need it to be relative.
I have tried all combination that I know like:
/images/updating_button.gif
..images/updating_button.gif
images/updating_button.gif
updating_button.gif
If the URL is static, you could declare a class with the background and maintain your relative path.
In your CSS:
.updating { background: url(../images/updating_button.gif); }
In your JS:
jQuery($button).addClass('updating');
You are aware that paths in any inline styles (whether set with JS or not) will be relative to the current HTML document (the URL on the browser's URL bar), not any other file, right?
And why are you avoiding absolute (or domain-relative) URLs?
I wish I could test this for you, but I've had some issues with the url property in the past; adding single quotes inside the url() has proved to be the most reliable with relative paths.
jQuery($button).css('background',"url('../images/updating_button.gif')");
Also, what does your file structure look like?
The following code might be useful for you:
jquery("button").css("background-image","url(menubar/ajax-loader.gif)");