Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгом «jquery»

jQuery
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.


Иван Бармашов
  • Репутация: 71
  • Сниппеты: 7
  • Ревизии: 0

UPD: обновил сниппет, спасибо Great-Antique

Когда на странице в списках много элементов, то её нужно как-то скрывать. В проекте использовал такое решение:

1llArka.png

Продолжение »

Kosuha606
  • Репутация: 11
  • Сниппеты: 11
  • Ревизии: 0

Простая функция, которая переберет в цикле нужные вам для проверки свойства CSS и проверит поддерживает ли их браузер.

function checkCssSupport(containerSelector) {
    var supportValues = [
        {
            feature: "display",
            value  : "flex",
        }
    ], supportIndex, curFeature,
       curValue, notSupportedClass;
    for (supportIndex in supportValues) {
        curFeature = supportValues[supportIndex].feature;
        curValue   = supportValues[supportIndex].value;
        notSupportedClass = 'no-' + curValue + '-support';
        $(containerSelector).addClass(notSupportedClass);
        if (typeof(CSS) !== 'undefined') {
            if (CSS.supports(curFeature, curValue)) {
                $(containerSelector).removeClass(notSupportedClass);
            }
        }
    }
}

Продолжение »

FullZero
  • Репутация: 7
  • Сниппеты: 6
  • Ревизии: 0
(function($) {
    $.rand = (arg)=>{
        return ($.isArray(arg))?arg[$.rand(arg.length)]:(typeof arg == "number")?Math.floor(Math.random() * arg):11;
    };
})(jQuery);
var items = [523,3452,334,31,57,5346];
console.log($.rand(10));
console.log($.rand(items));
console.log($.rand());
Gravatar image
zoxon
  • Репутация: 5
  • Сниппеты: 3
  • Ревизии: 1

В соц. сетях, например в Twitter, вы заметите, что даты выводятся в формате — 1 hour ago. Чтобы сделать на своё сайте также, нам достаточно использовать timeago.js

Если вам нужна поддержка русского языка, достаточно подключить его так:

<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/jquery.timeago.js"></script>
<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.ru.js"></script>

Другие локализации можете найти тут — locales

// JS
jQuery(function ($) {
    $(document).ready(function() {
        $(".time").timeago();
    });
});

// Html
<time class="time" datetime="2015-08-18T09:24:17Z" title="18 Августа 2015">18 Августа 2015</time>
IStranger
  • Репутация: 17
  • Сниппеты: 8
  • Ревизии: 0

"Золотые" правила оптимизации фронтэнда часто рекомендуют подключать все JS скрипты в конце страницы. Однако обычно нам строго необходимо подлючать <script src="//jquery.js"> в <head> страницы, и мы не можем его оттуда удалить, поскольку контент страницы может содержать onReady-обработчики, например $(function(){ ... }). Такие обработчики обычно вставляются автоматически сторонними виджетами, CMS, фреймворками.

Этот короткий скрипт позволяет переместить подключение jquery.js из <head> в конец <body> без изменения имеющихся onReady-обработчиков на странице.

Продолжение »

Gravatar image
jumper423
  • Репутация: 58
  • Сниппеты: 9
  • Ревизии: 2

Smoothsort.gifGitHub / Демо

Плавная сортировка вертикальных элементов.

Главной задачей было добиться максимальной быстрой скорости сортировки и отрисовки, без лишних действий. Данный плагин предназначен для узкого списка задач, по этому на супер функциональность в нём можете не рассчитывать.

Так же есть AssetBundle для Yii2 SmoothSortAsset

Продолжение »

Gravatar image
avkvak
  • Репутация: 1
  • Сниппеты: 0
  • Ревизии: 1

Благодарю автора zular за данный скрипт. Хотел написать коммент, но нажал чтото не то :) В общем, чтобы класс таки удалялся, на 6 строке лучше сравнивать в виде ">" а не ">=" ибо в нашем случае $(window).scrollTop() всегда >= 0

Здравствуйте, столкнулся с задачей фиксации меню при скролле страницы, был найден скрипт на просторах интернета, который решил мою задачу. Я его немного изменил под свои нужды.

Зависимости:

  • Jquery

Классы:

  • .nav-afix - само меню
  • .affix - класс который добавляется в после скролла

Преимущества скрипта:

  • не надо высчитывать отступ сверху (скрипт сам его отсчитывает)
// --- affix top menu script ---
$(() => {
    let target = $('.nav-afix');
    let startPosition = target.offset().top;

    $(window).scroll(() => {
        if ($(window).scrollTop() > startPosition) {
            if (!target.hasClass()) {
                target.addClass('affix')
            };
        } else {
            target.removeClass('affix')
        };
    });
});

Gravatar image
zular
  • Репутация: 36
  • Сниппеты: 7
  • Ревизии: 0

Здравствуйте, столкнулся с задачей фиксации меню при скролле страницы, был найден скрипт на просторах интернета, который решил мою задачу. Я его немного изменил под свои нужды.

Зависимости:

  • Jquery

Классы:

  • .nav-afix - само меню
  • .affix - класс который добавляется в после скролла

Преимущества скрипта:

  • не надо высчитывать отступ сверху (скрипт сам его отсчитывает)
// --- affix top menu script ---
$(() => {
    let target = $('.nav-afix');
    let startPosition = target.offset().top;

    $(window).scroll(() => {
        if ($(window).scrollTop() >= startPosition) {
            if (!target.hasClass()) {
                target.addClass('affix')
            };
        } else {
            target.removeClass('affix')
        };
    });
});

Gravatar image
Александр Лис
  • Репутация: 1
  • Сниппеты: 0
  • Ревизии: 1

Нужно загрузить файл на сервер, без перезагрузки страницы? Видел много костылей на эту тему, вот вам простой вариант, который использую сам)

var form = new FormData(document.getElementById('идентификатор формы'));
$.ajax({
    url: "/upload.php",
    type: "POST",
    data: form,
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    success: function (data) {
        // здесь обработка ответа от сервер
    }
});
Gravatar image
finom
  • Репутация: 5
  • Сниппеты: 1
  • Ревизии: 0

Методы, которые были в балалайке, устарели. Теперь bala.js рулит.

Репозиторий Пост на Хабре

$=function(d,e,c,f,g){c=function(a,b){return new f(a,b)};f=function(a,b){e.push.apply(this,a?a.nodeType||a==window?[a]:""+a===a?/</.test(a)?((g=d.createElement(b||"q")).innerHTML=a,g.children):(b&&c(b)[0]||d).querySelectorAll(a):/f/.test(typeof a)?/c/.test(d.readyState)?a():d.addEventListener("DOMContentLoaded",a):a:e)};c.fn=f.prototype=e;c.one=function(a,b){return c(a,b)[0]||null};return c}(document,[]);