Ответы пользователя по тегу JavaScript
  • Как получить текст из всех span?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Вы бы хоть привели свои тщетные попытки или разметку на крайний случай.
    Что ж:
    var arr = [];
    document.querySelectorAll('.classname').forEach(function(item) {
        arr.push(item.textContent);
    });
    console.log(arr);
    Ответ написан
    3 комментария
  • Как не писать повторяющийся код в HTML, а автоматизировать создание кода на JS?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Для этого во всех языках программирования придумали цикл. Он же loop. Он же залу..фор, вайл, форич и т.п.
    Ответ написан
    1 комментарий
  • Как при нажатии на " * " отображать " ⋅ "?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    document.getElementById('st5').oninput = function(e) {
       if (e.data === '*') {
           this.value = this.value.replace('*', '⋅');
       }
    }
    Ответ написан
  • Как производительно обновить текст тегов значениями переменных в цикле?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Единственное, чем существенно можно ускорить – это собрать весь необходимый html циклом вне DOM в виде строки и потом разово всё это вставить в DOM innerHTML'ом. Это будет в сто раз быстрее, по-другому никак.

    Я не уверен, что у вас тормозит именно мутация DOM'а. Возможно, именно сам JSON долго грузится из-за своего объёма.
    Ответ написан
  • Как запретить сайту подгружать скрипты с внешнего сайта с определенным url?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Есть обратное: CSP – разрешить загружать скрипты(и не только) с определённых domains и это нужно использовать, по-хорошему, всегда.

    Если используется апаче, то можно через него, используя .htaccess:

    Header set Content-Security-Policy "
        default-src 'self';
        script-src 'self' www.google-apis.com *.cloudflare.com someotherDomain.com;
    "


    Если php, то можно добавить непосредственно заголовки:
    $headerCSP = "Content-Security-Policy:".
            "connect-src 'self' ;". // XMLHttpRequest (AJAX request), WebSocket or EventSource.
            "default-src 'self';". // Default policy for loading html elements
            "frame-ancestors 'self' ;". //allow parent framing - this one blocks click jacking and ui redress
            "frame-src 'none';". // vaid sources for frames
            "media-src 'self' *.example.com;". // vaid sources for media (audio and video html tags src)
            "object-src 'none'; ". // valid object embed and applet tags src
            "report-uri https://example.com/violationReportForCSP.php;". //A URL that will get raw json data in post that lets you know what was violated and blocked
            "script-src 'self' 'unsafe-inline' example.com code.jquery.com https://ssl.google-analytics.com ;". // allows js from self, jquery and google analytics.  Inline allows inline js
            "style-src 'self' 'unsafe-inline';";// allows css from self and inline allows inline css
    //Sends the Header in the HTTP response to instruct the Browser how it should handle content and what is whitelisted
    header($contentSecurityPolicy);
    Ответ написан
  • Блок со скрытым контентом, что я не так делаю?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Вызываете свой код (в первой же строчке) только для первого слайдера. Лучше переписать таким образом, чтобы в качестве аргумента была сама Node, а не селектор и продублировать этот вызов для второго слайдера:

    setTimeout(initSliders(document.querySelectorAll('.slider')[0], document.querySelectorAll('.between')[0], document.querySelectorAll('.first')[0], document.querySelectorAll('.second')[0], document.querySelectorAll('.min')[0], document.querySelectorAll('.max')[0]), 0);
    setTimeout(initSliders(document.querySelectorAll('.slider')[1], document.querySelectorAll('.between')[1], document.querySelectorAll('.first')[1], document.querySelectorAll('.second')[1], document.querySelectorAll('.min')[1], document.querySelectorAll('.max')[1]), 0);
    
    function initSliders(argSlider, argBtw, argBtn1, argBtn2, argInp1, argInp2) {
      const slider = argSlider;
      const between = argBtw;
      const button1 = argBtn1;
      const button2 = argBtn2;
      const inpt1 = argInp1;
      const inpt2 = argInp2;
      const min = inpt1.min;
      const max = inpt1.max;
        
      /* инициализация */
      const sliderCoords = getCoords(slider);
      button1.style.marginLeft = '0px';
      button2.style.marginLeft = (slider.offsetWidth - button1.offsetWidth) + 'px';
      between.style.width = slider.offsetWidth + 'px';
      inpt1.value = min;
      inpt2.value = max;
      
      /* первый вывод */
      inpt1.onchange = (evt) => {
        if (parseInt(inpt1.value) < min) {
          inpt1.value = min;
        }
    
        if (parseInt(inpt1.value) > max) {
          inpt1.value = max;
        }
    
        if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
          const temp = inpt1.value;
          inpt1.value = inpt2.value;
          inpt2.value = temp;
        }
    
        const sliderCoords = getCoords(slider);
        const per1 = parseInt(inpt1.value - min) * 100 / (max - min);
        const per2 = parseInt(inpt2.value - min) * 100 / (max - min);
        const left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
        const left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;
    
        button1.style.marginLeft = left1 + 'px'; 
        button2.style.marginLeft = left2 + 'px';
    
        if (left1 > left2) {
          between.style.width = (left1 - left2 + 18) + 'px';
          between.style.marginLeft = left2 + 'px';
        } else {
          between.style.width = (left2 - left1 + 18) + 'px';
          between.style.marginLeft = left1 + 'px';  
        }
      }
      
      /* второй вывод */
      inpt2.onchange = (evt) => {
        if (parseInt(inpt2.value) < min) inpt2.value = min;
    
        if (parseInt(inpt2.value) > max) inpt2.value = max;
    
        if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
          const temp = inpt1.value;
          inpt1.value = inpt2.value;
          inpt2.value = temp;
        }
    
        const sliderCoords = getCoords(slider);
        const per1 = parseInt(inpt1.value - min) * 100 / (max - min);
        const per2 = parseInt(inpt2.value - min) * 100 / (max - min);
        const left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
        const left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;
    
        button1.style.marginLeft = left1 + 'px'; 
        button2.style.marginLeft = left2 + 'px';
    
        if (left1 > left2) {
          between.style.width = (left1 - left2 + 18) + 'px';
          between.style.marginLeft = left2 + 'px';
        } else {
          between.style.width = (left2 - left1 + 18) + 'px';
          between.style.marginLeft = left1 + 'px';  
        }
      }
      
      /* события мыши */
      button1.onmousedown = (evt) => {       
        const sliderCoords = getCoords(slider);
        const betweenCoords = getCoords(between); 
        const buttonCoords1 = getCoords(button1);
        const buttonCoords2 = getCoords(button2);
        let shiftX1 = evt.pageX - buttonCoords1.left;
        let shiftX2 = evt.pageX - buttonCoords2.left; 
    
        document.onmousemove = (evt) => {
          let left1 = evt.pageX - shiftX1 - sliderCoords.left;
          let right1 = slider.offsetWidth - button1.offsetWidth;
    
          if (left1 < 0) {
            left1 = 0;
          }
    
          if (left1 > right1) {
            left1 = right1;
          }
    
          button1.style.marginLeft = left1 + 'px';  
          shiftX2 = evt.pageX - buttonCoords2.left;
    
          let left2 = evt.pageX - shiftX2 - sliderCoords.left;
          let right2 = slider.offsetWidth - button2.offsetWidth;
    
          if (left2 < 0) {
            left2 = 0;
          }
    
          if (left2 > right2) {
            left2 = right2;
          }
    
          let per_min = 0;
          let per_max = 0;
    
          if (left1 > left2) {
            between.style.width = (left1 - left2 + 18) + 'px';
            between.style.marginLeft = left2 + 'px';
            per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
          } else {
            between.style.width = (left2 - left1 + 18) + 'px';
            between.style.marginLeft = left1 + 'px';                
            per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
          }
    
          inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
          inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
        };
        
        document.onmouseup = () => document.onmousemove = document.onmouseup = null;
    
        return false;
      };
      
      button2.onmousedown = (evt) => {       
        const sliderCoords = getCoords(slider);
        const betweenCoords = getCoords(between); 
        const buttonCoords1 = getCoords(button1);
        const buttonCoords2 = getCoords(button2);
        let shiftX1 = evt.pageX - buttonCoords1.left;
        let shiftX2 = evt.pageX - buttonCoords2.left;  
        
        document.onmousemove = (evt) => {
          let left2 = evt.pageX - shiftX2 - sliderCoords.left;
          let right2 = slider.offsetWidth - button2.offsetWidth;
    
          if (left2 < 0) {
            left2 = 0;
          }
    
          if (left2 > right2) {
            left2 = right2;
          }
    
          button2.style.marginLeft = left2 + 'px';                      
          shiftX1 = evt.pageX - buttonCoords1.left; 
    
          let left1 = evt.pageX - shiftX1 - sliderCoords.left;
          let right1 = slider.offsetWidth - button1.offsetWidth;  
    
          if (left1 < 0) {
            left1 = 0;
          }
    
          if (left1 > right1) {
            left1 = right1;
          }                      
    
          let per_min = 0;
          let per_max = 0;
    
          if (left1 > left2) {
            between.style.width = (left1 - left2 + 18) + 'px';
            between.style.marginLeft = left2 + 'px';
            per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
          } else {
            between.style.width = (left2 - left1 + 18) + 'px';
            between.style.marginLeft = left1 + 'px';
            per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
          }
    
          inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
          inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
        };
    
        document.onmouseup = () => document.onmousemove = document.onmouseup = null;
    
        return false;
      };
      
      /* отключение Drag’n’Drop браузера, чтобы не было конфликта */
      button1.ondragstart = () => {
        return false;
      };
      
      button2.ondragstart = () => {
        return false;
      };
    }
    
    /* Получение координат элемента */
    function getCoords(elem) {
      const box = elem.getBoundingClientRect();
      
      return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
      };
    }
    Ответ написан
    1 комментарий
  • Как манипулировать строками, содержащими спецсимволы?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Нужно енкодить спецсимволы в html entities:

    function encodedStr(str) {
        return str.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
            return '&#' + i.charCodeAt(0) + ';';
        });
    }
    
    var marking = prompt('введите строку');
    tr.children("td:first").append("<div><input type='text' name='foo' value='" + encodedStr(marking) + "'></div>");
    Ответ написан
    Комментировать
  • Как убрать текст ошибки после ввода сообщения?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Нужно навесить обработчик нажатия клавиш на этот инпут вне обработчика .submit:

    document.getElementById('message').oninput = function(e) {
        document.querySelector('.error').style.display = 'none';
    }

    Жестковатый код, но поскольку вы всёравно пишете на жуйквери то сойдёт.
    Ответ написан
  • Как открыть modal через плагин jQuery contextMenu?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Я не знаю что это за плагин, базирую свой ответ лишь на прочтении вашего кода.
    Вы не туда воткнули код, это свойство, очевидно, описывает иконку пункта меню.
    Код пишите внутри callback функции. Самое простое - это сравниваете Если m === “New Task”(нужно поверить в каком именно виде он выдаёт строку), то выполняете вызов модалки:
    $('#modal1').modal('open');
    А вообще нужно смотреть документацию к плагину, что вы скачали.
    Ответ написан
  • Почему в данном случае не создаются свойства объекта?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Потому что вы ломаете функцию-конструктор, которая не должна ничего возвращать явно, потому что делает это неявно - возвращает this.

    Дальнейшие вопросы исходя из вышесказанного не имеют смысла, но я всё равно отвечу:
    - Свойства создаются. В этом легко убедиться.

    Замечания:
    - $c - следует забыть про доллары, доллары - удел библиотек.
    - Функции-конструкторы именуются с большой литеры.
    - Переменные в JS именуют в camelCase нотации, а не как в голову взбредёт.
    Ответ написан
  • Как удалить элементы массива внутри цикла JS?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    var invItems = [
        {
            nameItem: 'Предмет_1'
        },
      {
            nameItem: 'Тест'
      },
        {
            nameItem: 'Предмет_2'
        }
    ];
    
    var arr = [0,2],
        arrLength = invItems.length;
    
    for (var i = 0; i < arrLength; i++) {
       for (var j = 0; i < arr.length; j++) {
           if (i === j) {
               invItems.splice(i, 1);
               break;
           }
       }
      
    }
    console.log(invItems);
    Ответ написан
    Комментировать
  • Почему не запускается clearInterval?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Потому что всякий раз, когда задаётся новый setInterval, старый нужно убить. А у вас они накапливаются.
    Ответ написан
    Комментировать
  • Почему не срабатывает matchHeight?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Оно работает, все указанные вами элементы(а именно блоки с заголовками) по 101px.
    Но вы, вероятно, хотели, вызвать метод на .category-post__content элементах.
    Ответ написан
  • Как узнать загруженность CPU в DevTools Perfomace?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Ну там же дофега всего есть и FPS тебе и загрузку процессора покажет и можно даже искусственно затротлить процессор, получив слоудаун в разы, чтобы эмулировать более слабые девайсы.

    5e56a8d8a198f400563318.png
    5e56a8de2f43d813324248.png
    5e56a8e58ef9d904840583.png
    Ответ написан
  • Почему в этом случае не работает querySelectorAll?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Потому что, querySelectorAll() возвращает NodeList (типо массив). А ваш код предполагает обращение к одному элементу.

    Прежде, чем задавать вопрос такого уровня, следует открыть MDN.
    Ответ написан
    1 комментарий
  • Что считается лучшей практикой для динамически созданных объектов?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Установка класса будет менее затратной. И устанавливать его нужно не setAttribute(), а classList.add()
    Ответ написан
    Комментировать
  • Как заблокировать кнопку скачивания savefromnet на iframe player vimeo?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Буквально непродолжительное время назад я наткнулся в сети на весьма любопытный экземпляр кинематографического искусства(не спрашивайте про жанр). Настолько любопытный, что мне захотелось его скачать. В веб документе плеер был представлен самым что ни на есть стандартным HTML5 плеером, что означало, что я могу, вызвав на нём контекстное меню, просто щёлкнуть и скачать кино. Однако, меня ждало разочарование: разработчик позаботился о таких как я и контекстное меню у плеера было просто отключено.

    Тогда я, как матёрый фронт-эндер, полез во вкладку Network, чтобы прямым GET-запросом скачать желанное кино, скачивание которого в тот момент уже стало просто делом чести и принципа, а не только лишь из удовлетворения интереса его содержанием. Но и здесь меня ждали: прямым запросом браузер отказался мне отдавать видео файл, очевидно, на сервере проверялись заголовки запроса.

    Глядя на всё это несуразие я понимал, что контекстное меню видео плеера просто превэнтДефолтнули и, скорее всего(внешний вид сайта как бы намекал), на сайте используется jQuery, а значит событие обрабатывают, вероятнее всего, им. Короче, я просто заnullил джейкверный объект jQuery._data('events') с обработчиками событий, что позволило вызвать контекстное меню плеера и нажал "download video".

    Мораль сей басни, Дмитрий, такова: было бы желание.
    Ответ написан
    Комментировать
  • Как реализовать прокрутку страницы по блокам?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Это ублюдский плагин. Но в любом случае, если не хочется брать готовый плагин, то придётся писать свой. Что именно непонятно? Вопрос слишком общий. Вешаешь слушатель на скролл, на некоторый порог скролла начинаешь форсить его своей анимацией и на этот период блокируешь любое взаимодействие с интерфейсом, владеешь информацией какая секция активна, какие отступы секций от топа, какой у неё индекс относительно всего массива секций ну и прочее, там много всего. А потом всё это ещё с тачем подружить надо будет.
    Ответ написан
  • Существует ли предел объема данных в GET-запросе?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Конечно. 4 Кб.
    Ответ написан
    2 комментария
  • Как удалить class у родителя если textarea не пустой?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    if (document.getElementById('info').value !== '') {
        document.getElementById('info').parentElement.classList.remove('hide_block');
    }
    Ответ написан
    5 комментариев