Исправить положение на холсте без потери отзывчивости - PullRequest
Новая
       1

Исправить положение на холсте без потери отзывчивости

0 голосов
/ 15 октября 2018

У меня есть nine коробки класса box со значениями в нем, у меня есть еще один class box002 , в котором отображается номер изображения.

box002 можно перетащить на соответствующий начальный номер в box , затем этот столбец будет удален.

Я сделал фон для этого с табличкой и подвесная доска и ее отзывчивость.

Я хочу fix these nine boxes exactly inside the name board an the number image in box002 inside the hanging board. When the nameboard and hanging board size changes when i resize the window the elements should correctly fit inside the nameboard and hanging board.

Как этого достичь?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>


  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

  <style>
    @font-face {
      font-family: 'Sigmar One';
      font-style: normal;
      font-weight: 400;
      src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
    }
    
    @import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
    body {
      overflow: hidden;
    }
    
    h1 {
      transform-origin: 50% 50%;
      font-size: 50px;
      font-family: 'Sigmar One', cursive;
      cursor: pointer;
      z-index: 2;
      /* position: absolute;
  top: 0; */
      text-align: center;
      width: 100%;
    }
    
    .heading {
      margin-left: 20%;
      margin-right: 20%;
      margin-top: -2%;
    }
    
    .hint {
      margin-top: 100%;
      margin-bottom: -10%;
    }
    
    .box {
      width: calc(33.3% - 4px);
      height: 110px;
      display: inline-block;
      border-radius: 5px;
      border: 2px solid #333;
      border: #000 border-color: #e6e600;
      margin: -2px;
      border-radius: 10%;
      background-color: #99ffff;
    }
    
    .box002 {
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 74.3%;
      margin-top: -84%;
      margin-bottom: 70%;
      background-color: #ffff00 2px;
      border: px solid #000066;
    }
    
    #timer {
      font-family: 'Sigmar One', cursive;
      margin-top: -20%;
      margin-left: 120%;
    }
    
    #heading {
      font-family: 'Sigmar One', cursive;
      color: #F534BB;
    }
    
    #container {
      white-space: nowrap;
      text-align: center;
      border: px solid #CC0000;
    }
    
    .containerr {
      padding-top: 30%;
      padding-right: 30%;
      padding-left: 30%;
      padding-bottom: 100%;
      border: px solid #FF3399;
    }
    
    .pic {
      background-size: 100% 100%;
    }
    
    .container2 {
      margin-top: 10%;
      margin-right: 50%;
      margin-left: -10%;
      border: px solid #009;
      border: px solid #FF3399;
    }
    
    p {
      font: "Courier New", Courier, monospace;
      font-size: 30px;
      color: #000000;
      text-align: center;
    }
    
    .text {
      padding: 20px;
      margin: 7 px;
      margin-top: 10px;
      color: white;
      font-weight: bold;
      text-align: center;
    }
    
    body {
      background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
      background-size: 100vw 100vh;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>



</head>

<body onload="buildImage();">
  <script>
    window.onload
  </script>



  <script type="text/javascript">
  </script>


  <script>
    var timeOut;

    function buildImage() {
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }

    function changeImage() {
      index++;
      if (index >= images.length) {
        index = 0;
      }
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')';
    }

    var index = 0;
  </script>

  <script>
    var audio = new Audio("correct.mp3");
    var audio2 = new Audio("wrong .mp3");




    function playAudio() {
      audio.play();
    }

    function playAudio2() {
      audio2.play();
    }

    function pauseAudio() {
      audio.pause();
    }

    function cancelAudio() {
      audio.pause();
      audio.currentTime = 0;
    }
  </script>




  </h1>

  </div>
  </script>


  <h4 id="timer" style="color:#ffc34d; font-size:29px"> Time <span id="countdowntimer">0 </span></h4>

  </div>

  <div class="container2">
    <div class="containerr">
      <div class="pic" id="content">
        <div id="container">

          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
            <p name="values"></p>
          </div>
        </div>
        <div id="2container">

          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
            <p name="values"></p>
          </div>
        </div>
        <div id="3container">

          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
            <p name="values"></p>
          </div>
          <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
            <p name="values"></p>
          </div>
        </div>




      </div>


    </div>

  </div>

  <div class="box002" draggable="true" ondragstart="drag(event)" id="2">
    <img src="" draggable="true" id="slide" style="width:120px; height:120px; border-radius: 50%;" border="rounded" />
  </div>
  <div class="hint" style="color:#ffffb3; font-size:20px; font-weight:bolder;" align="center">
    <h4>Hint:uncover the hidden picture by dragging and droping the clock to its correct time</h4>
  </div>
  <script>
    var items = [{
        label: '1:40',
        url: 'https://via.placeholder.com/75x75?text=1'
      },
      {
        label: '2:20',
        url: 'https://via.placeholder.com/75x75?text=2'
      },
      {
        label: '3:50',
        url: 'https://via.placeholder.com/75x75?text=3'
      },
      {
        label: '4:45',
        url: 'https://via.placeholder.com/75x75?text=4'
      },
      {
        label: '5:35',
        url: 'https://via.placeholder.com/75x75?text=5'
      },
      {
        label: '6:10',
        url: 'https://via.placeholder.com/75x75?text=6'
      },
      {
        label: '7:15',
        url: 'https://via.placeholder.com/75x75?text=7'
      },
      {
        label: '8:10',
        url: 'https://via.placeholder.com/75x75?text=8'
      },
      {
        label: '9:30',
        url: 'https://via.placeholder.com/75x75?text=9'
      },
      {
        label: '10:40',
        url: 'https://via.placeholder.com/75x75?text=10'
      },
      {
        label: '11:25',
        url: 'https://via.placeholder.com/75x75?text=11'
      },
      {
        label: '12:50',
        url: 'https://via.placeholder.com/75x75?text=12'
      }
    ];

    var tempimages = [];
    var array2 = [];
    array2 = items.slice();

    var backimgcount = 1;
    var len = array2.length;

    var item;

    var timeleft = 1;
    var downloadTimer = setInterval(function() {
      timeleft++;
      document.getElementById("countdowntimer").textContent = timeleft;
      if (timeleft >= 100)
        clearInterval(downloadTimer);
    }, 1000);


    var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
    var index = 0;

    function buildImage() {
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }

    function changeImage() {
      index++;
      if (index >= images.length) index = 0;
      document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
    }






    function rvalue() {

      elements = document.getElementsByClassName("box");

      for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "#1aff1a";
        //elements[i].borderRadius = "2px";
        elements[i].style.border = "2px solid #ffff80";
        //object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"

      }

      ptags = document.querySelectorAll('[name="values"]');







      for (var index = 0; index < 9; index++) {
        randomIndex = Math.floor(Math.random() * array2.length),

          item = array2[randomIndex];

        ptags[index].style.visibility = "visible";
        ptags[index].textContent = item.label;
        tempimages.push({
          data: item,
          index: randomIndex
        });

        ptags[index].dataset.itemIndex = randomIndex;
      }

      var tlen = tempimages.length;


    }


    function displayAllImages() {
      if (tempimages.length == 0) {
        rvalue();
        //return;

      }
      //tempimages = tempimages.concat(tempimages.splice(0,2));
      //item = tempimages.splice(0, 1);

      function shuffle(array) {
        var currentIndex = array.length,
          temporaryValue, randomIndex;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;

          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
        }

        return array;
      }

      // Used like so
      var arr = tempimages;
      arr = shuffle(arr);



      item = arr.shift();
      image = document.getElementById('slide');
      image.src = item.data.url;
      image.dataset.itemIndex = item.index;


    };

    $(function() {

      displayAllImages();

    });

    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {

      ev.preventDefault();


      var data = ev.dataTransfer.getData("Text");
      var el = document.getElementById(data);
      //alert(data);
      //alert(el);

      var x = document.getElementById("slide").dataset.itemIndex;
      var y = ev.target.dataset.itemIndex;

      //alert("x=>" + x + " y=>" + y);

      if (x == y) {
        //el.parentNode.removeChild; 
        playAudio();

        ev.currentTarget.style.backgroundColor = 'initial';
        ev.currentTarget.style.border = 'initial';

        var pParagraph = ev.currentTarget.firstElementChild;
        //ev.currentTarget.removeChild(pParagraph);
        pParagraph.style.visibility = "hidden";

        item = this.item;
        var arrayvalue = item.dataindex;
        array2.splice(arrayvalue, 1);






        //alert("sucessfull");
        if (tempimages.length == 0) {

          rvalue();


          //changeImage();

          changeImage();
        }
        displayAllImages();

      } else {
        playAudio2();
        alert("WRONG TIME PLACED");
      }

    }
  </script>
