0

I'm trying to make a little website browsable both online and offline using only html, css and a little of jquery\javascript. Hence I'm using all relative paths and everything works fine unless I came to the issue to load a custom menu in all my pages with a little smart jquery include.

However since my menu.html is loaded in different pages located in different subdirectories of the tree structure I am wondering what's the smartest way to write down the href links of the different voices in the menu.

I initially started using all absolute paths in the menu.html, but of course it just works only online or offline based on which root domain I use in the absolutes paths (either http://mywebsite.com/ or file:///D:myfolder/etc).

Of course also using the / at the beginning of a link works only online, since locally the / stands for the drive letter where the websites' folder is placed and it will work if and only if the website's folder is saved in the highest path like as D:/myWenbsite. I'd like to make something more adaptable regardless of the local path.

Maxiride
  • 187
  • 8

2 Answers2

2

The best way in my opinion is to use relative URL's from the root. For example in your menu.html file when you reference jquery you can do the following:

/javascript/jquery.min.js

Adding the beginning '/' makes it so that the path always starts from the root of the domain no matter where your html is at in your directory.

If you used:

javascript/jquery.min.js

That means in whatever directory your menu.html file is in, a folder for javascript would also need to exist and that is not generally wanted.

xengravity
  • 3,501
  • 18
  • 27
  • Yep what you said works, but only if the website folder is placed directly after the root like D:/myWebsite, how to manage a situation where the folder is saved in other subdirectories in the local hard drive? Help really appreciated – Maxiride May 06 '15 at 15:21
0

Using the <base> command within a little script to change it solved my issue.

Here is an example:

<head>
<!-- Here a direct path is need to firstly load jquery -->
    <script type = "text/javascript" src = "../include/js/jquery-1.10.2.min.js"></script>
    <base id="host" href="" />
    <script>
        /* Where am I? */
        here = window.location.href;
        hereIndex = here.indexOf('temp-test');

        /* make substring from root till temp-test/ */
        newPathname = here.substring(0, hereIndex+10); //+10 to consdier also temp-test/

        $("#host").attr("href", newPathname);
    </script>
</head>

Don't know if there is a better way to do it.

Anyway even if the page renders correctly in the console log I still get errors on every relative path I have GET file:///D:/temp-test/core/image/temp1.jpg net::ERR_FILE_NOT_FOUND however for instance, this image is instead properly loaded. So what's up here with the base tag? It is kinda of not getting recognized but it works..

Further investigation is needed for me.

Maxiride
  • 187
  • 8