I'm trying to get respond.js working with their CDN/X-Domain instructions but falling short. In IE8 no media queries are loaded still.
I even uploaded the example cross-domain folder to test and adjusted the paths to the files
In my <head> I have:
<link href="http://mywebsite.wpengine.netdna-cdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="http://mywebsite.com/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="http://mywebsite.com/respond.proxy.js"></script>
I'm linking to the respond.js itself just before the files above
media queries work in ie8 when the CDN is turned off
There are no errors being outputted by IE8
I'm hosted with WPEngine and they have added the respond-proxy.html to the CDN on their end. - I've double checked the files and they all exist.
This is how I got it working, remote refers to a remote-url and local to a local asset.
Make sure to link to your stylesheets before calling respond.js.
<!--[if lt IE 9]>
<script src='//remote/respond.min.js'></script>
<link href="//remote/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="/local/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="/local/respond.proxy.js"></script>
<![endif]-->
Related
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'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
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.
I'm using phonegap to build an enyo app. My program works completely fine in chrome and it also works in the ripple emulator service for blackberry. My problem is, when I use the .ipk build for webOS and the .apk build for android, I get the same error:
Not allowed to load local resource: file:///usr/palm/enyo.js
Uncaught ReferenceError: enyo is not defined, package.js:1
Uncaught ReferenceError: enyo is not defined, tests/package.js:1
Uncaught ReferenceError: enyo is not defined, index.html:10
This leads me to think that it must be a problem in my index file, which is:
<!DOCTYPE html>
<html>
<head>
<title>Enyo Bootplate App</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<!-- -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- look this up for blackberry ad error -->
<!-- css -->
<link href="build/enyo.css" rel="stylesheet">
<link href="build/app.css" rel="stylesheet">
<!-- js -->
<script src="enyo/enyo.js"></script>
<script src="phonegap.js"></script>
<script src="source/mobile.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://www.blackberry.com/app_includes/asdk/adBanner.js"></script>
<script src="source/gameBanks.js" type="text/javascript"></script>
<script src='https://cdn.firebase.com/v0/firebase-auth-client.js' type='text/javascript'></script>
<script src="https://static.firebase.com/v0/firebase.js" ></script>
<script src="build/enyo.js" ></script>
<script src="build/app.js" onerror="alert('No application build found, redirecting to debug.html.'), location='debug.html';"></script>
</head>
<body class="enyo-unselectable">
<script>
new App().write();
</script>
</body>
</html>
The weird thing is that index.html:10 is a comment (the css comment) so I have no idea how an error could possibly be there. Anyone have any idea why I would be getting this error? Or perhaps what "file:///usr/palm/enyo.js" is? That's not a file in my package.
Also, after messing around with it a bit, adding lines at the top of index.html doesn't change where the error is (index.html:10) so is it possible that the error is referring to some other form of index.html? I went through my commits at github and at no point in time was there anything other than comments at line index.html:10.
Update:
When using any other service to package the apps such as palm-run, it updates my code properly. My builds downloaded off of phonegap are not working properly. Is there any reason why phonegap's build specifically would cause this problem?
Finally solved this problem, phonegap was somehow finding the wrong index.html files. When I downloaded the enyo bootplate, there were some index.html's deep within the api and tools folders. After I removed those, it worked properly.
Strange...not sure what is causing that, but I do see you are trying to load enyo.js twice. I doubt that that is the issue, but it is something you want to clear up.
If you start with the base bootplate project with no changes, does it work to package an ipk/apk?