Ответы пользователя по тегу JavaScript
  • Как сабмитить форму ajax без перезагрузки страницы?

    trushka
    @trushka
    Обработчик не та клик сабмита ставить надо, а на сабмит формы:
    $("#chatForm").submit(function(){
    .........
    return false
    })

    Всё, на кнопку никакого дополнительного обработчика вешать не нужно - форма и так отправится и по клику на неё, и по энтеру. Вернее, не отправится, а сработает ваш обработчик, и отправит аякс-запрос.
    Ответ написан
    1 комментарий
  • Как сделать адаптивый видео фон для сайта?

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

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

    trushka
    @trushka
    Каждый раз append() вызывает тормоза, да и функция checkableItem() тоже весьма рессурсоёмкая. Да и сам по себе вызов функции весьма притормаживает выполнение. То есть, лучше прописать прямо в коде. Причём, именно добавлять в текстовую переменную сгенерированный html. А ховер-эффект с помощью css :hover сделать (а так же для :checked, чтоб отдельного класса не прописывать, ну и там ещё какой-то аттрибут my_type задаётся и при этом display:none - так тоже можно прописать в css .st-checkable-item[my_type] {display:none}).
    var ch = '', html='';            
                $.each(json.hotels, function(i) {
    
                    // Если итем присутствует в GET запросе.
                    ch =qs && qs.hotelId && qs.hotelId.length > 0 && $.inArray(json.hotels[i].id_extra, qs.hotelId) >= 0  // это выражение и так даст true или false
                   html+='<div class="st-checkable-item" unselectable="on"><input id="item_'+config.value+'" type="checkbox" value="'+json.hotels[i].id_extra+'" data-altvalue="+config.altValue+'"'+(config.ch?' checked':'')+'><label for="item_'+config.value+'" unselectable="on"><span>' + json.hotels[i].type + "&nbsp;" + json.hotels[i].name + '</span></label></div>'
                   // ну и т.д., я не все параметры тут вписал в код, но думаю, что ясно как остальные дописать.
                });
    $("#st-all-hotels-list .st-listbox-content").append(html)
    console.timeEnd('create list');
    Ответ написан
    Комментировать
  • Как сделать адаптивный наклонный элемент?

    trushka
    @trushka
    Вместо процентов можно использовать vw иkb vh. Ну и в сочитании с calc() можно вообще очень много чего делать))
    Ответ написан
    Комментировать
  • Не работает .fadeIn()?

    trushka
    @trushka
    Лучше вообще через CSS сделать - я так понимаю .carouselArrowLeft2,.carouselArrowRight2 находятся внутри .carousHiderWrapper2? Тогда можно просто сделать
    .carouselArrowLeft2, .carouselArrowRight2 {
        transition: .3s; opacitiy:0; visibility:hidden
    }
    .carousHiderWrapper2:hover .carouselArrowLeft2, .carousHiderWrapper2:hover .carouselArrowRight2 {
        opacitiy:1; visibility: visible
    }
    - и никакого jQuery нинада)) Visibility меняется для совместимости с ИЕ8- - он opacity не понимает
    Upd: Для сокращения лучше задать класс стрелочкам типа .carouselArrow2.left (class="carouselArrow2 left") - тогда будет
    .carouselArrow2 {transition: .3s; opacitiy:0; visibility:hidden}
    .carousHiderWrapper2:hover .carouselArrow2 {opacitiy:1; visibility: visible}

    А разные положения и картинки для каждой стрелочки уже задавать с помощью .carouselArrow2.left и .carouselArrow2.right
    Ответ написан
    Комментировать
  • Как сделать изменение позиции с помощью ползунка?

    trushka
    @trushka
    codepen.io/anon/pen/xZrGBo
    Там ещё добавил инструкции, так сказать, для правильного вертикального отображения в ИЕ и ФФ, ато ваш вариант в ФФ отображается, как на скрине из предыдущего ответа)) И вместо onload на oninput повесил, чтоб сразу на изменения реагиовало, в процессе так сказать. Но transition только на box-shadow оставил, так как оно мешает при таскании в реальном времени, так сказать
    Ответ написан
    Комментировать
  • Почему не работает загрузка файлов?

    trushka
    @trushka
    Можно форму в скрытый фрейм отправлять, указав его name в качесве target'a формы. На onload ему повесить обработчик, чтоб читал его содержимое с ответом, если надо
    Ответ написан
    Комментировать
  • Почему не работает простой скрипт переключения?

    trushka
    @trushka
    https://jsfiddle.net/trushka/fbcv90yd/1/ - просто not(".active") не нужно))
    Ответ написан
    Комментировать
  • Как заставить работать этот код в innerHTML?

    trushka
    @trushka
    Кавычки забыли (и экранировать их):
    document.getElementById("waiting").innerHTML = "<button class=btn onclick=\"this.disabled=true;this.className = (this.className == 'btn' ? 'btnss' : 'btn'\")>111</button>';
    И, кстати, не понимаю, зачем менять класс - другой стиль можно задать с помощью псевдокласса :disabled, а состояние в js проверять по этому же свойству, если надо
    Ответ написан
    Комментировать
  • Добавление классов в зависимости от состояния кнопки, или нужно ли оптимизировать jQuery-скрипт?

    trushka
    @trushka
    А зачем вообще менять класс? все эти состояния доступны для jQuery с помощью селекторов с псевдоклассами
    Ответ написан
    Комментировать
  • Есть ли альтернатива input type="number" для показа цифровой клавиатуры на смартфоне?

    trushka
    @trushka
    Можно определять по юзерагенту мобильные устройства и задавать для них type="number". Можно на сервере, можно javascript'ом..
    Ответ написан
    Комментировать
  • Как адаптировать функцию под JQuery?

    trushka
    @trushka
    Потому что this в данном случае будет не элемент, а набор элементов jQuery. Я б сделал где-то так:
    $.fn.getCaret=function() {
          if (!this[0]) return 0; // если в наборе нет элементов, например, несуществующий селектор
          if ( document.selection ) {
              this.focus();
              var Sel = document.selection.createRange();
              Sel.moveStart ('character', -this.val().length);
              return Sel.text.length;
          } else  {
              return this[0].selectionStart || 0;
          }
    };
    Ответ написан
    Комментировать
  • Возможна ли реализация простого скрипта через iframe?

    trushka
    @trushka
    Все современные браузеры умеют input type="range", да к тому же умеют его стилизовать, правда, каждый браузер по-своему. Как это сделать довольно легко гуглится.
    Ответ написан
    Комментировать
  • Как отследить клик вне определенного элемента?

    trushka
    @trushka
    Ну, на чистом js, чтоб меньше кода, можно просто на элемент обработчик повесить, в котором исполняется метод event.stopPropagation(), предотвращающиё всплытие. Тогда на document, например, вешается нужный обработчик, и он тупо не сработает, если клик будет на вашем элементе, так как на нём обработчик, отменяющий "всплытие"
    Ответ написан
  • Есть иконки и в формате svg, и если использовать шрифт css, то они не работают, почему?

    trushka
    @trushka
    какая-то у вас фигня в первом коде)) Шрифт то как работает: какому-то символу задаётся определённая svg-фигура. то есть в вашем случае, это какие-то стрелочки, судя по названию) Ну, можно их присвоить символам < и >, например.. Но мне кажется, для вашего случая лучше svg в качестве background'a применять
    Ответ написан
    Комментировать
  • Как получить первый опыт во front-end?

    trushka
    @trushka
    Я вот когда собирался начинать (правда, начал по-серьёзному гораздо позже, когда из-за маминой болезни не мог толком зарабатывать музыкой) сделал себе сайтик-визитку, типа для промоушена, так сказать, музыкальной деятельности.. На яндексовском narod.ru.. В стиле "чипсы Бойда", ага - даже фоном были слегка мерцающие звёздочки на чёрном)) Жалко, он не сохранился в первозданном виде - случально index.html для демо какого-то в корень загрузил, а заметил через пару месяцев только, когда ни в каких кэшах это не сохранирось.. Причём тогда ещё этих ваших вконтактов, фисбуков и твиттеров не было, но был жж - я его решил интегрировать с сайтом, чтоб в нём динамический контент отображался - просто сделал в основной части страницы iframe, в котором ЖЖ и отображалось. Ну, и дизайн ЖЖ подогнал под общую тему)) Ещё умудрился туда впиндюрить кастомный css, когда ещё не было в форме редактирования внешнего вида отдельного поля - в поле для задания своего шрифта)) А потом делал для ЖЖ типа html-баннеров для своих концертов...
    Ответ написан
    Комментировать
  • Как заставить работать transition?

    trushka
    @trushka
    Там всё неправильно.
    Во-первых transition надо указывать для анимируемого элемента, а не для контейнера - оно не наследуется! То есть, для .hover
    Во-вторых, transition так не указывается - для каждого свойства надо указывать отдельно, то есть transition: opacity .2s linear, transform .3s easy-in-out, например. В данном случае, лучше укороченную запись для all применить: transition: .2s easy-out
    В-третьих, для плавной работы transition нельзя для "свёрнутого состояния" указывать display: none - можно, разве что visibility: hidden для старых ослов указать, по спецификации видимость включается сразу, а выключается в конце трансформации, да и блок как бы отображён, только не показывается, по этому на его прорисовку тратится намного меньше времени. И все размеры, отступы и цвета должны быть заданы заранее - при ховере он только должен выдвигаться и "проявляться" из прозрачного состояния. Ну, и двигать лучше с помощью transform - так плавнее намного
    Вот так примерно: codepen.io/anon/pen/QyGqqz
    Ответ написан
  • Почему возвращается нуль?

    trushka
    @trushka
    var count = $(".container>*").length; // =3 - количество элементов непосредственных потомков
    var count = $(".container *").length; // =6 - количество потомков вместе с их "детьми"))
    Ответ написан
    Комментировать
  • Есть плагины для вот такой вот штуки?

    trushka
    @trushka
    зачем плагины? C jQuery, например, вообще элементарно: Есть например блок с id="content" с классом "loading", для которого фоном идёт как раз картинка со структурой.. Для загрузки выполняется
    $('#content').load('url для запроса', function(){$(this).removeClass('loading')} )
    api.jquery.com/load
    Ответ написан