• Почему разваливается адаптив?

    drymind404
    @drymind404
    front-end разработчик
    Верстка вообще никак не претендует на адаптивность. Во-первых, не должно быть так, что нужно делать такой огромный шрифт для маленьких экранов. К тому же, сайт открывается как будто с зумом. Все это должен решать вьюпорт, он есть, да конструкция сайта где-то явно мешает ему выполнять работу) Тяжело сразу назвать все проблемы, их там много. Даже не знаю как можно из такой ситуации выбраться, может только если все перестраивать и менять ширины различных блоков на резиновые, чтобы они менялись в зависимости от экрана.
    Ответ написан
    Комментировать
  • Как вывести загружаемые изображения на страницу по мере загрузки на сервер?

    drymind404
    @drymind404
    front-end разработчик
    Вы это без js хотите сделать?) Вам нужен AJAX. При отправке формы перехватываете event, посылаете ajax-запрос с нужными вам данными (изображения можно передавать через объект FormData), на сервере все это принимаете, делаете нужные действия, и отправляете оттуда ответ (echo) с нужным header. Например, можно отправить html-текст, в котором новый элемент списка картинок. И наконец, добавляете этот элемент в конец списка с помощью свойства success ajax-запроса (ну или выводите ошибку с помощью свойства error)
    Если хотите чтобы картинки по очереди появлялись на странице, можно отправлять по ajax-запросу для каждого загруженного файла, но тогда они могут загружаться не по очереди из-за разного размера. Чтобы все было по порядку, нужно применять более сложную механику.
    Ответ написан
    Комментировать
  • Как задержать выполнение функции JS?

    drymind404
    @drymind404
    front-end разработчик
    Лень возиться с кодом, поэтому вставил прямо туда:

    <form name="formaKorm" onsubmit="event.preventDefault(); validateKorm();">

    https://learn.javascript.ru/default-browser-action

    P.S. Пожалуйста, пишите классы, названия переменных, функций и т.д. на английском. Транслит просто ужасно читается и режет глаза) И на jsfiddle есть отдельное поле для JS кода. Даже если вы скопировали код из своего редактора, можно было перенести JS туда, чтобы людям было удобнее смотреть на это.
    Ответ написан
    1 комментарий
  • Как сделать адаптивную необычную плитку с картинками (как на скрине)?

    drymind404
    @drymind404
    front-end разработчик
    div.container
      div.col-6
      div.col-3
      div.col-3
        div.container
          div.col-12
          div.col-12


    Где div.col-12 с высотой в 50%. Всем col паддинги, но нужны в 2 раза меньше нижний паддинг у верхнего .col-12 и верхний паддинг у нижнего.
    Ответ написан
    Комментировать
  • Как избавиться от прокрутки снизу?

    drymind404
    @drymind404
    front-end разработчик
    Задать ширину в процентах. Вместо 100vw - 100%. Также лучше задать высоту в процентах. Для этого только нужно добавить:

    html,
    body {
      height: 100%;
    }
    Ответ написан
    2 комментария
  • Везде, кроме хрома на андроиде, отображается картинка. Как исправить?

    drymind404
    @drymind404
    front-end разработчик
    Проверил с хрома на андроиде - отображается. И какой же у вас сайт о программировании, когда фоновое изображение с "background-attachment: fixed" установлено не в отдельном блоке, а в самом header'е? Не замечаете, какие фризы при просмотре с ПК? Советую вынести фоновое изображение в отдельный блок и делать все, что захочется) А по поводу вашей проблемы - не вижу её. Может вы проверяете с Chrome Canary? В нем у меня уже возникали проблемы, особенно с fullscreen api.
    Ответ написан
    5 комментариев
  • Как скрыть панель адреса в мобиле?

    drymind404
    @drymind404
    front-end разработчик
    Или смириться с тем, что просто так ее убрать нельзя, или добавить кнопку для перехода в полноэкранный режим (fullscreen api). В нём адресная строка убирается. Но автоматически в него перейти не получится - нужно какое-нибудь действие пользователя. Вообще я раз сталкивался с проблемой адресной строки на телефонах, но все сводилось только к этому.
    Ответ написан
    1 комментарий
  • Как на html+css сделать окружность, которую в зависимости от времени можно закрашивать используя js?

    drymind404
    @drymind404
    front-end разработчик
    Ссылка из вашего вопроса не работает. Но если я правильно понял, почему не использовать, например, градиент? Если 2 цвета, меняете в 2-х местах проценты, и меняется степень заливки:

    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-image: linear-gradient(to top, red 0%, red 25%, black 25%, black 100%);
    }


    Исходя из того, как вы хотите менять степень закрашенности, можно, например, сделать так:

    var progress = 10; // допустим, это прошедшие минуты, полученные из бд
    var percent = Math.round(progress/60 * 100); // минуты в процентах от часа
    var circle = document.getElementsByClassName('circle')[0]; // собственно, наш круг
    circle.style.backgroundImage = "linear-gradient(to top, red 0%, red " + percent + "%, black " + percent + "%, black 100%)";


    P.S. Только сейчас заметил, что у вас запятая влилась в ссылку, поэтому у меня она не работала) Увидел как вам надо. Сразу не приходит идея как реализовать это ручками) Но, вероятно, есть готовые решения. Окружность с 4 ступенями заливки можно сделать с помощью обычных border'ов, так, например:

    .circle { 
      border-radius: 50%;
      border: 50px solid transparent;
      border-right-color: black;
      width: 0;
      height: 0;
      transform: rotate(-45deg);
    }


    Но с 6 - реализация явно намного сложнее и, скорее всего, не без js. Если хотите чтобы было в 6 ступеней, ищите готовые решения)
    Ответ написан
    Комментировать
  • Не работает свойство Transition?

    drymind404
    @drymind404
    front-end разработчик
    Если блок не должен занимать место на странице, то display: none и visibility: hidden. При hover возвращайте display и visibility. И пишите названия классов логичные и на английском языке без транслита, а так же не используйте inline встраивание стилей без крайней необходимости)
    Ответ написан
    Комментировать
  • .length не видит li на странице?

    drymind404
    @drymind404
    front-end разработчик
    Ну так task и doneTask получают length всего 1 раз, при загрузке страницы. Скрипт элементы добавляет, а значение переменных-то не изменяется.
    Ответ написан
  • Карусель Waterwheel адаптивная?

    drymind404
    @drymind404
    front-end разработчик
    Ну первое, что приходит в голову - это задать ей выравнивание по горизонтали по центру блока с помощью

    position: absolute;
    left: 50%;
    transform: translateX(-50%);


    А блоку задать

    overflow: hidden;

    Чтобы карусель не вылезала за его пределы.

    Но это ориентируясь на пример с их страницы. Если у вас она больше, или по каким-то другим параметрам отличается, скорее всего придется еще много что изменять.

    П.С.: управления тач-ивентами там нет, если вы подразумевали это, то видимо не адаптивная)
    Ответ написан
    1 комментарий
  • Как с помощью SASS задать стиль родительскому элементу из дочернего?

    drymind404
    @drymind404
    front-end разработчик
    Насколько я знаю, такой возможности нет ни в CSS, ни в SASS, ни в LESS. Если все должно быть именно так, то это к JS.
    Если в родителе будет только один .child элемент, то будет удобнее добавлять .completed родителю, так можно будет задать стили и ему, и дочернему элементу.
    Если больше одного - можете добавлять .completed и к .parent, и к .child. Родителю зададите стили с помощью селектора .parent.completed, а дочернему элементу с помощью .child.completed.
    Ну и в целом не представляю, где вам может понадобиться подобная механика, так что хотелось бы увидеть пример поконкретнее.
    Ответ написан
    Комментировать
  • Размеры в Bootstrap?

    drymind404
    @drymind404
    front-end разработчик
    Вообще их 5 - есть еще xs (extra-small), который является наименьшей единицей размерности. Если нужно применить что-то к такому разрешению, не нужно указывать xs в названиях классов, то есть, col-12 например будет элементом, который занимает 12 колонок, начиная с xs разрешения, а col-sm-12 уже с sm разрешения.
    Ответ написан
    Комментировать
  • Как в bootstrap поменять размеры container подобным образом?

    drymind404
    @drymind404
    front-end разработчик
    Согласно стандартным значениям, @container-md, -sm, -lg принимают размер @container-desktop, -tablet, -large-desktop соответственно. Значит, при изменении @container-desktop, -tablet, -large-desktop, вы измените и значения @container-md, -sm, -lg. А @container-xs, если я не ошибаюсь, имеет размер 100%, ведь в стандартном bootstrap с мобильных устройств контейнер принимает ширину всей страницы, а контент не прижимается к краям экрана из-за padding.
    Поэтому изменяйте значения пикселей @container-desktop, если хотите поменять для десктопа, @container-large-desktop, если для больших десктопов и @container-tablet для планшетов. Видимо, для телефонов изменить размер контейнера конкретно в кастомизаторе поля не дано, и это правильно по идее)

    5a525c8e94976757011905.png
    Ответ написан
    Комментировать