0

Javascript でのメディア クエリの使用に関する w3schools チュートリアルを調べてきましたが、モバイル ブラウザーでオーバーレイをページ全体にスライドさせるのに問題があります。

デスクトップ ブラウザでは、トランスフォーム アイコンをクリックすると、オーバーレイ スライドが 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">あなたの提案に従って head タグに行を追加しましたが、結果は同じです - オーバーレイはページの 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>

4

0 に答える 0