1

I am currently trying to learn Javascript on my own. I realise, all my websites work well when I am on localhost. However, when I deploy each page to Heroku, the Javascript seems to be not working. Is there anything that I should add to my file in order to make it work on Heroku. Something to be noted is it is just a static website and not based on the Rails language.Your help would be very much appreciated.

Below are my codes:

<html>
<head>
<link rel="stylesheet" type="text/css" href="exe6.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var number = 20;

$("img").click(function(){

$(this).css("box-shadow",'black 0px 0px ' + number +'px');
number = number + 10;
});
});

</script>
 </head>

<body>
<div class="image">
<img src="img/cute_puppy.jpg" alt="">   
</div>
<div class="quote">Random Sentence</div>
<div class="quote">Random Sentence</div>

</body>
</html>

css

.image
{
text-align: center;
vertical-align: middle;
}

body
{
background-color: rgb(237,210,204);
}

.quote
{
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 30px;
font-family: Helvetica;
font-size: 20px;
}

img
{
box-shadow : white 0px 0px 50px;
}

Error given at browser's console after trying to view the website at console.

Mixed Content: The page at 'https://xxx.herokuapp.com/exe6.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'.

This request has been blocked; the content must be served over HTTPS. exe6.html:6

Uncaught ReferenceError: $ is not defined xl.js:266 Uncaught TypeError: plugin.IsCommandKeyUndetectEnable is not a function

ikanyu
  • 305
  • 4
  • 14
  • What does "not working" mean here? Are there errors in the browser console? – Pointy May 24 '15 at 16:44
  • I have edited the post with the error given in browser's console. – ikanyu May 24 '15 at 16:47
  • That means that your import of jQuery failed. What does your page content look like when you load it from Heroku and do a "view source"? Is the ` – Pointy May 24 '15 at 16:53
  • Yes exactly the same. Something I realise in Google Chrome, after clicking 'Inspect Element' -> 'Sources' tab -> 'Sources' , what is included is only my exe6.html and exe6.css . jQuery.min.js is not included in this list. – ikanyu May 24 '15 at 17:03
  • That's very odd; I can offer no explanation. If the browser is getting the page as you've presented it, there should be nothing preventing it from loading the library from Google. – Pointy May 24 '15 at 17:11
  • Ah - [see this question](http://stackoverflow.com/questions/18251128/why-am-i-suddenly-getting-a-blocked-loading-mixed-active-content-issue-in-fire) – Pointy May 24 '15 at 17:18

1 Answers1

0

Pointy has direct me to this link: Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox?

and it solved my problem. Many thanks to Pointy for helping :) I have remove the http: in front of the // and now heroic website that I have deployed works fine.

Community
  • 1
  • 1
ikanyu
  • 305
  • 4
  • 14