CODEWITHSUNDEEP
javascriptjekyllgithub-pages
Mooncrater
Mooncrater

Reputation: 4861

Jekyll not loading Javascript for an Image

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:

  1. 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.
  2. 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.
  3. 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?

Upvotes: 2

Views: 839

Answers (1)

marcanuy
marcanuy

Reputation: 23952

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">

Upvotes: 3

Related Questions