Задать вопрос
  • Курсор ввода в любом месте окна браузеров?

    @greg79
    В хроме та же F7
    Ответ написан
    Комментировать
  • Курсор ввода в любом месте окна браузеров?

    rus0nix
    @rus0nix
    Admin
    Видимо вы нажали клавишу F7 в Microsoft Edge.
    5b549528da25f774201802.jpeg
    Нажмите опять эту клавишу для отключения.
    Ответ написан
    21 комментарий
  • Нужно ли проверять наличие элемента?

    @Fallenyasha
    Можно использовать синтаксис ES2020 Optional Chaining
    button?.classList.add('my-button');
    Ответ написан
    Комментировать
  • Как бы вы реализовали такой слайдер с ползунком?

    trushka
    @trushka
    А что там его писать? Поставить блоки в контейнер с overflow-x: scroll и спрятанным скроллбаром, в качестве ползунка - стилизованный input type=range, на oninput вешаете обработчик, чтоб менял scrollLeft в зависимости от величины. Можно скриптом задать input.max=container.scrollWidth-container.clientWidth, тогда можно задавать container.scrollLeft=input.value. А на container повесить обработчик onscroll, и если input не в фокусе (например, в jQuery if $(input).is(':focus') return; - чтоб не срабатывало, когда двигаешь ползунком, а не свайпом, колёсиком, стрелками на клавиатуре), то устанавливать наоборот, input.value=container.scrollLeft. ну, вот собственно и всё. Разве что ещё обработчик на колёсико поставить, чтоб колёсиком прокручивать.. хотя тут тоже осторожно надо, поскольку пользователи прокрутки жестами на тачпаде могут получить не то поведение, которое они ожидали..
    Ответ написан
    Комментировать
  • Как сделать подобный hover?

    origami1024
    @origami1024
    went out for a night walk
    Продлить выпадалку прозрачным верхним бордером.

    *с учетом информации, предоставленной моим подразделением медиумов.
    Ответ написан
    Комментировать
  • Как заставить скрипт отключиться при разрешении ниже 1200?

    copist
    @copist
    Empower people to give
    $(document).on('mousewheel DOMMouseScroll', function(event) {
      if($(window).width() > 1200) return;
      // ... и так далее
    });
    Ответ написан
    2 комментария
  • Как эффективней отрисовывать много SVG графики?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    По скорости работы, быстрее будет canvas, но он по скорости разработки будет хуже. У меня никаких тормозов на vue+svg нет, по крайней мере, до 500 объектов на холсте. Для оптимизации могу посоветовать некоторые вещи:
    1) Используйте path вместо нескольких разных других фигур.
    2) Для сетки не создавайте кучу линий или фигур, просто используйте pattern. Вот пример из моего проекта (он на React JSX, но не суть)
    <pattern id={"bg-" + this.props.id} patternUnits="userSpaceOnUse" width="100" height="100">
        <rect width="100" height="100" fill={this.props.canvasColor}></rect>
        <g fill={this.props.canvasGridColor} style={{ fillOpacity: 0.34 }}>
            <rect width="100" height="1" y="20"></rect>
            <rect width="100" height="1" y="40"></rect>
            <rect width="100" height="1" y="60"></rect>
            <rect width="100" height="1" y="80"></rect>
            <rect width="1" height="100" x="20"></rect>
            <rect width="1" height="100" x="40"></rect>
            <rect width="1" height="100" x="60"></rect>
            <rect width="1" height="100" x="80"></rect>
        </g>
        <rect width="100" height="100" fill="none" strokeWidth="2" stroke={this.props.canvasGridColor}></rect>
    </pattern>

    вот так заливаю на холст
    <rect style={{ 'fill': `url(#bg-${this.props.id}) #fff` }} ... />

    3) Задавайте для изменяемых объектов атрибут уникальный атрибут key
    4) Цельные объекты кидайте в группу, и на нее назначайте общие стили и позицию.
    UPD: простой пример на 1000 объектов (можно добавить, поменяв константу COUNT_OBJECTS) с drag&drop
    jsfiddle.net/Vlad_IT/81kegmxf
    UPD2: вот тот же пример, только с сеткой jsfiddle.net/Vlad_IT/qt64rouL/1 если делать сетку не заливкой, а элементами, будут ощутимые тормоза.
    Ответ написан
    1 комментарий
  • Почему при присвоении значения переменной «1» переменной «2», переменная «2» заменяется на «1»?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Вы присваиваете не значение, а ссылку на значение. Так происходит с объектами и массивами.

    let a = {x:1};
    let b = a; // Теперь a и b указывают на один и тот же участок памяти.
    b.x = 2;
    console.log(a.x); // 2    Ах, вот оно как!
    
    //Как скопировать:
    let c = {}; //Создается новый объект и под него выделяется новая память
    c.x = a.x; //Копирование значений, т.к. x это не объект.
    
    //Универсальный вариант (копируются все свойства):
    a.y = 11;
    a.z = 111;
    let d = Object.assign({}, a); 
    console.log(d); // {x:1, y:11, z:111}

    Object.assign()
    Ответ написан
    2 комментария