I'll caveat this with the fact that I am not a Javascript expert. Not even close.
That said, I'm using a Javascript Polyfill to allow me to use rem units for text size on a web page and maintain IE8 compatibility:
http://www.joannecorryhair.co.uk/
The script is referenced on line 24:
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="css/0.css" />
<link rel="stylesheet" type="text/css" href="css/600.css" />
<link rel="stylesheet" type="text/css" href="css/740.css" />
<script src="scripts/rem.js" type="text/javascript"></script>
<![endif]-->
In IE8 only (even if I put this outside of the conditional meta tags), the console throws the following error and this script doesn't work (font spacing is all messed up):
Origin http://joannecorryhair.co.uk not found in Access-Control-Allow-Origin header.
This works perfectly locally.
I suspect this is something on the server config, as this is a very popular polyfill. Any help will be much appreciated.
Thanks
This error shows up because you are attempting to load assets (images, audio or video) or data (JSON or XML) across domains. The site that is serving the data/assets needs to allow your site to use those assets by setting a CORS header.
More Info: http://www.enable-cors.org
It is indeed the CORS header as suggested in Patrick's answer, however, I'll post the details separately so they're easier for users to find.
The issue is that I am using Google Webfonts. It is Google whose CORS header is incompatible. You need to add the following to your Google Font CSS reference:
data-norem
So it will look like this:
<link data-norem href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
I found this info in the Rem Polyfill issues register here:
https://github.com/chuckcarpenter/REM-unit-polyfill/issues/51
Related
I'm trying to host a site on Netlify (or github pages), but for some reason when entering production, the fonts change, as well as some layout issues (See photos)
[
I'm not sure if this issue is due to CSS specificity, or if I need to declare the font-types somewhere; I've already added them to my <head> tag, and my css file has them each imported.
I've created a codepen with the code: https://codepen.io/aladin94/pen/BaowqgX (keep in mind the images and layouts will differ). Any ideas?
The font imports:
<link href="//db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus"
rel="stylesheet" type="text/css"/>
<link href="//db.onlinewebfonts.com/c/21400dc679986534519c638136d62dbf?family=Rage+Italic"
rel="stylesheet" type="text/css"/>
I guess, that your production site blocks the insecure font.
See my browser console print:
Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure font
http://db.onlinewebfonts.com/t/146c398456e6a22b45102120ae8a7679.woff
. This request has been blocked; the content must be served over HTTPS.
You can change the behaviour for the specific font or you have to find a secure font for your case.
Have you tried this link:
<link href="https://db.onlinewebfonts.com/c/146c398456e6a22b45102120ae8a7679?family=Narcissus" rel="stylesheet"
type="text/css" />
EDIT:
As already mentioned in the comment section, you can find the sources in your developer mode of your browser. In my case, I am using chrome.
Try to download your needed files/ sources and afterwards you can try to upload it to your server environment.
I guess, it's not really a programming question/ solution because it's more related to library handling or security setup.
This is my sample site published on GitHub using GitHub pages, using Jekyll. The map you see in the site is supposed to be interactive for all the states, as shown in this fiddle, which shows how the map is supposed to work.
The main Javascript file used here is jquery.imagemapster.js
The HEAD of my code is:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...
</head>
Or you can simply see my code present in the repository used to publish the site.
Things I've tried:
Putting all the images and the script in a folder named asset, and linking to the resources. That didn't work at all. No image was displayed.
Putting the resources in the root folder. This is what I've done. The images are displayed properly, but the script still isn't working.
To check the linking, I copied the 4k lines of code into a <script> tag pair, inside the head. That didn't work as well.
Eventually, the local building of the site using Jekyll, works perfectly. What am I doing wrong here?
jquery.imagemapster.js is loading fine, the problem is in the way you are loading the libraries:
Mixed Content: The page at 'https://mooncrater31.github.io/infer/#'
was loaded over HTTPS, but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
This prevents your site from using JQuery in modern and popular browsers (aka: Chrome) and that is why it runs fine locally, it runs without https.
To solve it just load them with HTTPS:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I published my solution on vs 2010.
Examples of references to style sheets and js files(first method):
<link href="../../Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
These work fine while debugging. But while browsing on iis 7 the resources fail to load. In my other applications I have used(second method):
<link href="~/Content/CSS/Login.css" rel="stylesheet" type="text/css" />
and this works fine both during debug and browse on iis.
The URL of the view page is:
http://localhost/LaunchLogin/
The error on console:
Failed to load http://localhost/Content/css/Login.css resource: the server responded with a status of 404 (Not Found)
It should search for the file in:
http://localhost/LaunchLogin/Content/css/Login.css
Can anyone explain how iis tries to access the resources? Also how can I configure iis or publish in such a way that the first method works on iss browse?
Using ~ base path has no problem and the best(and as you said; work perfectly), but if you still need relative path try with these tags, I remove one directory up path.
<link href="../Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
BTW,
if your URL is http://localhost/LaunchLogin/ and your css file is in http://localhost/LaunchLogin/Content/css/Login.css then your code for linking css should be:
<link href="Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
If you wish to do, then the next best method is to use absolute paths in CSS and JS linking. You can use following trick to do so:
Create a public static class with one variable: public String absRoot='http://localhost/LaunchLogin/'; and set it to whatever the root of your website.
Now link CSS and JS like following:
<link href="<%=StaticClassName.absRoot %>Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="<%=StaticClassName.absRoot %>Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
After that whenever you need you can change absRoot value at one place only.
I have my jquery datetimepicker api files Webcontent/js folder.I am referring to the resources like in the code.
<script type="text/javascript" src="js/jquery.datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/>
But the browser fails to load those resources and moreover its showing the wrong file type in network tab like this.
jquery.datetimepicker.js GET(canceled) text/html
jquery.datetimepicker.css GET(canceled) text/html
Can someone tell me what went wrong here ? I am using spring mvc.
I'm having difficulty getting Respond's CDN/X-Domain Setup working.
I started off serving all assets from the CDN:
<link rel="stylesheet" href="http://cdn.example.com/css/main.css?2013012401">
<script src="http://cdn.example.com/js/modernizr-2.6.2.min.js?2013012401"></script>
<script src="http://cdn.example.com/js/respond.min.js?2013012401"></script>
In theory this should work, since all assets are being served from the same domain. However IE8 didn't receive Media Query support like it should. So I investigated Respond's CDN/X-Domain Setup and amended my <head> section to this:
<link rel="stylesheet" href="http://cdn.example.com/css/main.css?2013012401">
<script src="http://cdn.example.com/js/modernizr-2.6.2.min.js?2013012401"></script>
<script src="http://cdn.example.com/js/respond.min.js?2013012401"></script>
<link href="http://cdn.example.com/respond-proxy.html?2013012401" id="respond-proxy" rel="respond-proxy">
<link href="http://cdn.example.com/img/respond.proxy.gif?2013012401" id="respond-redirect" rel="respond-redirect">
<script src="http://cdn.example.com/js/respond.proxy.js?2013012401"></script>
When that also failed, I amended my <head> section to this:
<link rel="stylesheet" href="http://cdn.example.com/css/main.css?2013012401">
<script src="http://cdn.example.com/js/modernizr-2.6.2.min.js?2013012401"></script>
<script src="http://cdn.example.com/js/respond.min.js?2013012401"></script>
<link href="http://cdn.example.com/respond-proxy.html?2013012401" id="respond-proxy" rel="respond-proxy">
<link href="/img/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<script src="/js/respond.proxy.js"></script>
I'm not sure what else I can try really to get this to work. It works fine in a local Dev environment that's not using the CDN, but in the Live environment this Respond.js CDN/X-Domain Setup is not working. Could it possibly be related to the cache-buster query string added to the CDN assets? Why is my original example not working when all assets are being served from the same domain?
Edit: Here's the error that's thrown in IE8
This issue was caused by the respond-proxy.html file reference containing a query string (respond-proxy.html?2013012401). Removing the query string from this file causes the above implementation to work.