Ответы пользователя по тегу JavaScript
  • Как создать элементы пагинации с многоточием?

    @ksnk
    Надо исправить ошибки.
    Их много. Например свойство pagination определено 2 раза.
    Но это не так страшно, javascrpt игнорирует ненужное,
    type: 'custom', нужно определить в секции pagination, чтобы вообще вызывался собственный рендеринг, вот тогда обнаружится еще одна -
    const end = current + 1;
            if (current < 2) {
              end += 2 - current;
            }
    Присвоение константе - этого JS уже не прощает...
    Дальше уже нужно править стили...
    Ответ написан
  • Как сделать отступ от текста JS+HTML?

    @ksnk
    Тег < tt> -отображение текста моноширинным шрифтом, обрамить им нужный div, или вообще подменить его на тот тег
    Ну и выводить числа с ведущими пробелами:
    function TableYchastki() {
            let n = ChisloYchastkov.value, h=1+Math.floor(Math.log10(n));
            div1.style.display = "block";
            for (let i = 1; i <= n; i++) {
              div1.innerHTML = div1.innerHTML + "Площадь повреждённой территории на " +
                 (" ".repeat(h) + i).slice (-h).replace(/\s/g,"&nbsp;") + 
                 " участке: <input type=text id='ploshad" + i + "'><br>";
            }
        }

    Ответ написан
  • Любой символ в маске ввода номера, как сделать?

    @ksnk
    В этой самой маске столько косяков и мелей, что сразу может и крыша поехать. У меня сейчас вот такое чудище стоит
    $("input[type='tel']").each(function(){
                    if(!this.inputmask) { // ставили уже ?
                        let mask="+7 (999) 999-99-99[999]"; // 6 - 3-я 9-ка, 9-4-z 9-rf, 10-5.
                        function oninput(){
                            const wphoneValue = jQuery(this).val().replace(/\D/g, '');
    
                            if (wphoneValue.length >= 4) {
                                const firstThreeDigits = parseInt(wphoneValue.substring(1, 4));
                                if(firstThreeDigits>699 && firstThreeDigits<900 && firstThreeDigits!==812){
                                    // remove first letter from value
                                    jQuery(this).val(jQuery(this).val().replace(/\+7 \([78]/,'+7 ('));
                                    let pos=0;
                                    for(let x=wphoneValue.length;x>1;x--){
                                        pos=mask.indexOf('9', pos+1);
                                    }
                                    this.setSelectionRange && this.setSelectionRange(pos,pos,"forward");
                                }
                            }
                        }
                        $(this).on('input', oninput)
                            .inputmask({
                            "mask": mask,
                            skipOptionalPartCharacter: " ",
                            placeholder: "_",
                            autoclear: false,
                            onBeforePaste: function (pastedValue, opts) {
                                pastedValue = pastedValue.toLowerCase().replace(/\D/g, '').replace(/7(\d{10})/, '$1').replace(/8(\d{10})/, '$1');
                                return pastedValue;
                            }
                        })
                        var that=this;
                        setTimeout(function(){oninput.call(that)},10);
                    }
                })

    Пояснения:
    • input[type='tel'] - < input type="tel" ... вместо text позволит автоматически использовать мобильным броузерам телефоны и вставлять кнопки "позвонить". Это удобно. Да и вдруг еще где приспичит маску телефона поставить...
    • В хвосте маски вставлены еще возможные цифры, это про запас... Вдруг кто-то вставит код не для России, будет обидно потерять последние цифры вместе с клиентом. Хотя это, наверное, рудимент для таких случаев. Такие номера все равно придется вручную проверять, если клиента потерять таки действительно жалко.
    • onBeforePaste предназначена для Cut&paste в маску всяких красиво отформатированных телефонов, со скобками и дефисами в странных местах, возможно, с ведущей восьмеркой.
    • oninput позволяет избежать потери последней цифры, если юзер начал набивать номер, клавишами, начиная с 8-ки. Ввод корректируется сам, выкидывая ведущую 8, если он не напоминает код города 812... В соответствии с маской функция выкидывает лишнее и вставляет нужное.
    • Вызов функции oninput по таймауту позволяет бороться с автозаполнением номеров телефонов, которые броузер запомнил не так, как требуется странице.
    Ответ написан
    Комментировать
  • Как правильно обновить БД с помощью формы выведенной в цикле?

    @ksnk
    В комментариях советовали посылать одной формой, нужно только копировать шаблон ввода одного персонажа. Примерно так
    Основной смысл - шаблоном будут поля ввода первого участника, после копировании шаблона нужно подменить все атрибуты name новых элементов, добавив +1 в индекс имен.
    На стороне php просто пробежаться по массивам name, lastname и age и раскидать кого куда надо.
    Ответ написан
    Комментировать
  • Как реализовать анимацию линии?

    @ksnk

    Например вот так.
    Из минусов - при изменениии размера экрана рисование линий начинается заново. Но, возможно, это и плюс.
    В любом случае - для рисования и несложной анимации канвасом тут есть почти все необходимые запчасти
    Ответ написан
    Комментировать
  • Как нарисовать тонкую нормальную линию на канвасе между двумя кликами мыши?

    @ksnk
    У канваса есть еще атрибуты - высота и ширина. По этим атрибутам и идет рисование и их нужно установить для корректного пересчета координат рисования в клики.
    const rect = $canvas.getBoundingClientRect(); // после этого вставить 2 строки
        $($canvas).attr('width', rect.width);
        $($canvas).attr('height', rect.height);
    //...

    получится что-то вроде https://codepen.io/ksnk/pen/LYMPbxZ
    Ответ написан
    1 комментарий
  • Как сделать так, чтобы при наведении на блок появлялся список и не исчезал, пока не уберешь со списка курсор?

    @ksnk
    Вообще-то удобнее для отвечающего и быстрее для спрашивающего смастерить пример, например на codepen.io . Например так

    В отличии от кода в вопросе используются методы mouseenter, mouseleave как более подходящие к месту и toggle заменен на явную установку-выкидывание класса.
    Ответ написан
    Комментировать
  • Как валидировать кнопку у формы при незаполненном инпуте?

    @ksnk
    Так ?
    Кнопка отправки формы - одна - Next
    При нажатии на "Ввод" внутри текстового инпута происходит сабмит формы, При этом срабатывает самая первая кнопка сабмит, которая попадется в форме. Так что порядок кнопок немного другой, а чтобы визуально не отличалось - передернуто с помощью float:left .
    Ну и обрабатывать форму должен сервер, так что все набранные данные туда и отправляем....
    Ответ написан
  • Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок начался!", а когда заканчивался (8:40) - "Урок закончился!"?

    @ksnk

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

    Ответ написан
  • Не добавляются нули в таймер обратного отсчета?

    @ksnk
    days.toString().replace(/\d/gi, (substring) => `${substring}`);

    вот такие 3 строки нужно заменить на
    daysVal.innerHTML = '<span>'+days.toString().padStart(2,'0')+'</span>';
        hoursVal.innerHTML = '<span>'+hours.toString().padStart(2,'0')+'</span>';
        minutesVal.innerHTML = '<span>'+minutes.toString().padStart(2,'0')+'</span>';

    и короче и не каждая цифра оборачивается в свой спан
    Ответ написан
    Комментировать
  • Как сделать адаптивную разделительную линию между 2-мя текстами?

    @ksnk
    codius.ru/articles/%D0%9A%D0%B0%D0%BA_%D1%81%D0%B2...
    Не оно ? если нужно обязательно к левому краю прижимать номера страниц - можно ul.oglavl span.text задать размер в процентах, например.
    или https://qna.habr.com/q/391993
    Ответ написан
    4 комментария
  • Как можно сделать такой range с кастомными этапами?

    @ksnk
    Логарифмическая шкала?
    Ну вот так, например, можно сделать. Ставим на слайдере 1000 элементов. Пишем функцию конверсии значения слайдера в значение инпута и наоборот, рисуем метки под слайдером учитывая конверсию.
    чем больше step тем "кривее" шкала.
    $(function() {
            var valMap = [0, 1, 3, 6, 10, 15, 22, 30,40, 50]; // более равномерно в логарифмической шкале
    			// 0..1000 --> 0..50 (true, обратно false)
    				const step=2, 
    							w=[1000/Math.pow(50,1/step),50/Math.pow(1000,step)] ;
    			  function _conv(x, forvard){
    					if(!forvard)
    						return Math.pow(x,1/step)*w[0];
    					else
    						return Math.round(Math.pow(x,step)*w[1]);
    				}
    			
    			  $("#slider").slider({
                    max: 1000,//valMap.length - 1,
                    slide: function(event, ui) {
                       $("#radiusAmount").val(_conv(ui.value,true));
                    }
                })
                .each(function() {
    
                    var opt = $(this).data().uiSlider.options;
                    var vals = opt.max - opt.min;
                    var arrayLength = valMap.length;
    								for (var i = 0; i < arrayLength; i++) {
                        var el = $('<label>' + (valMap[i]) + '</label>').css('left', (_conv(valMap[i],false) / 10 ) + '%');
                        $("#slider").append(el);
                    }
                });
    			$(document).on('change','#radiusAmount', function(){
    					$("#slider").slider('value',_conv($(this).val(), false))	;				})
        });
    Ответ написан
    Комментировать
  • Как сделать такой инпут?

    @ksnk
    https://jsfiddle.net/wjg8oLsd/ Не то ?
    функция вычисления размера инпута стырена со stackoverflow
    P.S. Обновил решение
    Ответ написан
  • Как сделать вогнутую кнопку css?

    @ksnk
    htmlbook.ru/css/border-image
    Картинку с бордером можно нарисовать хоть в svg, но если png - в этом случае разумно будет примерно соответствовать средним размерам кнопок, чтобы при разных размерах не бросались в глаза артефакты при увеличении картинки
    Ответ написан
  • Как скрыть конец ссылки в адресной строке?

    @ksnk
    Тебе , вероятно, нужно не скрыть конец адресной строки, а выкинуть уже ненужный параметр select ?
    Что нибудь этакое, если в query_string действительно query_string, а не что-то еще
    $query=[];
    parse_str(parse_url($query_string, PHP_URL_QUERY),$query_array);
    unset($query_array['select']);
    echo (!empty($query_array)?'?':'').http_build_query($query_array);
    Ответ написан
    Комментировать
  • Как сделать хаотичное расположение слов с помощью CSS или JS?

    @ksnk
    Зависит от смысла задачи. Если поместить что-то такое на сайт, то гуглить по слову `wordart wordcloud`. Если понять, как делать самому или даже попытаться сделать - гуглить по словам "Облако тегов" или вот ссылка на доку от автора Wordle

    На js - Пример, и гитхаб
    Ответ написан
    Комментировать
  • Как ограничить выполнение функции mousemove 1 раз в секунду?

    @ksnk
    Довольно накладно менять стиль в списке стилей, чтобы они поменяли бякграунд у единственного элемента. Не проще ли явно менять стиль у этого самого элемента? Явно будет эффективнее.

    Ну а по сути вопроса - вот так можно без дополнительных сущьностей. 10 строк и никакого мошенничества с npm ...

    function moveBg(evt){
        if(!!moveBg.timeout){ // функция недавно вызывалась  - запоминаем параметр и ждем;
            moveBg.evt=evt;
            return ;
        }
        // начинаем засечку времени 1 сек. По окончании таймаута вызываем функцию с  последним актуальным параметром, если надо
        moveBg.timeout=setTimeout(function(){moveBg.timeout=null; if(!!moveBg.evt){moveBg(moveBg.evt); moveBg.evt=null}},1000 );
        // дальше без изменений и коррекций
        var totalWidth = $('.home-shadow').width()
        var rect = evt.target.getBoundingClientRect()
        var x = evt.clientX - rect.left;
        var percent = x*100 / totalWidth
        console.log(percent)
    
        var styleElem = document.head.appendChild(document.createElement("style"));
    
        styleElem.innerHTML = `#home-shadow:before {background-position: ${percent}% 50%`;
    }
    
    $('body').mousemove(function(evt){
        if(evt.target.classList[0] == 'home-shadow'){
            moveBg(evt);
        }
    });
    Ответ написан
    Комментировать