I have a different problem I don't know whether my question makes any sense or not, but I would like to get clarified. Actually I have an Embedded device and I will be loading html webpages in the serial flash address location of my device. Those webpages include common css but individually written in each page.Now I want to make a common page for css and link it to each individual web page using link href. I would like to mention the address location(Hexadecimal address) of css file in serial flash using href in html file.
Can I specify like that ?
Will it link to the location of serial flash ?
will my css gets adopted to my webpages?
or can I do it using Javascript ?
If yes, how can I give the address location in href. Please anyone let me know. Thanks in advance.
No need to include the hexadecimal address location.
Create the folder you would like to use and place all your files there (html, css,etc). When you brows your index.html it will search from within the same folder and if your css-files are there it is enough with below link in HTML.
<link rel="stylesheet" href="index.css">
If you have created a subdirectory (called css) for your css files you need to add the href like this:
<link rel="stylesheet" href="css/index.css">
Regarding your specific questions:
Can I specify like that ?
See above answer.
Will it link to the location of serial flash ?
See above answer.
will my css gets adopted to my webpages?
If you mean if your HTML file will find your CSS file,
- yes, if you put the correct path. If you add it as above
it will be relative meaning that you do not have to know
nor write out the full path.
or can I do it using Javascript ?
You do not need Javascript for solving your issues.
If yes, how can I give the address location in href.
No need of Javascript, use relative path as described in above answers.
Related
I generate an HTML-file which I want to send to other people. But i don't want to send a complete folder but only the pure html.
Therefore the generator should include everything in this HTML-file without linking to other sources. That means the HTML-file is "stand-alone".
Because of that i can't use images but want to use symbols of font.
Is there possibility to embedded all required information into that html for a font like "GLYPHICONS Halflings" without linking to any external (means outsite of the HTML) source?
I tried to use typeface-js already but i didn't worked.
Thanks a lot for your help!
short answer no. you can send pure HTML with images, just put image links from the internet into the HTML tags to show image.
I have a javascript file that I would to add to discourse, but I am not sure how. Am I required to create a plugin to include a js file or can I include the file in the source code? Either way, I am not sure how to accomplish this.
If what you need is to embed, in every Discourse page, a tag linking to an external resource, you need to do the following:
Create a theme component and include it to all your themes
In your theme component, click "Edit CSS/HTML"
In the </head> section, enter your <script src="..."></script> code and click "Save"
In Discourse setting content_security_policy_script_src, add the full url of the script
The full doc is here.
I was able to achieve this by adding the following code <script async src="url-here" data-url="url-here"></script> Into the </head> section of /admin/customize/themes
Try using this :
<script src="**URL**"></script> under the head section.
The URL of the external script file.
Possible values:
An absolute URL - points to another web site (like src="http://www.example.com/example.js")
A relative URL - points to a file within a web site (like src="/scripts/example.js")
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.
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.
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.
I've wrote some program that opens upon a link click.
<a class="myclass" href="#openfancybox">Open Fancybox</a>
It uses a fancybox, jQuery and everything works perfect.
Once I implemented it into the project, it doesn't work. The problem is this code in the project:
<base href="http://somesite.com/" />
It goes to the base url instead of opening a fancybox.
I've tried to fix it using jQuery or javascript solutions but I had no luck.
P.S. I don't want to remove base from the source code as it could break something else in the project (I have a task to implement my fancybox only).
P.P.S. Also I would definitely prefer a pure javascript solution as far as I use jQuery for my fancybox, but conflicts with other frameworks are expected. The project is for Joomla.
There is absolutely no conflict if you use a base tag and fancybox or whatsoever as you can see in this DEMO ... and there is no need of additional javascript/jQuery to hack or fix the (non-existing) issue as previously suggested.
However, I presume that you clearly understand that the base tag will affect ALL your relative paths including your anchor <a> tags as well as your <link>, <script> and/or your <img /> tags. In other words, any tag that uses the href and/or src attributes.
Having said that, consider this scenario :
Suppose that you have a page test.html which is located in a subdirectory called sandobox. The full path of such page would be http://somesite.com/sandbox/test.html, correct?
Now suppose that you are loading fancybox from within test.html using relative paths like :
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
... that is the equivalent of using the following absolute paths :
http://somesite.com/sandbox/fancybox/jquery.fancybox.css and http://somesite.com/sandbox/fancybox/jquery.fancybox.js respectively.
Now, if you decide to add a base tag like this :
<base href="http://somesite.com/" />
... all your relative paths, inlcuding your calls to fancybox files will be converted to :
http://somesite.com/fancybox/jquery.fancybox.css and http://somesite.com/fancybox/jquery.fancybox.js.
Since the fancybox file are actually located under the sandbox subdirectory, your document won't be able to load them (because the base tag) so your fancybox implementation will fail.
To solve the conflict, you could either do :
Use absolute paths in your <link> and <script> tags or
Relocate your files in relation to the base path.
Check this good question/answer about the base tag Is it recommended to use the <base> html tag?
If anyone still happens upon this. There actually is a conflict to using base href with fancybox.
There is a check in Fancybox that looks at the href of the element clicked on and checks for the # symbol and if it finds that it sets the type as inline.
https://github.com/fancyapps/fancyBox/blob/master/source/jquery.fancybox.js#L303
This works fine without using <base href>, but if you use that then the href attribute will return the full url with the hash, so the check that looks for href.charAt(0) === '#' will fail, because the first chat is no longer #, but probably an h.
Maybe instead of checking charAt(0) === '#' it should just look for a # and do a split instead.
If I put in the src attribute ./images/nothing.gif what does that translate to?
I have a javascript file that makes src attribute of some html element to 'nothing.gif'
but on the page nothing.gif shows as 'file not found' symbol.
Currently nothing.gif resides at the following place in my ftp server:
/www/foldername/wp-content/themes/themeg/images/nothing.gif
the javascript resides at:
/www/darksnippets/wp-content/themes/themeg/javascript.js
since this is wordpress there is no actual 'html page' the content is stored in the DB. so If I used ../ where should I place nothing.gif?
Edit:
here is the link to the page: http://www.darksnippets.com/?page_id=56
nothing.gif can be found here: http://www.darksnippets.com/wp-content/uploads/nothing.gif
in the bottom right you will see broken image symbol (this shows up in IE of Chrome. does not show in FF)
The relative path ./images/nothing.gif is interpreted by the browser, not the server. So it will look at the url from the browser's perspective to resolve the path. What is the url that the browser sees?
Update:
I see you've provided URLs. Change your relative path to:
./wp-content/uploads/nothing.gif
But a better solution would be to use a root relative path. i.e. one that starts with a /
If the HTML page is http://www.darksnippets.com/?page%5Fid=56 then nothing.gif points to http://www.darksnippets.com/nothing.gif. The location of the Javascript is not relevant. So you should just need "wp-content/uploads/nothing.gif".
One of the ideas is to use a full path to the image file
e.g. http://www.yourdomain.com/images/nothing.gif
Not having worked with wp very much, I can't give a specific answer, but a general solution would to be to use the format "http://www.sitename.com/folder/nothing.gif" Where, of course, sitename.com/folder gets replaced with your domain name and the folder on your site.
If you're writing a Wordpress template in PHP, you can access the full path to your template directory with:
bloginfo('template_directory')
Alternatively, if you can set the images as background images via CSS (instead of using src), relative image paths defined in CSS will be relative to the CSS path:
.nothing { background: url(images/nothing.gif); }
As I thought, in IE and Firefox the browser is looking for http://www.darksnippets.com/images/nothing.gif. The relative URL is relative to www.darksnippets.com (the url of the page), not to the javascript's location.
Ates Goral's answer is correct. I'll expand to address other questions you raised.
In relative paths, . (single dot) refers to the current path. This will generally be the path of the page loaded (and resolved according to the rules of your web server), unless your page uses a <base href="..."> which is different from your current path. This is because every page loaded has a base path, which defaults to... you guessed it, . (single dot). Likewise, .. (two dots) refers to the parent directory of the current path (also resolved according to rules on your web server).
For this problem you can simply remove the dot(.) and / sign from your code
So now your code will be like
src = images/nothing.gif
I think this will work for you.