I have a trouble with the import of my CSS - which is made through the html link tag.
<link rel="stylesheet" href="styles/main.css">
It works well when the url has got a single slash - like http://url/page.
it correctly look for the css at http://url/styles/main.css
but when the URL comports two slashes like http://url/page/1 then the css is looked at:
http://url/page/styles/main.css and so is not found cause path is incorrect.
I am using clojurescript react-js wrapper called re-frame.
How to tell the soft to always look at http://url/styles/main.css whatever the URL.
Thanks in advance for your help
Your <link ...> is using a relative URL. Relative to the current page, that is.
Just change it to an absolute one by adding / at the front - "/styles/main.css".
Related
This seems like a very basic HTML question, but I cannot find an answer here or elsewhere that actually works.
What I want to do is jump to an id link on the same document without reloading the document.
Here's my setup. The document is http://www.example.com/mydocument.htm/.
<head>
.
<base href="http://www.example.com">
.
.
</head>
<body>
<!-- Jump from ... -->
<div>
Jump to here.
</div>
<!-- Jump to ... -->
<div id="myid">
<Do stuff>
<Do more stuff>
</div>
</body>
This syntax, according to everything I have read on this site and elsewhere, is supposed to result in a jump within the current document without a page reload.
Doesn't work. My browsers (Firefox, Chrome) automatically stick the base href in front of the bookmark, viz: http://www.example.com/#myid, which opens my home page.
Not what I want.
If I change the href from "#myid" to /mydocument.htm#myid, then the jump completes, but the page reloads. Ditto if I use the absolute address: http://www.example.com/mydocument.htm/#myid.
I'm stuck. Any guidance?
The <base> element instructs the browser to append the URL in the href to all relative URLs on the page. So having:
<base href="http://www.example.com" />
Means that for :
here.
The href is handled as :
http://www.example.com/#myid
Instead of
<current_page>/#myid
You almost certainly don't need that <base> element in the head section, especially based on your further point that using the full URL (which also has http://www.example.com in it) works, meaning your page is already at http://www.example.com and thus doesn't need to make it explicit with <base>.
Alternatively (and I don't actually recommend this, because your use of base seems incorrect), you could change the href of your link to be the current page plus the id hash, like:
here.
As the browser will render the URL (when applying the base href) to :
http://www.example.com/mydocument.htm/#myid
and thus not try to leave the current page as it will treat it the same as if the base weren't set. (Note that this would only work when you have the base href set to the URL of the actual page's base, and as I mentioned earlier, that would make the base element unnecessary).
https://jsfiddle.net/ouLmvd3g/
If you are considering a javascript solution, since the <base> is apparently never necessary, I would recommend an event listener that removes the base element from the DOM rather than your suggested :
a fix using an event listener to remove the base URL for local links
A simple solution would be:
window.onload=function(){
var baseElement = document.getElementsByTagName("base")[0];
baseElement.parentNode.removeChild(baseElement);
}
https://jsfiddle.net/vLa0zgmc/
You could even add a bit of logic to check if the base element's href matches the current page's actual URL base, and only remove when it does. Something like:
var baseElements = document.getElementsByTagName("base");
if (baseElements.length > 0) {
var baseElement = baseElements[0];
var current_url = window.location.toString();
var base_url = baseElement.getAttribute("href");
// If the base url and current url overlap, remove base:
if (current_url.indexOf(base_url) === 0) {
baseElement.parentNode.removeChild(baseElement);
}
}
Example here : https://jsfiddle.net/gLeper25/2/
Thanks to all who responded.
In the end it turns out I was asking the wrong questions. What I needed was a means of jumping to an anchor on the same document without the document reloading. Unfortunately I got fixated on the problem with <base> interfering with the normal <a href....> process.
The actual answer was to use onClick instead, and the code was provided by #Davide Bubz in "Make anchor links refer to the current page when using <base>", and it's simple and elegant, using document.location.hash instead of <a href...>:
Anchor
where "test" is the ID identifying the item to be jumped to.
Several responders pointed to this thread as answering my issues, but I was not smart enough to understand its import until I had read it for the third time. Had I been smarter, I would have saved 6-1/2 hours of wasting my time on trying to fix the <base> problem.
Anyway, problem solved. Thanks to all and especially to Mr. Bubz.
Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.
My directive uses an HTML file. The HTML file uses a CSS stylesheet. I need to distribute the directive js, HTML and CSS files, so the CSS location definition needs to be relative to the HTML.
Note: This is how I solved the location of the HTML, I have pending to solve the location of the CSS file.
I put the CSS file in the same folder as the HTML file, and then defined in the HTML:
<link rel="stylesheet" href='somefile.css'>
however this points to the domain root, not to the HTML file location.
Any ideas how to achieve this?
I think there are two ways to fix your issue as you don't know where the directives are located:
Solution 1 - Ancient HTML Way
If the length of the CSS is small, you can directly include it in your template HTML itself, through the style tag.
<style type="text/css">
Add style rules here
</style>
Solution 2 - The Angular Way(most recommended)
Use ngHref directive.
In your directive.js code, you can just put the path of the directive.html to a scope/rootScope variable and then you can access it from the directive.html
In directive.js
link: function (scope, iElement, iAttrs) {
scope.htmlPath = <path of templateURL>;
}
In directive.html
<link rel="stylesheet" ng-href="{{ htmlPath }}/filename.css">
Note:
I hope you are not using Gulp to build the angular JS code. But, If your are using gulp, you can add a gulp task and pipe all the CSS to a single CSS and can inject to your index.
You need to make separate directories for css and html(template files)
and use full path from root to the css folder
<link rel="stylesheet" href='/angualr/css/style.css'>
Here is an example of what I'm looking to do:
Link from a page with the path http://mysite.com/lorem/ipsum/ to http://mywebsite.com/ using a relative path.
My first thought was to use this: <a href='.../'>link</a>. But this ends up giving me http://mysite/lorem/ipsum/.../.
Is there a way to do this without calling the actual URL?
How about
link
:)
For example utexas.edu prepend the path with a /
<link rel="shortcut icon" href="/sites/default/files/webcentral_favicon_0.ico" type="image/x-icon" />
columbia.edu does not, it just starts with the folder name or path
<link rel="shortcut icon" href="sites/all/themes/base/columbia2/images/favicon-crown.png" type="image/x-icon" />
Both of these are relative, but I need a way to differentiate from absolute pahts.
How can I progrmatically tell when I'm working with a relative path or an absolute path?
URLS can be formatted like the following
Absolute:
http://google.com, https://google.com
Scheme relative:
//google.com links use the same scheme that the page was loaded
//en.wikipedia.org/apple-touch-icon.png
Site absolute:
/index.html
Page relative:
index.html, ../index.html, ./index.html
I don't really understand the question, but you seem confused about what a relative/absolute URL is.
If you need to convert a relative URL into an absolute, you can use http://code.google.com/p/js-uri/
If the first character in the href value starts with / then it's relative to the root of the domain. If it starts with . then same directory.. .. is a directory above and these can stack. If it doesnt start with those and not // or a full URL, then it's relative. And actually, . and .. are relative too.
Be aware that it can also start with // or https? and in that case it would be absolute.
You can simply check for the leading slash:
var link = $('link[rel="shortcut icon"]').attr('href');
var start = link.charAt(0); // Returns the leading slash (or not...)
if(start=='/'){
return 'absolute';
}else{
return 'relative';
}
If your "sites" directory is in the root directory of your site then both are equivalent. By the way, are you using Drupal? Drupal allows you to upload the favicon and the path is taken care of by it.
Couldn't you just look for an 'http' at the beginning of the URL? Even if you're connecting securely, if it's a full URL it should start with http.