Панель навыков не загружается на странице

#javascript #css

Вопрос:

У меня проблема с панелью навыков, в локальном индексном файле html все работает нормально, но после загрузки панели навыков на сервер она перестает загружаться, как будто скрипта не было, у кого-то есть идея, как это исправить, спасибо за ваше время и помощь. Я связываю свое мы, чтобы вы увидели, в чем проблема https://neqts.github.io/TomaszTopor /

  
      $('.skill-per').each(function(){
        var $this = $(this);
        var per = $this.attr('per');
        $this.css("width",per '%');
        $({animatedValue: 0}).animate({animatedValue: per},{
          duration: 1000,
          step: function(){
            $this.attr('per', Math.floor(this.animatedValue)   '%');
          },
          complete: function(){
            $this.attr('per', Math.floor(this.animatedValue)   '%');
          }
        });
      });

 body{
  margin: 0;
  padding: 0;
  font-family: 'Open Sans',sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
}

.skills{
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
}

.skill-name{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 20px 0;
}

.skill-bar{
  height: 20px;
  background: #cacaca;
  border-radius: 8px;
}

.skill-per{
  height: 20px;
  background-color: #0fbcf9;
  border-radius: 8px;
  width: 0;
  transition: 1s linear;
  position: relative;
}

.skill-per::before{
  content: attr(per);
  position: absolute;
  padding: 4px 6px;
  background-color: #000;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  top: -35px;
  right: 0;
  transform: translateX(50%);
}

.skill-per::after{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
  top: -16px;
  right: 0;
  transform: translateX(50%) rotate(45deg);
  border-radius: 2px;
}

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="skills">
      <div class="skill">
        <div class="skill-name">HTML</div>
        <div class="skill-bar">
          <div class="skill-per" per="90"></div>
        </div>
      </div>

      <div class="skill">
        <div class="skill-name">CSS</div>
        <div class="skill-bar">
          <div class="skill-per" per="70"></div>
        </div>
      </div>

      <div class="skill">
        <div class="skill-name">Javascript</div>
        <div class="skill-bar">
          <div class="skill-per" per="60"></div>
        </div>
      </div>
    </div>


  </body>
</html>

1. Похоже, на вашем веб-сайте произошла ошибка с jquery. Если вы можете проверить с помощью Chrome devtools, вы увидите ошибку: неперехваченная ошибка ссылки: $ не определен в (индекс):15

2. да, вы правы

Ответ №1:

Я думаю, это потому, что вы загружаете jquery из небезопасного соединения.

http://code.jquery.com/jquery-3.2.1.min.js

измените его на https://code.jquery.com/jquery-3.2.1.min.js

Пожалуйста, посмотрите на скриншот

1. Да, я вижу святую Молли, я не знал, что протокол безопасной передачи гипертекста может взломать весь скрипт

2. Поскольку ваш веб-сайт обслуживается по протоколу https, он не сможет загружать какие-либо ресурсы из HTTP-соединений.