Слайд оверлей на всю страницу в мобильных браузерах - с использованием медиазапросов Javascript - PullRequest
Новая
       10

Слайд оверлей на всю страницу в мобильных браузерах - с использованием медиазапросов Javascript

0 голосов
/ 28 декабря 2018

Я просматривал учебное пособие по w3schools по использованию медиазапросов с Javascript, и у меня возникают проблемы с наложением оверлея для просмотра всей страницы в мобильных браузерах.

В настольных браузерах наложение скользит влево50% при нажатии на трансформикон.

Используя этот пример Медиа-запросы с использованием Javascript

Вот новая функция, которую я хотел бы добавить.

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("myNav").style.left = "100%";
  } else {
    document.getElementById("myNav").style.left = "50%";
  }
}


var x = window.matchMedia("(max-width: 400px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

Когда я добавляю вышеупомянутую функцию к существующей функции, указанной в фрагменте, наложение уже видно и не перемещается весь путь, когда область просмотра меньше или равна 400px.

Я бы также хотел, чтобы стрелки на слайдере были скрыты при нажатии на наложение.Имя класса для стрелок: 

.flickity-prev-next-button

Вот фрагмент кода того, как он выглядит без новой функции для справки.

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";
  } else {
    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}
.flickity-page-dots {
  display: none;
}

.main-carousel {
  margin-top: 20px;
  padding: 0;
}

.carousel-cell img {
  max-width: 35%;
  /* full width */
  height: auto;
}

.carousel-cell {
  width: 100%;
  /* full width */
  background: #FFFFFF;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}
<head>
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
<meta name="viewport" content="width=device-width">
</head>
<body>
  <div id="myNav" class="overlay"></div>
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>

  <div class="main-carousel" data-flickity='{ "cellAlign": "left","contain": true,"wrapAround":true }'>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
  </div>
</body>

Вот фрагмент того, как это выглядит при добавлении новой функции.Я добавил строку <meta name="viewport" content="width=device-width"> в тег заголовка в соответствии с вашим предложением, но результат тот же - наложение слайдов только на 50% страницы. 

function openNav() {
  // if the element has the class tcon-transform (added/removed before calling this)
  if (event.target.classList.contains("tcon-transform")) {
    // the original icon was the plus: open the navigation
    document.getElementById("myNav").style.left = "50%";
  } else {
    // the original icon was the minus: close the navigation
    closeNav();
  }

  function closeNav() {
    document.getElementById("myNav").style.left = "100%";
  }
}

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("myNav").style.left = "100%";
  } else {
    document.getElementById("myNav").style.left = "50%";
  }
}


var x = window.matchMedia("(max-width: 400px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
.flickity-page-dots {
  display: none;
}

.main-carousel {
  margin-top: 20px;
  padding: 0;
}

.carousel-cell img {
  max-width: 35%;
  /* full width */
  height: auto;
}

.carousel-cell {
  width: 100%;
  /* full width */
  background: #FFFFFF;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}
<head>
  <script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.19/webcomponents-lite.min.js"></script>
  <link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  <link rel="import" href="https://cdn.rawgit.com/zerodevx/zero-transformicon/v0.1.0/build/zero-transformicon.build.html">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div id="myNav" class="overlay"></div>
  <zero-transformicon icon="plus-minus" onclick="openNav()">

  </zero-transformicon>

  <div class="main-carousel" data-flickity='{ "cellAlign": "left","contain": true,"wrapAround":true }'>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://i.ibb.co/G7WsYfK/RAVE-FW18-Drop-2-Lookbook-07-compressor.jpg"></div>
  </div>
</body>
...