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">
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.
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'm experiencing an issue with the jQuery CDN.
Given the following script imports:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I am having the following issues with the CDN paths:
Using http://... when accessing my site over SSL I get
[blocked] The page at https://www.example.com/ ran insecure content from http://code.jquery.com/jquery-1.9.1.js.
Using https://... seems a bit dodgy if not accessing site over SSL
Using //... causes both the imports to fail on GET.
What is the correct way of importing jQuery from CDN with a site that can be accessed both securely and not.
just omit the protocol, then the script will be loaded using the same protocol as the page
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
But if the resource is loaded form the file system(with file:// protocol) then this will not work
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 keep getting the following error on the debug console on chrome
[blocked] The page at https://myURL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css.
[blocked] The page at https://URL/canvas ran insecure content from http://connect.facebook.net/en_US/all.js.
[blocked] The page at https://URL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js.
these are the js scripts attached to the head
THis is a facebook app that makes GET request to my own server , This was working and Just stopped working without any change in my code ! I am not sure if Facebook is blocking my requests.
These errors happen when loading scripts and other external resources (such as images) on other domains via HTTP when the main page (which is your Facebook app, in your case) is loaded via HTTPS.
Look in the code of your app, use protocol relative URLs when calling external scripts. For example, instead of this:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Do this:
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Edit: Note that if protocol relative URLs are used on stylesheets, IE7 and IE8 will download it twice:
http://paulirish.com/2010/the-protocol-relative-url/