If i am having main folder, inside the main folder there are two sub-folder and in each sub-folder there is a page, example(in 1st sub-folder there is one.html and in 2nd there is two.html) and in main-folder i have index.html which has navigation menu bar, now how can i link them in menu bar without using absolute path. Help me if there is any script in javascript or jquery.
Do you mean something like this?
From main folder:
My Page
From sub-folder to another sub-folder:
My Page
In JavaScript sub-folder to another sub-folder dynamically:
HTML:
<a id="link"> My Page </a>
JavaScript:
var a = document.getElementById('link');
var subfolder = ... ; // your subfolder
var page = ... ; // your page to go to
a.href = "../"+subfolder+"/"+page;
What you want is root relative paths: http://ifyoucodeittheywill.com/2009/03/absolute-relative-and-root-relative-urls/
These always take the form of:
/Level1/Level2/file.html
Being root relative it always references the root point of the website. This is also very handy for your javascript and css resources, in that the link to them is always the same regardless of the folder depth or site architecture. E.g.
/Script/myScript.js
/Style/site.css
Will work regardless of where file calling the resources is located in the website.
Related
I included a navigation element in multiple pages like this:
<script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>
But this works just for html-files in the same directory "subdir". The navigation.html cannot be reached from the index.html in the upper main directory "dir".
If I add the upper pattern to the index.html in the directory above the navigation.html is reached correctly but the relative links do not work anymore. I don't want to replace the relative links by absolute paths.
Is it possible to switch between different links in navigation.htmldepending on wherefrom it is called?
Any other ideas?
Thanks a lot!
Since this is a multiple page website that reuses the same menu on all its pages, there's no functional or logical difference between page1.html and index.html apart from index probably being the first page you see. So I would just put index.html in the same folder and call it a day. It would make sense to have it on an upper level if the index page would load all the other pages into itself. Then the menu would only need to be included on the index page.
A folder structure is a project requirement, not a technical requirement. In development, all pages are likewise divided into sub directories and such to organize the files. But with running the deployment script to copy everything into production, the deploy script concatenates everything into one file anyway and the entire folder structure disappear.
It's perfectly normal to have a clear folder structure for development organised by business needs and also have a completely different folder structure for live code organised by technical needs.
you have to give the path of navigation.html file.
$(function(){ $("#includedNavigation").load("./dir/navigation.html"); });
like this
Can you use something like this
<link rel="import" href="navigation.html">
Or
$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });
I'm working at some project, and I have pretty big sidebar menu with many pages, I don't really want to change it all the time at all pages, but also I don't really want to use php include() function.
Well, I went and used html5 import. It actually works, but I have a problem. My index.html is in root folder, but users.html in root/pages folder. So.. When it goes there it imports the same menu as in index.html, but that's wrong. Because link are broken. For example I can't access index.html after that, because I need ../index.html, but instead it's written index.html
This is js I'm using to import file
var doc= document.querySelector('link[rel="import"]').import;
var text = doc.querySelector('template');
var clone = document.importNode(text.content, true);
var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
console.log(dir);
document.querySelector('.sidebar-menu').appendChild(clone);
It should work from any page if you change the links in your sidebar to absolute paths rather than relative paths. Instead of:
Home
use this:
Home
The exact absolute path may vary depending on if you are using a /public folder, etc, but once you get them working once, they will work from any page in your app.
I have a question , wondering if it is possible or not !!!
Here Is a link that will prove I am not much of a noob!
collegewebsite.zip
Now the question.
I am creating a project called Coffee Cafe for my tuition assignment.
I will be using a lot of css and html with javascript (only)
I have the project folders as shown below
webfolders
now I open cafe.html
and put a link in it to go to a page say "homepage.html" in "links" folder above.
NOW CAN I DO SOMETHING THAT WHEN I CLICK ON A LINK IN HOMEPAGE.HTML (for eg. Back) I CAN GO BACK TO THE PAGE IN THE ROOT FOLDER cafe.html
There is a way to do it is to use the full path of cafe.html in homepage.html
for eg.
<a href="c:\cafe website\cafe.html"> <==this is full path in c: drive
<a href="cafe.html"> <== this only works when the files are int the same root directory,,,
But in this example they are not !
Can I get a solution for this or shall I put all the files in the root directory as a last resort ?
Thanks in advance!!
You should not set your anchor tag href value to a physical location of the file. It should be relative or absolute url.
So instead of
<a href="c:\cafe website\cafe.html">
You should use <a href="../cafe.html">Cafe</cafe>
or home
When you put ../, It goes back to one level back, that means when you use href="../cafe.html" in a page which resides under the links folder, clicking on that will go one level back (which is root) and look for cafe.html file.
If this is your file structure:
/
/links/homepage.html
/cafe.html
To link from homepage.html to cafe.html, you would use:
<a href="../cafe.html">
The .. denotes: "go back one directory".
You could even combine that, if you had a more complex directory structure. (e.g. href="../../cafe.html").
Another way to link would be as follows:
<a href="/cafe.html">
If you start your url reference with /, you're saying to start from the root.
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';
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")';