</body>

</html>

1 Ответ

0 голосов
/ 15 октября 2018

Все сводится к следующему: 

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.container2 {
  width: 35vw;
  position: fixed;
  top: 41.5vh;
  left: 14vw;
}
.box p {
  font-size: calc(2vw + 10px);
}

... и некоторая очистка.

Но в вашем примере есть много вещей, которые не подходят.Я искренне впечатлен, что это работает (и я никогда не говорил этого никому раньше, на SO).Сначала я согласился с предложением Кайидо (вы должны представить достаточно, чтобы воспроизвести проблему, а не всю страницу), но чем больше я смотрел на нее, тем больше понимал, что это будет невозможной задачей, учитывая состояние вашего кода.

При всем уважении и самых полезных намерениях, вам следует рассмотреть несколько основных уроков по HTML.По крайней мере, ваш код должен проверяться.Используйте валидатор HTML, который поможет вам исправить большое количество ошибок.По крайней мере, когда вы открываете парный тег, вы должны закрывать его.Еще одна очень серьезная проблема - у вас не может быть больше 1 <head> тегов.

Вот урезанная версия вашего макета, делающая то, что вы хотите: 

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 10%;
  background-color: #99ffff;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

p {
  font: "Courier New", Courier, monospace;
  color: #000000;
  text-align: center;
}

body {
  background-image: url(https://image.ibb.co/eV5WW9/background.jpg);
  background-size: 100vw 100vh;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.container2 {
  width: 35vw;
  position: fixed;
  top: 41.5vh;
  left: 14vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

.box002 {
  position: absolute;
  top: 28vh;
  left: 72vw;
}

.box002 img {
  width: 16vw;
  height: 30vh;
  border-radius: 50%;
}
<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="7">8:10</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="4">5:35</p>
        </div>
      </div>
      <div id="2container">

        <div class="box" id="10">
          <p name="values" data-item-index="11">12:50</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="9">10:40</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="11">12:50</p>
        </div>
      </div>
      <div id="3container">

        <div class="box" id="10">
          <p name="values" data-item-index="0">1:40</p>
        </div>
        <div class="box" id="11">
          <p name="values" data-item-index="3">4:45</p>
        </div>
        <div class="box" id="12">
          <p name="values" data-item-index="2">3:50</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="box002" draggable="true" id="2">
  <img src="https://via.placeholder.com/75x75?text=3" draggable="true" id="slide" border="rounded" data-item-index="2">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...