Ответы пользователя по тегу HTML
  • С помощью какой библиотеки реализовать перемещения блока во время скролла?

    trushka
    @trushka
    Можно блоку с контентом банально задать owerflow: auto, и просто отлавливать событие scroll на нём. Скрыть полосу прокрутки можно поместив блок в другой, фиксированной ширины, но с owerflow: hidden, а внутреннему задать float: left, например, и растянуть с помощью ::before с заданной шириной
    Ответ написан
    Комментировать
  • Почему не работает css анимация?

    trushka
    @trushka
    Да, всё зависит от того, какая у вас именно логика, так сказать, смены кадров. Вообще, тут, мне кажется, только transition нужен.. И лучше не left/top анимировать, а transform - будет плавнее и менее ресурсоёмко, без перерисовок экрана. Только надо will-change: transform задать
    Ответ написан
  • Как бы вы такое сверстали (точное наложение на фоновую картинку)?

    trushka
    @trushka
    делаем фоновый рисунок, совпадающий по размерам с логотипом, чтоб всё совпадало. Если логотип по центру, пишем что-то типа
    body {background url(bg.png) center repeat}
    #logo {position: absolute; left:0; top:0; right:0; bottom:0; margin:auto}
    - должны, по идее, совпасть)) Ну, логотип через img вставить, или размеры задать
    Ответ написан
    Комментировать
  • Как увеличить растояние подчеркивания у ссылок, которые состоят из нескольких строк?

    trushka
    @trushka
    можно с помощью linear-gradient. Только в ссылку span вложить пийдётся, чтоб растянуть по высоте строку, не увеличивая шрифт. Line-height только расстояние между строками увеличивает..
    https://jsfiddle.net/thu0wxba/
    Ответ написан
    1 комментарий
  • Обратиться к локальному ресурсу извне?

    trushka
    @trushka
    Можно прокси через .htaccess сделать. Не помню как, но легко гуглится, там одна строчка буквально
    upd:
    .htaccess:
    RewriteRule (camera) http://admin:admin@192.168.0.7/mjpeg.cgi [L,P,QSA]

    < img alt="" src="/camera" style="width:300px" / >
    Ответ написан
    Комментировать
  • Как сделать чтобы в смартфонах страница не увеличивалась и не уменьшалась?

    trushka
    @trushka
    Можно все размеры в vw и vh указывать. Тогда даже включенная пользователем в настройках опция "игнорировать запрет масштабирования" не спасёт пользователя от коварных планов дизайнера, и он, заплакав, уйдёт искать счастья на других сайтах.. Правда, если размер текста основного, так сказать, контента в каких-нибуть абсолютных величинах указать, он ещё может и не так сильно расстроиться))
    Ответ написан
    Комментировать
  • Если верстаешь несколько страниц, в которых есть повторяющиеся блоки, то как их инклюдить?

    trushka
    @trushka
    можно верстать отдельными страницами и вставлять с помощью iframe, если сайт совсем уж статический)
    Ответ написан
    Комментировать
  • Ajax возвращает одни и те же запросы с php, как исправить?

    trushka
    @trushka
    request.open('get', 'index3.php?a='+pageid+'&_='+Date.now());
    Ответ написан
    Комментировать
  • Как лучше организовать пользовательский ввод матрицы?

    trushka
    @trushka
    Ну, а что делать? Вот гугл-таблицы по тому же принципу работают, всё равно скроллить приходится, когда много строчек или столбцов
    Ответ написан
    Комментировать
  • Как принудительно разбить огромное слово на части?

    trushka
    @trushka
    лучше не в любом месте, а переносы расставить с помощью &shy;:
    ото&shy;ло&shy;рин&shy;го&shy;ло&shy;ги&shy;че&shy;ский
    Ответ написан
    Комментировать
  • Как настроить переход по ссылке в svg?

    trushka
    @trushka
    я так понимаю, лучше не через img делать, а если jQuery, то
    <div class="img" data-link-1="/link1.html" data-link-2="/link2.html" ></div>
    var svg=$('div.img').load("file.svg",  function(){
      $('a:eq(0)', this).attr('xlink:href', $(this).data('link-1'))
      $('a:eq(1)', this).attr('xlink:href', $(this).data('link-2'))
    });

    Исправил, лучше контейнер сделать какой-нить div, может, даже с inline-block, чтоб размеры и пропорции были те, что прописаны в svg
    Ответ написан
  • Бритва Оккама: лишние обертки. Как понять нужен ли оборачиающий блок или нет?

    trushka
    @trushka
    Ну, я вот стараюсь всегда максимально упростить (писал в коменте выше, почему), тут бы вполне можно было бы вот так:
    <header class="header page__header justify">
              <a href="../index.html" class="header__logo logo__link">
                <img src="../img/big-logo.png" class="logo__pic">
                <img src="../img/logo.png" class="logo__pic-small">
              </a>
          <nav class="nav">
            <button class="toggl-menu"><span></span></button>
            <a href="#" class="nav__link">О нас</a>
            <a href="#" class="nav__link">Абонементы</a>
            <a href="#" class="nav__link">Контакты</a>
          </nav>
    </header>
    Отступы в header'e можно сделать с помощью padding: 0 20px (а box-sizing: border-box уже и так для всех элементов у вас задан). Вот нащот списков внутри nav вроде довольно много копий уже сломано, но я вот считаю, что nav по определению уже список и можно тупо прямо в него ссылки лепить, без зазрения совести) В общем, как-то так)) А, да, и для раскрытия меню (да ивообще интерактивных элементов, не предполагающих переход по ссылке) лучше кнопку или просто span ставить.. Хотя, в последнем случае могут быть всякие сюрпризы в ойфонах
    Ответ написан
    Комментировать
  • Как при клике на ссылку добавлять в урл название?

    trushka
    @trushka
    Если я правильно понял, нужно менять адресную строку браузера? Тут лучше не предотвращать переход, а hashchange использовать, а якоря отдельно поставить, причём скрытые, чтоб при клике к ним не прокручивалось. Тогда даже будут кнопочки вперёд-назад в браузере работать и при открытии ссылки в новой вкладке скролиться к нужному блоку
    <a id="about_us" style="display:none"></a>
    <section class="medoff-about  module "></section>
    $(window).on('hashchange', function(){
        var id = location.hash, targ=$(id+'+section.module'); //запоминаем в targ нужный блок
        if (!targ[0]) return // выходим, если "левый" хэш, например, ввели вручную
        var top = targ.offset().top;
        $(".header__list a").removeClass(('active'));
        $('.header__list a[href="'+id+'"]').addClass('active');
        }
        //
        // if (windowRes <= 1024) {
        // 	$('body,html').animate({scrollTop: top})
        // }
        
        $('body,html').animate({
          scrollTop: top + 3
        }, 1500);
      });
    }).on('load', function(){$(window).hashchange()}) // переходим к нужному разделу, если, напрмер, ссылку в новой вкладке открыли
    Ответ написан
    8 комментариев
  • Есть готовое решение или нужно писать?

    trushka
    @trushka
    Та ну, там в принципе особо и писать много не надо.. Просто если даже какое-то готовое решение можно притянуть за уши, то там скорее всего будет дофига незадействованных возможностей, из-за которых прибавится тормозов. Я вот сделал бы генерацию козявки в случайном месте, потом перемещение на случайное расстояние Δx и Δy, причём с помощью transform для меньшей нагрузки на процессор. можно это делать плавно за счёт transition, а на transitionend повесить следующее перемещение. Положение можно кэшировать в каких-то внутренних переменных или в свойствах самого элемента, если козявка выползает за пределы экрана - удалять её и генерировать новую, или проверять следующие Δx и Δy, чтоб она вернулась в видимую область. Ну а в transform писать translate(x+=Δx, y+=Δy), где x и y - закешированные координаты. А для самих козявок - поискать анимированные картинки тупо в гугле, чтоб там крылышками типа помахивали и т.п. Можно их перед перемещением разворачивать в нужную сторону для большей реалистичности
    Ответ написан
    Комментировать
  • Как вытаскивать данные из текста?

    trushka
    @trushka
    Не очень понятен вопрос. Если всегда такой порядок (цена-товар-описатие), то можно типа
    var discription=str.split('\n'),
        price=discription[0],
        title=discription[1],
        comment=discription[2]
    Ответ написан
  • "Заморозить" div и включить по клику?

    trushka
    @trushka
    Можно проверять положение прокрутки страницы при touchstart и touchend, если изменилось - устанавливаем блоку overflow: hidden (можно и по событию scroll делать, но оно обычно не сразу генерируется, а после того, как страница "остановилась") и задаём таймер на 300-500 мс по которому возвращается элементу overflow: auto. Ну, вообще, надо сделать clearTimeout предварительно для таймера заданного в предыдущем свайпе. То есть сначала задаём var swipeTimer например, потом.. в общем на jQuery приблизительно так:
    var swipeTimer, top;
    $(windiw).on('touchstart', function(){top=$(windiw).scrollTop()})
     .on('touchend', function(){
    if (top==$(windiw).scrollTop()) return;
    clearTimeout(swipeTimer);
    swipeTimer=setTimeout(function{$('.mydiv').css({overflow: ''})}, 500);
    $('.mydiv').css({overflow: 'hidden'})
    })
    То есть, блок "заморозится", как только мы оторвём палец, после того, как начали прокручивать всю страницу и останется замороженным в течении полсекунды
    Ответ написан
  • Как сделать появление Pop-up после отправки формы?

    trushka
    @trushka
    надо вешать обработчик не на клик кнопки, а на submit формы:
    $("form").submit(function(){
    // валидируем форму;
    // отправляем данные на сервер;
    // показываем попап;
    return false // предотвращаем отправку формы и перезагрузку страницы
    })
    Как вариант, можно показать попап при отправке, потом при ответе от сервера в том же попапе показать результат, типа данные успешно отправились или ошибка.

    Кстати, в обработчике сабмита в качестве this будет элемент формы, и очень просто получить доступ к полям: this.inputName.value - это значение содержащегося в форме <input name="inputName">

    и ещё, что это за каменный век .css({'filter' : 'alpha(opacity=80)'})? Если даже хочеться, чтоб ие8 показывал, достаточно написать .css({'opacity' :80)}) - jQuery сам разберётся, если это ИЕ8- и задаст фильтр. Или .fadeTo(0, 80) - тогда даже show() можно не писать..
    Ответ написан
  • Всё, на что может нажать пользователь должно быть ссылкой?

    trushka
    @trushka
    Ящетаю, что ссылками должно быть только то, что можно корректно открыть в новой вкладке. Если такое не подразумевается - то button в лучшем случае - ну, чтоб всяких неприятных сюрпризов от ойпадов всяких не было.. Хотя, где-то читал, что многие проблемы с несрабатывающим в iOs кликом решаются заданием для кликабельного элемента cursor: pointer
    Ответ написан
    Комментировать
  • Как сделать адаптивый видео фон для сайта?

    trushka
    @trushka
    video.bg {width: 10px; min-width: 100%; min-height: 100%}

    И jQuery никакого не надо))
    Ответ написан
  • Как убрать оформление скайпа в номере телефона?

    trushka
    @trushka
    Может, сделать ссылку прозрачной или visibility: hidden, а под неё уже подложить текст ссылки
    Ответ написан
    Комментировать