Javascript не работает в Chrome / Firefox, но работает в Safari

Я работаю над разделом наложения изображений на своем веб-сайте. В элементах находятся три изображения, которые складываются и открываются по одному за счет изменения размера элементов по горизонтали с использованием положения полосы прокрутки. Он отлично работает в Safari, но не в Chrome / Firefox.

Я пропустил код через валидатор w3c и исправил все проблемы, но у меня все еще та же проблема ... работает в сафари, но не в Chrome / Firefox.

Я был бы очень признателен, если бы кто-нибудь мог взглянуть на приведенный ниже код.

Заранее спасибо,

Крис

var xyz;
var slide1Width = $("#slide1").width();

var slide2Width = $("#slide2").width();
var slide3Width = $("#slide3").width();
var counter = 0;

$(document).ready(function(e) {

  /////////Slide scroll-resize activation/////////
  $(window).scroll(function(e) {

    var slide1Height = $("#slide1").height();


    xyz = $("body").scrollTop();
    $("#inputs").text(xyz);

    //When slide1 scroll-resize is enabled
    if (xyz <= slide1Width && xyz >= 50) {
      $("#slide2").css({
        "width": xyz
      });
    };

    //When slide2 scroll-resize is enabled
    if (xyz >= slide1Width * 2 + 25 && xyz <= slide1Width * 3) {
      $("#slide3").css({
        "width": xyz - slide1Width * 2
      });
    };

    var video = document.getElementById("video");
    video.currentTime = (xyz - slide1Width) / 55;

    if (xyz >= slide1Width && xyz < slide1Width * 2) {
      $("#video").css({
        "visibility": "visible"
      });
    } else {
      $("#video").css({
        "visibility": "hidden"
      });
    };

    $("#video").height($("#slide1").height());
    /*$("#video").width($("#slide1").width());*/

  });



});

window.onload = function(e) {




  var x = $("#slide1").width();
  var y = $("#slide1").innerHeight();



  $("#slide2").resizable({
    containment: "parent",
    minWidth: 50,
    stop: function(event, ui) {
      $("body").scrollTop($(this).width());
    }
  });

  $("#slide2").css({

    "height": y,
    "width": 50

  });

  $("#slide3").resizable({
    containment: "parent",
    minWidth: 25,
    stop: function(event, ui) {
      $("body").scrollTop($(this).width() + x);

    }
  });

  $("#slide3").css({

    "height": y,
    "width": 25

  });

  ///////////Slide 3 click behaviour////////////

  //Single click//

  $("#slide3").click(function(e) {
    $("body").scrollTop($("#slide1").width() * 2 + $(this).width());
  });

  //Double click//

  $("#slide3").dblclick(function(e) {
    $("body").scrollTop($("#slide2").width());
  });


  ///////////Slide 2 click behaviour////////////

  //Single click//

  $("#slide2").click(function(e) {
    $("body").scrollTop($(this).width());



  });



};

$(window).resize(function() {

  var x = $("#slide1").width();
  var y = $("#slide1").innerHeight();
  var z = $("#slide2").width();
  var slide3width = $("#slide3").width();

  var result = z / x;
  var b = result * 100;
  var c = b.toString() + "%";

  var result3 = slide3width / x;
  var slide3percentInt = result3 * 100;
  var slide3percentString = slide3percentInt.toString() + "%";



  $("#slide2").css({
    "height": y,
    "width": c

  });

  $("#slide2").resizable({
    minWidth: 50,
    containment: "parent"

  });

  $("#slide3").css({
    "height": y,
    "width": slide3percentString

  });

  $("#slide3").resizable({
    minWidth: 25,
    containment: "parent"

  });


});

body {
  background-color: black;
  height: 5000px;
}

#box1 {
  width: 100%;
  height: 100px;
  background-color: black;
}

#wrapper {
  position: fixed;
  width: 80%;
  height: auto;
  margin: auto;
  left: 10%;
}

img {
  width: 100%;
  height: auto;
  z-index: 1;
}

#slide1 {
  position: absolute;
  float: left;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 1;
}

#slide2 {
  position: absolute;
  float: left;
  padding: 0;
  margin: 0;
  border: none;
  background-image: url("WESetBW.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

#slide3 {
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  background-image: url("WESetViz.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 4;
}

#video {
  position: relative;
  float: left;
  margin: 0;
  border: none;
  z-index: 3;
  visibility: hidden;
  width: 100%;
  object-fit: cover;
}

#inputs {
  height: 20px;
  width: 100px;
  background-color: white;
  color: red;
  position: fixed;
}

<!doctype html>
<html>

<head>
  <meta charset = "UTF-8">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
  <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

  <title>Untitled Document</title>
</head>

<body>
  <div id = "wrapper">

    <div id = "box1">
    </div>

    <div id = "slide1">
      <img src = "WESet-photo.svg" alt = "World's End set" />

    </div>

    <div id = "slide2">
    </div>

    <div id = "slide3">
    </div>

    <video id = "video">
      		<source src = "WEsetOriginalVideo.mp4" type = "video/mp4">
      		Your browser does not support the video tag.
    	</video>

  </div>
  <div id = "inputs">

  </div>

  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
</body>

</html>

Вы получите лучший ответ, если создадите правильную демонстрацию. Используйте инструмент сниппета в редакторе или настройте его, например, на jsfiddle.net.

— 14.01.2019 15:50

Ваш HTML не содержит ничего, что закон, кроме некоторых JavaScript и CSS включает и элемент заголовка, как можно ожидать ответа на ваш вопрос, основываясь только на этом?

— 14.01.2019 15:54

Измените фрагмент, чтобы воспроизвести вашу проблему. Вы можете использовать фиктивные изображения из dummyimage.com, чтобы имитировать изображения, если вы не хотите показывать свои.

— 14.01.2019 15:58

На первый взгляд, у вас должен быть slide1width и весь этот код, включенный в вашу функцию document.ready. В нынешнем виде эти строки могут выполняться до того, как эти элементы будут загружены, и поэтому значения ширины будут неправильными.

— 14.01.2019 16:25

Спасибо, jmcgriz. Я наконец нашел ответ, хотя много поисковиков. В конце концов, вызов scrollTop для «документа» работал во всех браузерах, а не для его «тела», который работал только в Safari:

— 15.01.2019 15:33

javascript google-chrome firefox

14.01.2019 15:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

Сколько памяти доступно для приложения Electron, будет ли оно таким же, как и для Chrome?

Ошибка синтаксического анализа при установке apk, который был загружен с Chrome, но отлично работает при загрузке с Firefox

Инструменты разработчика Chrome - используйте текстовое поле фильтра для соответствия нескольким запросам

Как сделать так, чтобы Firefox автоматически обновлялся при изменении файла, даже с протоколом file: //?

Нормальна ли скорость 1,2 мб / сек на WebUsb?

Почему моя функция сортировки работает только в Firefox?

Проблемы с микрофоном Google Chrome. Никакой радости при любых настройках

Ошибка «Нет заголовка Access-Control-Allow-Origin» в запрошенном ресурсе »даже после установки заголовков на сервере и клиенте

Событие mousedown не работает для щелчка левой кнопкой мыши

Переключение между несколькими потоками webrtc в MediaRecorder

Javascript не работает в Chrome / Firefox, но работает в Safari

Другие вопросы по теме

Похожие вопросы