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

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

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

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

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

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

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

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

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

Finesse

  • 40
    вклад
  • 22
    вопроса
  • 54
    ответа
  • 48%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Могу ли я изменить свойтсов css без js по клику на элемент?

    Finesse
    Finesse @Finesse
    На чистом CSS нет, но можно с применением HTML. Смысл трюка: изменение состояния <input type="checkbox" /> и привязка CSS-свойств к этому состоянию. Пример:

    <input type="checkbox" id="wrapTrigger" />
    <div class="wrap">
      <p>Любой контент</p>
      <label for="wrapTrigger" class="button">Нажми меня</label>
      <p>Любой контент</p>
    </div>
    
    <style>
      #wrapTrigger {
        display: none;
      }
      .wrap {
        color: red;
      }
      input:checked + .wrap {
        color: blue;
      }
    </style>

    В этом примере важно, чтобы блок .wrap располагался сразу после input, иначе не сработает CSS-селектор +. HTML-элемент label переносит эффект клика на указанный чекбокс (связь происходит через значения полей for и id).
    Ответ написан более двух лет назад
    Комментировать
    Комментировать
  • Как получить количество участников группы Одноклассников?

    Finesse
    Finesse @Finesse Автор вопроса
    В документации теперь написано, что метод group.getInfo требует сессию для внешних приложений (не знаю, что это значит). Чтобы получить количество участников группы, я использую запрос из вопроса, добавляю в него параметр access_token (не требует авторизации пользователя, его можно получить в настройках приложения) и учитываю его при подписи запроса согласно инструкции.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сделать так, чтобы при нескольких подходящих HTML элементу CSS селекторах с равным весом применялся селектор относящийся к ближайшему родителю?

    Finesse
    Finesse @Finesse Автор вопроса
    CSS-переменные элегантно решают эту проблему:

    a {
      color: var(--link-color);
    }
    .style1 {
      --link-color: red;
    }
    .style2 {
      --link-color: green;
    }


    HTML-код тот же самый, то в вопросе. Демо: https://codepen.io/anon/pen/aqEmXr.

    По данным Can I use эту технологию поддерживают браузеры примерно 80% пользователей. По данным посещений сайтов, к статистике которых я имею доступ (≈300000 посетителей в месяц), эту технологию поддерживают браузеры 88% посетителей.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как верстать вылезая за границы блока?

    Finesse
    Finesse @Finesse
    Способ 1: абсолютное позиционирование

    <div class="block">
        <img class="image">
    </div>

    .block {
        position: relative;
        overflow: visible;
    }
    .block .image {
        position: absolute;
        top: -100px;
        right: 200px;
    }


    Способ 2: отрицательные отступы

    <div class="block">
        <img class="image">
    </div>

    .block {
        overflow: visible;
    }
    .block .image {
        display: inline-block;
        margin-top: -100px;
        margin-bottom: -100px;
    }


    В обоих способах адаптивность можно сделать с помощью @media-правил. Например:

    .block .image {
        position: absolute;
        width: 300px;
        top: -100px;
        right: 200px;
    }
    @media (max-width: 800px) {
        .block .image {
            width: 200px;
            top: -50px;
            right: 50px;
        }
    }
    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • Как преобразовать такой массив в нумерованный многоуровневый список?

    Finesse
    Finesse @Finesse
    Реализация алгоритма на JavaScript:

    function treeToPlainList(tree, idPrefix = '') {
        let list = [];
    
        // Проходит по каждому элементу массива
        tree.forEach((item, index) => {
            // Добавляет к элементу свойство id
            const itemForPlainList = {...item, id: idPrefix + (index + 1)};
            // Удаляет из элемента свойство children
            delete itemForPlainList.children; 
            // Добавляет элемент в итоговый массив
            list.push(itemForPlainList);
    
            if (item.children) {
                // Добавляет в конец итогового массива элементы, которые возвращает функция treeToPlainList
                list = [...list, ...treeToPlainList(item.children, idPrefix + (index + 1) + '.')];
            }
        });
    
        return list;
    }
    
    const list = treeToPlainList(tree); // tree — изначальный массив, list — результат
    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • Стоит ли до изучения бекенда (PHP) сперва изучать фронтенд?

    Finesse
    Finesse @Finesse
    Если вы изучаете PHP для веб-разработки, то вам в любом случае понадобится знание HTML и базовые знания CSS и JS.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Кто знает, что означает эта ошибка (This is a placeholder for the subdomain)?

    Finesse
    Finesse @Finesse
    Скорее всего не туда скопировали файлы. Поищите среди файлов на сервере файл, содержащий текст «This is a placeholder for the subdomain kotelna.devsite.co.ua» — именно там и будет место, куда надо класть файлы.
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как осуществить такую анимацию?

    Finesse
    Finesse @Finesse
    Через <canvas>. Программирование производится с помощью JavaScript. Схема примерно такая:
    1. На то место, где должен быть эффект, помещается canvas, который занимает всю площадь места.
    2. В памяти генерируется набор случайных точек со своим вектором скорости.
    3. В каждом кадре анимации точки сдвигаются в соответствии в вектором скорости.
    4. В каждом кадре анимации точки отрисовываются на canvas. Дополнительно проводятся линии между всеми парами точек, между которыми расстояние меньше определённого значения.

    Есть готовая библиотека для создания таких анимаций.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как изменить текст балуна метки, добавленной через ObjectManager (API Яндекс Карт)?

    Finesse
    Finesse @Finesse Автор вопроса
    objectManager.objects.getById(1).properties.balloonContentBody = 'Загружено (тут полезная информация)';

    Где 1 — id нужной точки. Будьте осторожны, objectManager.objects.getById может вернуть null. Демо на CodePen.

    У способа есть недостаток. Содержимое всплывающего окна не изменится, пока оно открыто. Новый текст применяется перед открытием балуна.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как добавить метки с помощью objectManager на Яндекс.картах?

    Finesse
    Finesse @Finesse
    Указанный вами код для задания списка меток нужно поместить внутрь функции createMap, переименовав переменную myMap в map. Туда же нужно поместить код для задания элементов управления

    Вот более простой пример создания карты со списком меток, добавляемым через ObjectManager:

    ymaps.ready(function() {
        // Создание карты и установка элементов управления
        var map = new ymaps.Map(document.getElementById('map'), {
            center: [42, 54],
            zoom: 6,
            controls: ['zoomControl', 'fullscreenControl'] // Полный список тут: https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls-docpage/#standard
        });
    
        // Добавление меток через ObjectManager
        var objectManager = new ymaps.ObjectManager({
            clusterize: true
        });
        map.geoObjects.add(objectManager);
        $.ajax({
            url: 'wp-content/themes/urbech-style/data.json'
        }).done(function(data) {
            objectManager.add(data);
        })
    });
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как исправить ошибку? Почему так происходит?

    Finesse
    Finesse @Finesse
    Файл _header.pug включает сам себя, получается рекурсия, из-за неё происходит переполнение стэка при компиляции. Чтобы исправить, уберите extends ../components/_header.pug из файла _header.pug.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как запускать js только на страницах в URL которых есть /shop/?

    Finesse
    Finesse @Finesse
    Вот так, если надо, чтобы путь содержал /shop/:
    if (window.location.pathname.indexOf('/shop/') >= 0)) {
      alert('Работает');
    }

    Вот так, если надо, чтобы страница была в директории shop, которая располагается в корне сайта (как в примерах в вопросе):
    if (window.location.pathname.match(/^\/shop(\/|$)/)) {
      alert('Работает');
    }
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Как правильно задать условие в цикле while?

    Finesse
    Finesse @Finesse
    While строго обязателен? Я бы сделал так:

    [100, 80, 60, 50, 40, 20, 10, 0].forEach(function(number) {
        document.write('Число: <b>' + number + '</b><br>');
    });
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • В чём разница done и success в ajax?

    Finesse
    Finesse @Finesse
    Практически ни в чём. Функции, переданные туда, будут выполнены при одинаковых условиях.

    Разница лишь в том, как передаётся функция-обрабочик события done (при инициализации запроса в первом случае и привязкой к обещанию во втором случая). На практике разница заключается в том, что втором примере можно указать сразу несколько функций, которые будут вызваны при завершении:

    var deferred = $.ajax({ ... });
    deferred.done(function(data) { /* Действие 1 */ });
    deferred.done(function(data) { /* Действие 2 */ });
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Как заблокировать остальные чекбоксы при клике по чекбоксу с value=0, к примеру?

    Finesse
    Finesse @Finesse
    jQuery тут не нужен. Работает в IE≥9.

    var masterCheckbox = document.querySelector('input[type="checkbox"][value="0"]');
    var slaveCheckboxes = document.querySelectorAll('input[type="checkbox"]:not([value="0"])');
    
    masterCheckbox.addEventListener('change', function() {
        if (masterCheckbox.checked) {
            // Галочка поставлена. Деактивируем остальные чекбоксы.
            Array.prototype.forEach.call(slaveCheckboxes, function(checkbox) {
                checkbox.checked = false;
                checkbox.disabled = true;
            });
        } else {
            // Галочка убрана. Активируем остальные чекбоксы.
            Array.prototype.forEach.call(slaveCheckboxes, function(checkbox) {
                checkbox.disabled = false;
            });
        }
    });
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Метод url.getInfo выполняется с ошибкой 10, а метод group.getInfo успешно. Баг или фича?

    Finesse
    Finesse @Finesse Автор вопроса
    API Одноклассников стало проверять права приложения при выполнении запросов. Как их получить:
    1. Написать на api-support@ok.ru письмо с просьбой выдать вашему приложению необходимые права, назвав ID приложения и описав, для чего вам эти права.
    2. После того, как вам подтвердят получение прав, зайти список загруженный приложений, в нужное приложение, внизу нажать на ссылку «Изменить настройки приложения».
    3. В разделе прав сделать все нужные права обязательными, нажать «Сохранить».
    4. Снова зайти в настройки приложения и в самом низу нажать кнопку «Получить access_token».
    5. Полученный access_token использовать для запросов к API.

    Судя по всему то, что метод group.getInfo не требует права — это баг.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как получать Email с вашего сайта без использования PHP?

    Finesse
    Finesse @Finesse
    Воспользоваться сервисом email-рассылок, например, MailChimp. Там вам дадут готовый HTML-код формы или API для более гибкой настройки формы, с помощью которой email-адреса будут отправляться на сервер сервиса и сохраняться там.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как исправить генерацию лишних событий dragenter и dragleave?

    Finesse
    Finesse @Finesse Автор вопроса
    С этим хорошо справляется библиотека Dragster.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сделать логику из общих значений?

    Finesse
    Finesse @Finesse
    Лучше всего применить однонаправленный поток данных.

    То есть. Хранить в постоянной памяти только исходный набор данных в виде списка объектов:
    var items = [
      {
        color: 'red',
        size: 100
      },
      {
        color: 'blue',
        size: 70
      }
      // и так далее
    ]

    Затем, когда пользователь выбрал какой-нибудь фильтр, например, цвет красный, пройтись по списку items и собрать те значения фильтра "размер", которые встречаются в элементах, которые подходят под фильтр цвета:
    var color = 'red';
    var availableSizes = [];  // Будет содержать список доступных размеров для красного цвета
    
    items
      // Отсеиваем элементы по фильтру цвета
      .filter( function( item ) { return item.color === color; })
      // Собираем значения фильтра размера для них
      .forEach( function( item ) {
        if ( availableSizes.indexOf( item.size ) === -1 )
          availableSizes.indexOf.push( item.size );
      });

    Полученный список размеров нужно передать в селектор на представлении и забыть его. Если пользователь выбрал другой цвет, то нужно взять начальный массив items и заново проделать с ним операцию, описанную выше. Не надо сохранять и использовать результат предыдущего запроса, надо работать только с начальным набором данных и тем, что ввёл пользователь, иначе сложность программы будет расти быстрее грибов после дождя.
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сделать вызов функции?

    Finesse
    Finesse @Finesse
    Вы вызываете функцию runCar прямо во время вызова animate, а не посылаете её вызываться по завершению анимации, потому что круглые скобки сразу после её названия вызывают её в тот же момент. Чтобы вызвать её с указанными аргументами по завершению анимации, сделайте так:
    function runCar(carNumber) {
      $(".car").animate({$start,$speed, 'linear', function() {
        runCar(carNumber)
      });
    }
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
Оценили как «Нравится»
  • 1
  • 2
  • 3
  • Следующие →
Самые активные сегодня
  • vabka
    Василий Банников
    • 15 ответов
    • 0 вопросов
  • Drno
    • 7 ответов
    • 0 вопросов
  • hint000
    hint000
    • 4 ответа
    • 0 вопросов
  • ThunderCat
    ThunderCat
    • 4 ответа
    • 0 вопросов
  • rootnoroot
    • 1 ответ
    • 3 вопроса
  • Stalker_RED
    Stalker_RED
    • 3 ответа
    • 0 вопросов
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

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

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