Как сделать такой функционал?

133
31 июля 2019, 19:00

Делаю такой мокап с переключателем. Всю логику продумал, все легко. Осталось лишь сделать один маленький пункт:

Как видно на изображение, сделал своими руками. Все очень просто, есть родительский блок который ограничен рамками макбука (Только экран без рамок). И есть это полоска. Она центрируется через position: absolute;. На скриншоте имеет left: 55%;. left: 0; - граница изображения.

Вопрос, как сделать чтобы лишь при клике на саму полоску можно было передвигать ее позицию по X, без минусовых позиций и не дальше чем граница (чтобы ограничевали 0 и 100%)?

Answer 1

Если я правильно понял, как вариант так jsfiddle

$('.poloska').click(function() { 
  var p = parseInt($(this).css('left')) * 100 / $('body').width(); 
  p >= 50 ? $(this).animate({ 
    left: '5%' 
  }, 500) : $(this).animate({ 
    left: '95%' 
  }, 500); 
});
body { 
  background: #20262E; 
  padding: 20px; 
  font-family: Helvetica; 
} 
 
.poloska { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 70%; 
  width: 10px; 
  background-color: #ffffff; 
  cursor: pointer; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="poloska"></div>

READ ALSO
Массив на javascript [закрыт]
javascript

Массив на javascript [закрыт]

Всем привет! Необходимо создать массив такого вида [[1], [2, 3], [4, 5, 6], [7, 8, 9, 10]]

 118
Ошибка 1273 Unknown collation: &#39;utf8mb4_unicode_ci &#39; при миграции в Laravel
MySQL

Ошибка 1273 Unknown collation: 'utf8mb4_unicode_ci ' при миграции в Laravel

Всем привет! При запуске кода php artisan migrate в консоле появилась такая ошибка:

 109
Laravel вложенные отношения в модель
MySQL

Laravel вложенные отношения в модель

Для того что бы получить список всех users вместе с posts которые принадлежат этим пользователям мы используем hasMany отношением

 131
Подсветка HTML и CSS синтаксиса в Visual Studio
HTML

Подсветка HTML и CSS синтаксиса в Visual Studio

Открывая файлы веб-проекта (HTML, CSS), мы видим только подсветку тегов, но тут я вспоминаю Sublime Text 3 или Visual Studio Code от Microsoft, в которых все подсвечивается...

 91