Все сниппеты с тэгом «jquery»
Раскрытие списков в Bootstrap 3
- Репутация: 71
- Сниппеты: 7
- Ревизии: 0
UPD: обновил сниппет, спасибо Great-Antique
Когда на странице в списках много элементов, то её нужно как-то скрывать. В проекте использовал такое решение:
- Репутация: 12
- Сниппеты: 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);
}
}
}
}
- Репутация: 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());
- Репутация: 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>
- Репутация: 17
- Сниппеты: 8
- Ревизии: 0
"Золотые" правила оптимизации фронтэнда часто рекомендуют подключать все JS скрипты в конце страницы.
Однако обычно нам строго необходимо подлючать <script src="//jquery.js"> в <head> страницы, и мы не можем его оттуда удалить, поскольку контент страницы может содержать onReady-обработчики, например $(function(){ ... }). Такие обработчики обычно вставляются автоматически сторонними виджетами, CMS, фреймворками.
Этот короткий скрипт позволяет переместить подключение jquery.js из <head> в конец <body> без изменения имеющихся onReady-обработчиков на странице.
- Репутация: 58
- Сниппеты: 9
- Ревизии: 2
Плавная сортировка вертикальных элементов.
Главной задачей было добиться максимальной быстрой скорости сортировки и отрисовки, без лишних действий. Данный плагин предназначен для узкого списка задач, по этому на супер функциональность в нём можете не рассчитывать.
Так же есть AssetBundle для Yii2 SmoothSortAsset
- Репутация: 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')
};
});
});
- Репутация: 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')
};
});
});
- Репутация: 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) {
// здесь обработка ответа от сервер
}
});
- Репутация: 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,[]);