Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
z80b

Александр

Frontend
  • 45
    вклад
  • 5
    вопросов
  • 54
    ответа
  • 59%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как сделать бордер по макету?

    z80b
    Александр @z80b
    Frontend
    В вашей реализации нужно добавить еще border-radius, т.е.
    .account__file {
      width: 230px;
      padding: 0 20px;
      padding-top: 75px;
      border: 2px dashed #8eb9f5;
      border-radius: 15px;
    }


    Лучше в css кажется не получится.
    Другой вариант, можно заюзать svg. Т.е. подложить например под текст скругленный прямоугольник обведенный пунктиром.
    <div class="account__file">
      <svg xmlns="http://www.w3.org/2000/svg" with="100%" height="100%" class="border">
        <rect x="0" y="0" rx="30" width="100%" height="100%" class="border-rect" />
      </svg>
      <input type="file" name="file" id="file" />
      <label for="file">
        <span class="account__subtitle">drag & drop</span>
        <div class="account__text">
          <p>Upload only png, jpg, jpeg</p>
        </div>
      </label>
    </div>

    классу .account__file прописать position: relative
    css для svg:
    .border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    .border-rect {
      stroke: #8eb9f5;
      fill: #fff;
      stroke-width: 1;
      stroke-dasharray: 20;
    }


    Вот еще вариант с рамкой в качестве фона: https://z80b.github.io/qna.habr/
    Ответ написан более года назад
    4 комментария
    4 комментария
  • Swiperjs: как обратиться к кнопкам через $(this).parents?

    z80b
    Александр @z80b
    Frontend
    $('.object-slider').each(function (index, slider) {
          var swiper = new Swiper(slider, {
             lazyLoading: true,
             slidesPerView: 1,
             navigation: {
                nextEl: $(slider).parents('.object-slider-wrap').find('.slider-next'),
             },
          });
       });
    Ответ написан более года назад
    2 комментария
    2 комментария
  • Как получить title ссылки?

    z80b
    Александр @z80b
    Frontend
    const title = document.querySelector('.toolbar__button_edit').getAttribute('title');
    Ответ написан более года назад
    Комментировать
    Комментировать
  • Как сделать автотабуляцию неотформатированного кода?

    z80b
    Александр @z80b
    Frontend
    Pretty JSON плагин тебе в помощь, если конечно речь о JSON
    https://packagecontrol.io/packages/Pretty%20JSON
    Ответ написан более года назад
    Комментировать
    Комментировать
  • Как сделать множители при разных сценариях в js калькулятором окупаемости?

    z80b
    Александр @z80b
    Frontend
    Может так:
    const aRR = totalCustomers + (roi * (projectionScenarioInput.value + 1) * 10);
    Ответ написан более года назад
    Комментировать
    Комментировать
  • Как с помощью jQuery, найти и обернуть тегом -p- каждый параграф в контейнере?

    z80b
    Александр @z80b
    Frontend
    Например так:
    var lines = $('.content.html_format').html().replace(/<br\/?>/g, "\n").split(/\n+/);
    var new_text = $.map(lines, function(line) { if (line) return '<p>' + line + '</p>'; });
    $('.content.html_format').html(new_text);

    можно еще одной регуляркой, но что-то у меня не очень аккуратно получилось:
    $('.content.html_format').html($('.content.html_format').html().replace(/<br\/?>\n/g, "\n").replace(/(.+)\n+/g, '<p>$1</p>\n');
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сверстать такие блоки?

    z80b
    Александр @z80b
    Frontend
    Вот так, например:
    <div class="b-blocks">
        <div class="b-blocks__item">
            <div class="b-blocks__item-inner"></div>
        </div>
        <div class="b-blocks__item">
            <div class="b-blocks__item-inner"></div>
        </div>
        <div class="b-blocks__item">
            <div class="b-blocks__item-inner"></div>
        </div>
        <div class="b-blocks__item">
            <div class="b-blocks__item-inner"></div>
        </div>
    </div>

    .b-blocks {
        background: #fff;
        padding: 20px;
        width: 800px;
        
        &::after {
            content: '';
            display: table;
            clear: both;
        }
        
        &__item {
            float: left;
            box-sizing: border-box;
            width: 48%;
            height: 300px;
            padding: 10px;
            margin: 1%;
            background-color: gray;
            background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
            
            &-inner {
                width: 100%;
                height: 100%;
                background: #fff;
                
            }
        }
    }


    https://jsfiddle.net/hyjra7j8/6/
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему на ровном месте не работает ajax?

    z80b
    Александр @z80b
    Frontend
    У вас в строчке: var fd = new FormData( this ); в объекте нет значений из формы.
    Попробуйте:
    var fd = $(this).serializeArray();
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как верстать с маленьким экраном?

    z80b
    Александр @z80b
    Frontend
    Ну вообще вам нужно почитать про адаптивную верстку и про @media-правила в css.
    А так еще можно использовать масштабирование в браузере (Ctrl + "+" / Ctrl + "-" или Cmd + "+" / Cmd + "-" на Mac)
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как зациклить счетчик обратного отсчета?

    z80b
    Александр @z80b
    Frontend
    Как-то так:
    function getTimeRemaining(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date());
      var seconds = Math.floor((t / 1000) % 60);
      var minutes = Math.floor((t / 1000 / 60) % 60);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }
    
    function initializeClock(id, endtime) {
      var clock = document.getElementById(id);
      var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySelector('.seconds');
    
      function updateClock() {
        var t = getTimeRemaining(endtime);
    
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    
        if (t.total <= 0) {
          var currentTime = endtime.getTime();
          endtime.setTime(currentTime + 11000);
        }
      }
    
      updateClock();
      var timeinterval = setInterval(updateClock, 1000);
    }
    
    var deadline = new Date(Date.parse(new Date()) + 10000);
    initializeClock('clockdiv', deadline);
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как стилизовать через css полосу прокрутки внутри блока?

    z80b
    Александр @z80b
    Frontend
    Scrollbar стилизовать можно только в webkit браузерах и ie да и то не очень сильно. В ie так не получится скорее всего. В webkit с помощью свойств:
    ::-webkit-scrollbar
    ::-webkit-scrollbar-button
    ::-webkit-scrollbar-track
    ::-webkit-scrollbar-track-piece
    ::-webkit-scrollbar-thumb
    ::-webkit-scrollbar-corner
    ::-webkit-resizer.
    Пример:
    ::-webkit-scrollbar { width: 3px; height: 3px;}
    ::-webkit-scrollbar-button {  background-color: #666; }
    ::-webkit-scrollbar-track {  background-color: #999;}
    ::-webkit-scrollbar-track-piece { background-color: #ffffff;}
    ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
    ::-webkit-scrollbar-corner { background-color: #999;}}
    ::-webkit-resizer { background-color: #666;}


    Лучше использовать какой-нибудь js-плагин, типа этого: manos.malihu.gr/jquery-custom-content-scroller
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Разные внешние url для слайдов в slick slider?

    z80b
    Александр @z80b
    Frontend
    У slick-а есть свойство initialSlide, для указания начального слайда.
    A из url его можно взять например так (для варианта mysite.com/5):
    var slideNum = 0;
    var tmp = document.location.pathname.match(/^\/(\d+)/);
    if (tmp && tmp[1]) slideNum = tmp[1];

    Или так, для первого варианта (mysite.com?slide=5):
    var slideNum = 0;
    var tmp = document.location.search.match(/slide=(\d+)/);
    if (tmp && tmp[1]) slideNum = tmp[1];
    Ответ написан более трёх лет назад
    6 комментариев
    6 комментариев
  • Как содержание блока обратить в карусель?

    z80b
    Александр @z80b
    Frontend
    Попробуйте, например, это: kenwheeler.github.io/slick
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как на JavaScript или с помощью jQuery загрузить страницу в iframe?

    z80b
    Александр @z80b
    Frontend
    Примерно так же как у "Михаил Смыков", но с помощью jQuery
    <a href="..." data-href="http://some_url">Link</a>

    $('a[data-href]').on('click', function() {
      $('#iframe-id').attr('src', $(this).attr('data-href'));
    })
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
Оценили как «Нравится»
  • ← Предыдущие
  • 1
  • 2
  • 3
Самые активные сегодня
  • sergey-kuznetsov
    Сергей Кузнецов
    • 26 ответов
    • 0 вопросов
  • TheAndrey7
    • 6 ответов
    • 0 вопросов
  • rPman
    • 6 ответов
    • 0 вопросов
  • Айнур Бирдин
    • 5 ответов
    • 1 вопрос
  • dimonchik2013
    Dimonchik
    • 5 ответов
    • 0 вопросов
  • sasmoney
    sasmoney
    • 4 ответа
    • 1 вопрос
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации