Home / Questions / 564023
Accepted
Keyron
Asked: 2022-10-25 07:58:53 +0800 CST 2022-10-25 07:58:53 +0800 CST

How do I enable javascript functions in github-pages?

  • 772

Hello! I have a website as a portfolio which I have uploaded to github pages, the website works impeccably, it has no problems except for one detail, everything works in my copy hosted on my computer, including what makes me most complex, which is that I have a function in js that measures distances between the menu and the top of the page to maintain its position and lower it when scrolling.

All good so far, but when uploading it to github pages, even though the page is clearly visible, the js functions don't work.

I leave the code of the function and the link of my github pages

Link code of my portfolio:

https://github.com/K3yr0nym0us/K3yr0nym0us.github.io

I also leave the link of my page visible in github pages

https://k3yr0nym0us.github.io/Index.html

$(document).ready(function(){
    /*creamos una variable llamada altura que contendra
    el valor en pixeles de la diferencia que hay entre
    el objeto de clase menu y el top de la pantalla*/
    var altura = $('.menu').offset().top;

    $(window).on('scroll', function(){
        /*si el scroll del sitio es mayor a altura*/
        if ( $(window).scrollTop() > altura ){
            /*entonces se añade la clase menu-fixed*/
            $('.menu').addClass('menu-fixed');
        } else {
            /*sino se remueve la clase*/
            $('.menu').removeClass('menu-fixed');
        }
    })
});

It should be noted that I uploaded the code exactly as it works on my computer and it works on it but on github pages it does not. I leave the code of my head where I have the call of my js.

<head>
    <meta charset="UTF-8">
    <title>Portafolio</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/index/index.css">
    <link rel="stylesheet" href="css/pie.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/main.js"></script>
</head>

any advice or criticism is welcome

javascript

1 Answers

  1. Best Answer

    If you look at the DevTools console you will see that the problem you are having is that the browser is refusing to load the jQuery library because you are using an insecure URL: http://instead of https://. Once you fix that problem jQuery will load and the rest of your javascript will be able to use it with no problem.

    • 1