Why does JSFiddle render my code differently?

Question

I have been working on a piece of code in JSFiddle. The code displays exactly as expected on JSFiddle, but does not display as expected when I use it in my own HTML file.

Discrepancies between the two would usually be very quick and easy to spot, but as far as I can tell the two codes are effectively exactly the same (apart from the added $(window).load(function(){ required).

The JS Fiddle: http://jsfiddle.net/kwuo5bra/

 $('.expose').ready(function(e){
        $('.expose').css('z-index','99999');
        $('#overlay').fadeIn(300);
    });

    $('#overlay').click(function(e){
        $('#overlay').fadeOut(300, function(){
            $('.expose').css('z-index','1');
        });
    });

My implementation:

https://serallo.co.uk/highlight.php

I'm dreading an incredibly obvious mistake but I simply cannot understand what I am missing.

Answer 1

If you check the console on your website you'll see this:

The page at ' https://americanfizz.co.uk/dev/highlight.php ' was loaded over HTTPS, but requested an insecure script ' http://code.jquery.com/jquery-1.5.2.js '. This request has been blocked; the content must be served over HTTPS.

The problem is because your URL uses https:// , yet the CDN you linked to uses http:// , hence it's blocked and jQuery is not loaded. You need to use a CDN with an SSL URL.

Also note that jQuery 1.5.2 is very outdated. You should upgrade to at least 1.12. Here's a CDN link which should work for you:

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js

With this newer version of jQuery load() as an event handler is deprecated. You'll need to change your code to $(window).on('load', fn) instead.

Answer 2

You need to add jQuery on your page with https like in your site. Also you are using a old version.

Where you have this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

Replace by this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Also, on your code, the expose() is not a good way to init the element. Use (document).ready instead.

$(document).ready(function(){

    $('.expose').css('z-index','99999');
    $('#overlay').fadeIn(300);

    $('#overlay').click(function(e){
        $('#overlay').fadeOut(300, function(){
            $('.expose').css('z-index','1');
        });
    });
});

Answer 3

Because you run the code before elements are ready. Move your JS code before the closing body tag.