0

Помогите решить. Сам JS:

<script type="text/javascript">
                function trackLocation(e) {
      var rect = videoContainer.getBoundingClientRect(),
          position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
      if (position <= 100) { 
        videoClipper.style.width = position+"%";
        clippedVideo.style.width = ((100/position)*100)+"%";
        clippedVideo.style.zIndex = 3;
        }
    }
    var videoContainer = document.getElementById("video-compare-container"),
    videoClipper = document.getElementById("video-clipper"),
    clippedVideo = videoClipper.getElementsByTagName("video")[0];
    videoContainer.addEventListener( "mousemove", trackLocation, false); 
    videoContainer.addEventListener("touchstart",trackLocation,false);
    videoContainer.addEventListener("touchmove",trackLocation,false);

    </script>

<style type="text/css">
#video-compare-container {
  display: inline-block;
  line-height: 0;
  position: relative;
  width: 100%;
  padding-top: 42.3%;
}
#video-compare-container > video {
  width: 100%;
  position: absolute;
  top: 0; height: 100%;
}
#video-clipper {
  width: 50%; position: absolute;
  top: 0; bottom: 0;
  overflow: hidden;
}
#video-clipper video {
  width: 200%;
  postion: absolute;
  height: 100%;
}
</style>

<div class="vc_row row_padding_top row_padding_bottom">                                                            
    <div id="video-compare-container">
    <video loop autoplay poster="images/clean1.jpg"></video>
    <div id="video-clipper"><video loop autoplay poster="images/clean.jpg"></video>
    </div>
    </div>
    </div>
1
  • Определяйте блок <script> ниже <div class="vc_row row_padding_top row_padding_bottom"> и все должно заработать.
    – And
    Commented 13 мая 2019 в 23:55

2 ответа 2

1

В виду того, что скрипт загружается раньше чем появляется dom элементы вы должны заключить его в событие, которое начнет действовать лишь после загрузке всей страницы, на чистом JS вы обертываете вашу функцию в событие document.addEventListener('DOMContentLoaded', function(){, на jQuery в $(document).ready(function() {. Либо вы просто можете переместить свой <script type="text/javascript">...</script> в конец самого документа и тогда, как верно описал OPTIMUS PRIME ранее в своем ответе, скрипт выполнится тогда, когда все элементы для его работы уже будут подгружены браузером.

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    function trackLocation(e) {
      var rect = videoContainer.getBoundingClientRect(),
        position = ((e.pageX - rect.left) / videoContainer.offsetWidth) * 100;
      if (position <= 100) {
        videoClipper.style.width = position + "%";
        clippedVideo.style.width = ((100 / position) * 100) + "%";
        clippedVideo.style.zIndex = 3;
      }
    }
    var videoContainer = document.getElementById("video-compare-container"),
      videoClipper = document.getElementById("video-clipper"),
      clippedVideo = videoClipper.getElementsByTagName("video")[0];
    videoContainer.addEventListener("mousemove", trackLocation, false);
    videoContainer.addEventListener("touchstart", trackLocation, false);
    videoContainer.addEventListener("touchmove", trackLocation, false);
  });
</script>

<style type="text/css">
  #video-compare-container {
    display: inline-block;
    line-height: 0;
    position: relative;
    width: 100%;
    padding-top: 42.3%;
  }
  
  #video-compare-container>video {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
  }
  
  #video-clipper {
    width: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
  
  #video-clipper video {
    width: 200%;
    postion: absolute;
    height: 100%;
  }
</style>

<div class="vc_row row_padding_top row_padding_bottom">
  <div id="video-compare-container">
    <video loop autoplay poster="images/clean1.jpg"></video>
    <div id="video-clipper"><video loop autoplay poster="images/clean.jpg"></video>
    </div>
  </div>
</div>

0

Браузер "читает" написанный код сверху вниз и выполняет всё последовательно. Когда натыкается на тег script, переходит в режим для скриптов, выполняет скрипт для той части, которую уже успел "прочитать", выходит из этого режима и продолжает "читать" HTML-код дальше. А тот скрипт, что остался выше - уже всё, к нему не вернется.

Вы пишете "получитьЭлементПоId" — а браузер еще не знает о его существовании в момент загрузки скрипта. Поэтому все скрипты оставляют в конце страницы, или хотя бы только после тех элементов, для которых они должны сработать.

P.s. если лень часто открывать консоль, можете кодить например тут - - https://playcode.io/ , он в углу сразу высвечивает ошибки.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.