Меню раздела "Документация"

CSS JavaScript PHP класс для обработки IP адресов Построение меню Пример рекурсивного меню

Библиотека JavaScript

Собрал наиболее часто используемые анимационные эффекты в библиотеку, она представляет из себя нечто вроде аналога / замены jQuery и прочих, без перекрытия методов и лишних заморочек (без конфликтов в случае подключения сторонних API). Постарался сделать её максимально простой для понимания и охватить все необходимые функции, чтоб была возможность быстро и сжато создавать любую дополнительную функциональность. Естественно всё кроссбраузеорно и работает без лагов и глюков, но древние браузеры типа IE8- в пролёте. (Статистика склоняется к 0,1% таких пользователей, полагаю это просто чьи-то древние боты так представляются..)

При всём обилии анимации, библиотека весит около 61 Кб! Для сравнения, очень популярная jquery-3.6.4.min.js = ~88 Кб! И зачастую, чтоб добавить анимацию, потребует подключить дополнительные js библиотеки, что ведёт к увеличению веса и запросов к серверу.

Функции:

* помечены обязательные параметры при передаче параметров в функции, остальные можно пропускать, будут взяты значения по умолчанию.. Служебные функции таким цветом.

anim - анимация

var to=100;
anim({
  t:100, //длительности анимации мс. По умолчанию ff.at = 300 мс (1000 мс = 1 сек).
  f:ff.aback, //функция времени, получает возрастающее число от 0 до 1.
  s: function(p) { //шаг анимации *
    o.style.left = to * p + 'px';
  },
  e: function() { //что-то сделать в конце?
  }
});
По окончании сбрасывает флаг ff.ap = 0; (animation play)
ссылка-якорь на функцию anim

дополнительные функции для анимации

По умолчанию swing

ff.aback - стрельба из лука

ff.abounce - отскок

ff.acirc - дуга

ff.aelastic - упругая анимация

ff.alinear - линейная

ff.aquad - в степени n (квадратичная)

ff.asquare - квадратный корень

ссылка-якорь на функции

touchr - перехват touch устройств (планшетов итп)

Заменяет вызовы, благодаря чему onclick и пр. начинает работать как touch события. Биндится/устанавливается на автомате..

ссылка-якорь на функцию touchr

var ff - переменные

Статические переменные:
var ff = {
  ap: 0,
  at: 300,
  fse: '',
  w: 'walk',
  walke: 'a,button,label,textarea,input,select,combobox'
ff.ap: 0, //animation play(ing), переключатель заполняемый вручную, если необходимо 
  отследить статус анимации и не допустить запуск следующей.
ff.at: 300, //Длительность анимации по умолчанию.
ff.fse: '', //Ключ шифрования.
ff.w: 'walk', //Класс для элементов, внутри которых разрешено искать элементы
  при навигации стрелками, используется в ff.alert(), ff.menu(), ff.mes(), ff.over()
ff.walke: 'a,button,label,textarea,input,select,combobox', //Элементы по которым разрешено
  перемещаться при навигации стрелками в формах см. ff.walk, ff.walkto.
Динамически занимаемые переменные:
ff.host:'', //fsen.ru
ff.path: '/', //путь от корня, для вызова скриптов, если сайт в подкаталоге.
ff.lang: '', //текущий язык страницы берётся из <html lang="ru">.
ff.ield: '', //Сохраняет id элемента при при проверке капчи.
ff.touch: 0, //Это touch устройство (планшет, смартфон итп.)
ff.now: 0, //performance.now() засекает время для организации задержки(timeout) при
  прокрутке страницы.
ff.fixi: 0, //Зафиксирован ли элемент при прокрутке(scroll) страницы.
ff.fixt: 0, //Timeout при прокрутке(scroll) страницы, разгружает браузер.
ff.i: 0, //Сохраняет номер элемента при пермещении ff.walkto.
ff.kd: null, //ff.bind - сохраняет window.onkeydown.
ff.ku: null, //ff.bind - сохраняет window.onkeyup.
ff.dtf: null, //Сохраняет event.dataTransfer.files при отправке форм с вложением.
ff.goup: null, //Кнопка наверх (к началу страницы).
ff.oa: null, //Элемент вплывающей подсказки ff.alert.
ff.oo: null, //Блок/подложка (div class="overb") используемый для вычисления 
  видимого размера окна ff.alert.
ff.ob: null, //Блок/подложка (div class="overb") накрывающий страницу с кнопкой закрытия, 
  при выводе анимации меню и прочих.
ff.ot: null, //Временно занимаемый элемент, используется при анимации 
  под всплывающий блок ff.over.
ff.oi: null, //Элемент tooltip об ошибке заполнения поля ff.mest.
ff.tapes: [],//Массив объектов Слайдера ленты (карусель с блоками внутри).
ff.slides: [], //Массив объектов Слайдера (карусели).
ссылка-якорь на переменные

ff.ac(e) - обрабатывает эффект аккордеона [accordion]

Служебная.
Метод активации и прочее смотрите в onload
ссылка-якорь на функцию ff.ac

ff.ae(n,f,e,с,r) - add/remove/EventListener

n - название события,
f - функция,
e - элемент или id(строка (через запятую если вешаем на нескольких сразу)) 
    1 = document, отсутсвие или 0  = window
с - useCapture = false или объект ({passive:!1})
r - удалить обработчик события = 0
 
Вешает слушателей на события
ff.ae('resize',function(){});//на window
ff.ae('resize',touchr,1);//на document
ff.ae('mousedown',function(){},obj,1);//на oбъект
ff.ae('mousedown',function(){},'myid',1);
ff.ae('mousedown',function(){},'myid,myid2',{passive:!1});//на oбъекты
ff.ae('mousedown',function(){},'myid,myid2',{passive:!1},1);//удалить
ff.ae('touchmove',drag.move,1,0,1);//удалить document
ссылка-якорь на функцию ff.ae

ff.alert(t,x,e,c,u,w) - всплывающая/выезжающая подсказка

t* - 'текст подсказки', ~ в начале - оставить элемент в position:fixed
x - анимация,
e - элемент к которому прилететь,
c - css класс элемента = 'alert',
u - длительности анимации мс. = 400, (1000 мс = 1 сек)
w - описывает кнопку закрытия уходящую на генератор создания элемента в ff.ce
x - анимация:
0 или отсутствие параметра = случайный прилёт/улёт подсказки с разных сторон..
-11 - плавно изменяет прозрачность без перемещения (эффект fade-in/out)
Держите в уме сетку направлений движения:
8 1 2
7 9 3
6 5 4
Если задать 3 - подсказка прилетит справа и улетит направо..
Если задать 4.8 - прилетит справа снизу, улетит наверх налево.
Если задать -4.8 - добавит эффект изменения прозрачности
e - элемент к которому прилететь, при этом появится галочка(пирамидка) под/над центром
  элемента (в зависимости от положения на странице).
Так же происходит установка клавиш управления ff.bindef
Примеры использования:
<button onclick="ff.alert('Подсказка')">Подсказка</button>
<button onclick="ff.alert('Подсказка',4.8)">Подсказка</button>
<button onclick="ff.alert('Подсказка',4.8,this)">Подсказка</button>
<button onclick="ff.alert('Подсказка',0,0,0,1000,0)">Подсказка</button>
 
Разместите css см. Всплывающая/выезжающая подсказка [ff.alert()]
ссылка-якорь на функцию ff.alert

ff.atr(e,n,v) - получить/установить атрибут

e - элемент или строка с id элемента
n - название свойства
v - значение, если указано атрибут устанавливается..
По умолчанию возвращает пустую строку, если не найден атрибут = ''
Если задать пустое значение - атрибут будет удалён.
var id, e=ff.byt(0,'div',0);
Получить:
id=ff.atr(e,'id');
Установить:
ff.atr(e,'id','fseid');
Удалить:
ff.atr(e,'id','');
ссылка-якорь на функцию ff.atr

ff.atrcut(s,a) - получить значение атрибута и вырезать его из строки

s - строка
a - название искомого атрибута
Возвращает массив [s:'исходная строка с вырезанным атрибутом', a:'значение атрибута']
s='<intut onkeyup="myfunc()">';
a=ff.atrcut(s,'onkeyup');
if(a.a!=''){//найдено значение, что-то делаем..
  a.a+=';myfunc2()';
  s=s.s;//заменяем поданную строку на отчищенную от атрибута
}
ссылка-якорь на функцию ff.atrcut

ff.b(o1,o2,..) - установить элементам style.display='block'

Параметрами передаётся элемент или строка с id элемента
ff.b('id');
ff.b('id1','id2');
ff.b(obj1,obj2);
ссылка-якорь на функцию ff.b

ff.bind(f,u) - устанавливает window.onkeydown/onkeyup

Функция запоминает предыдущее состояние и возвращает к нему повторным
  вызовом без параметров
ff.bind(function(e){}); //onkeydown
ff.bind(); //вернуть (unbind)
ff.bind(function(e){ //onkeydown
  e=e||window.event;
  var k=e.keyCode;
  if(k==13)...
});
ff.bind(); //вернуть (unbind)
ff.bind(function(e){ //onkeyup
  e=e||window.event;
  var k=e.keyCode;
  if(k==13)...
},1);
ff.bind(0,1); //вернуть (unbind)
ссылка-якорь на функцию ff.bind

ff.bindef(e,f) - действия для клавиш по умолчанию

Устанавливает действия на клавиши по умолчанию для всплывающих "окон":
  ff.alert, ff.mes, ff.over.
e - event
f - функция закрытия на клавишу Esc
Функция гуляет только по разрешённым элементам из
ff.walke = 'a,button,label,textarea,input,select'
По умолчанию:
esc (код клавиши: 27) - переданная функция f();
space (пробел, код: 32) - нажать если не текстовое поле (input 'text,password,hidden', 'textarea');
[ctrl + `(коды: 192, 0) или up(стрелка ввверх, код: 38)] - перейти к предыдущему элементу или 
к последнему..
[tab или down(стрелка вниз) (коды: 9, 40)] - к следующему элементу или к первому..
Функция служебная и работает в паре:
ff.bind(function(k){ff.bindef(k,f)});
Если есть необходимость при вёрстке уложить в контейнеры, для того чтоб позиционировать
группы меню при разном расширении, добавьте класс walk элементу в который сложены 
ссылки, скрипт в зависимости от направления попытается перейти в следующий блок
и установить фокус на ссылке, кнопке итп..
ссылка-якорь на функцию ff.bindef

ff.by(i,e,t,n) - берёт элементы по названию тега или класса

Служебная функция для ff.byc и ff.byt
i - переключатель 1 - ByTagName, 0 - ByClassName
e - родительский элемент или строка с id элемента, если не указан берётся document
t - название тега или класса
n - индекс элемента (0 - первый, -1 - последний),
  если не указан возвращается массив всех найденных.
ссылка-якорь на функцию ff.by

ff.byc(e,t,n) - берёт элементы по названию класса

e - родительский элемент или строка с id элемента, если не указан берётся document
t - название класса
n - индекс элемента (0 - первый, -1 - последний),
  если не указан возвращается массив всех найденных.
o=ff.byc(p,'class',0);
Проход по всем элементам:
var i,e=ff.byc(0,'iframe'),l=e.length;
for(i=0;i<l;i++)iframe(e[i],ff.atr(e[i],'name'));
ссылка-якорь на функцию ff.byc

ff.byt(e,t,n) - берёт элементы по названию тега

e - родительский элемент или строка с id элемента, если не указан берётся document
t - название тега
n - индекс элемента (0 - первый, -1 - последний),
  если не указан возвращается массив всех найденных.
i=ff.byt(p,'i',0);
Проход по всем элементам:
var i,e=ff.byt(0,'iframe'),l=e.length;
for(i=0;i<l;i++)iframe(e[i],ff.atr(e[i],'name'));
ссылка-якорь на функцию ff.byt

ff.c(n,v,e) - установка cookie

n - название
v - значение
e - время жизни сек.(месяц по умолчанию)
Получить:
v=ff.c('name');
Установить:
ff.c('name','value');//на месяц
ff.c('name','value',3600);//на час
Удалить:
ff.c('name','');
ссылка-якорь на функцию ff.c

ff.ca(e,v,w) - добавить (удалить, перевернуть) класс

e - элемент или строка с id через запятую
v - строка с названиями классов через запятую, будут добавлены все к каждому элементу.
w - что делать функции:
1 - добавить (по умолчанию)
2 - перевернуть (toggle);
любое другое - удалить
Добавить:
ff.ca(e,v);
ff.ca('id1,id2','myclass');
Перевернуть:
ff.ca(e,v,2);
Удалить:
ff.ca(e,v,3);
ссылка-якорь на функцию ff.ca

ff.cc(e,v) - задан ли класс у элемента

e - элемент или строка с id
v - значение
if(ff.cc(e,'on')){}
if(ff.cc('id','on')){}
ссылка-якорь на функцию ff.cc

ff.ce({}) - создать элемент

Функция принимает объект свойств:
Все параметры необязательные.
n - название создаваемого тега, по умолчанию div
p - элемент в который вставить (парент)
с - класс создаваемого элемента (className)
l - всплывающая подсказка (title)
f - функция на onclick элемента
a - вставить элемент после указанного в p
i - вставить элемент на первое место внутри элемента указанного в p или в body
По умолчанию элементы добавляются в конец родительского элемента p или в body
t - текст который будет вставлен в .value или .innerHTML
Можно прервать вставку текста если указать t = '`'
Например создать и вставить кнопку, за счёт внутреннего добавочного механизма..
o = ff.ce({p:e,n:'button',c:'fbn',l:ff.l('close')+' [Esc]',f:f,t:'`'});
Вставка элемента пойдёт через appendChild итп..
е - заменть элемент или создать
ff.ob = ff.ce({e:ff.ob,c:'overb',f:f});
Таким образом можно переназначать свойства..
Если передан style, будет вставка CSS стилей, а не создание элемента.
ff.ce({n:'style',t:'.myclass{margin:0 auto}.myclass2{margin:19px 2%}'});
Добавочный механизм создания кнопки:
Вставляет кнопку до текста t (служебный, для создания кнопок с отличными
от основного блока набором свойств..)
o = ff.ce({f:function(){},b:'fbn fbx`'+ff.l('close')+' [Esc]`ff.alert(\'\','+x+')'});
Подаётся строкой через разделитель `, функция создаёт кнопку button:
0 - class=
1 - title=
2 - onclick=
3 - текст кнопки
Все параметры необязательные.
Примеры:
o = ff.ce({}); //создаст div в body
o = ff.ce({c:'fbt',p:fbw}); //создаст div с классом fbt в элементе fbw
o = ff.ce({c:'fbpl',f:function(){fb.prev()},
  t:'<button class="fbn fby" title=" '+ff.l('prev')+' [Backspace, Left] "></button>'});
ссылка-якорь на функцию ff.ce

ff.copy(o,e,v,c,t) - скопировать в буфер обмена (Clipboard)

o - элемент или строка с id от куда брать текст
    (подразумевается что это textarea или input)
//остальные параметры необязательны
e - элемент или строка с id куда вставить текст v
v - текст вставляемый при копировании для оповещения о событии
c - отчистить текст см. ff.copytext(v,c)
е - задержка перед возвратом предыдущего текста (3000 мс по умолчанию) 
Примеры:
<textarea id="buts" rows="1" cols="1" onfocus="this.select()" readonly>text for copy to clipboard</textarea>
<button onclick="ff.copy('buts',this,'Copyed')">Copy</button>
<pre>
text for copy to clipboard
</pre>
<button onclick="ff.copy(ff.prev(this, 'pre', 1), this, (ff.lang == 'ru' ? 'Скопировано': 'Copied'), 2)">Copy</button>
ссылка-якорь на функцию ff.copy

ff.copytext(v,c) - скопировать текст в буфер обмена (Clipboard)

v - копируемый текст.
c - отчистить текст 
 0 по умолчанию - отключено
 1 - пробелов в начале и конце, двойных пробелов
 2 - 1 + удаляет переносы строки и заменяет &amp; на & | &lt; и &#60; на < | &gt; и &#62; на >
 3 - 1 + 2 + вырезает теги
 4 - 1 + 2 + 3 но не удалять переносы строк
 5 - заменяет &amp; на & | &lt; и &#60; на < | &gt; и &#62; на >
ссылка-якорь на функцию ff.copytext

ff.cr(e,v) - удалить класс

e - элемент или строка с id через запятую
v - строка с названиями классов через запятую, будут удалены все у каждого элемента.
Примеры:
ff.cr(e,'class1');
ff.cr('id1,id2','class1,class2,class3');
ссылка-якорь на функцию ff.cr

ff.ct(e,v) - перевернуть класс

e - элемент или строка с id через запятую
v - строка с названиями классов через запятую, будут перевёрнуты все у каждого элемента.
Примеры:
ff.ct(e,'class1');
ff.ct('id1,id2','class1,class2,class3');
ссылка-якорь на функцию ff.ct

ff.css(n,p,v,b) - изменить свойство в css

n - название селектора класса итп '.sr-only'
p - название свойства 'width'
v - задаваемое значение '100px'
b - остановиться (break) после первого найденного правила (1 по умолчанию)
Пример:
ff.css('.overb','backgroundColor','rgba(255,0,0,.7)');
Для данного действия есть вспомогашка:
ff.overb('rgba(255,0,0,.7)');
ссылка-якорь на функцию ff.css

ff.d(e,v) - получить/установить style.display

e - элемент или строка с id через запятую
v - значение:
none, block, inline-block, inline, list-item, run-in,
table, table-row, table-cell, inline-table, table-caption
table-column-group, table-column, table-header-group, table-footer-group, table-row-group
ff.d(e,'block');
ff.d('id1,id2','block');
ссылка-якорь на функцию ff.d

ff.del(e) - удалить элемент

e - элемент или строка с id
ссылка-якорь на функцию ff.del

ff.dirname(p,l) - Возвращает имя родительского каталога

p - путь (path)
l - уровень (levels) = 1
Функция ведёт себя подобно PHP-шной.
console.log(ff.dirname('\\etc\passwd')); //= .
console.log(ff.dirname('/etc/passwd/word/')); //= /etc/passwd
console.log(ff.dirname('/etc/passwd/word/in.php')); //= /etc/passwd/word
console.log(ff.dirname('/etc/')); //= /
console.log(ff.dirname('.')); //= .
console.log(ff.dirname('/usr/local/lib',2)); //= /usr
ссылка-якорь на функцию ff.dirname

ff.e(s,n) - экранировка запроса POST

s - строка
n - не шифровать (если не передан - шифрует)
ссылка-якорь на функцию ff.e

ff.fade(i,e,f,to,t) - плавно изменяет прозрачность

i* - направление: 1 - увеличивает, 0 - уменьшает прозрачность
e* - элемент или строка с id через запятую
f - выполнить функцию по окончании анимации
to - конечное значение прозрачности 0.7 итп
t - длительности анимации мс. (1000 мс = 1 сек)
Примеры:
ff.op(e,0); //установить прозрачность
ff.fade(1,e);
ff.fade(1,'id1,id2');
ff.fade(1,e,0,0.7,200);
ff.fade(0,e,function(){ff.n(e)},0,240);
ff.fade(1,e,function(){ff.ap=0;ff.fade(0,e,0,0,200)},1,200);
ff.fade(1,e,function(){setTimeout(function(){ff.fade(0,e,0,0,200)},200)},1,200);
ссылка-якорь на функцию ff.fade

ff.fieldok(i,n,g,r) - подсвечивает поле зелёным или красным

Служебная, используется при проверке поля капчи (Введите код) в формах.
i* - результат 1 всё в порядке - зелёным, 0 - красным
n* - строка, функция возьмёт элемент по id или первый элемент по классу,
если параметр не передан, подразумевается что элемент сохранён в переменной ff.ield*
и будет взят из неё.
g - свой цвет зелёного, по умолчанию #090
r - свой цвет красного, по умолчанию #f00
ссылка-якорь на функцию ff.fieldok

ff.fix(e,i) - переворачивает position

Служебная, переворачивает position с fixed на absolute и наоборот,
оставляя элемент в том же положении на экране.
Это необходимо на случай, если элемент не помещается на экране.
Этим решена проблема с растягивающимися полосами прокрутки при анимации.
Из-за этого решения IE8- в пролёте.. 0,1% пользователей.
e - элемент
i - переключатель: 1 - fixed, 0 - absolute
ff.fix(e);//fixed
ff.fix(e,0);//absolute
ссылка-якорь на функцию ff.fix

ff.float(v,n) - возвращает float число или строку

v - значение, будет преобразовано в строку и проведены операции преобразования..
n - количество цифр(от 0 до 20) после десятичного знака ("запятой").
ff.float(' 123,456 руб'); //123.456
ff.float(' 123,456 руб',2); //123.45
ссылка-якорь на функцию ff.float

ff.g(e) - берёт элемент по id

Если подан элемент возвращает его.
ссылка-якорь на функцию ff.g

ff.gc(p,n) - берёт элемент по id или классу

Вернёт элемент по id или первый элемент по классу.
p - парент (родитель) внутри которого искать элемент, по умолчанию document
n - строка, название id или класса
e=ff.gc(0,'myid');
e=ff.gc(0,'myclass');
ссылка-якорь на функцию ff.gc

ff.get(n,s) - аналог PHP $_GET

n - название искомой перменной
s - сортировать результат, по умолчанию выключено = 0
Ищет в адресе(?r=15&k=16) ключ n, если его нет или он пустой - вернёт null
if(ff.is(ff.get('r')))alert(ff.get('r'));
или
var r=ff.get('t');
if(ff.is(r))alert(r);
Без параметра n - возвращает массив ключ значение - g=ff.get();
Отсортировать результат - g=ff.get(null,1);
g=ff.get(null,1);
for(e of g)console.log(e[0] + ' ' + e[1]);
for([key, value] of g)console.log(key + ' ' + value);
ссылка-якорь на функцию ff.get

ff.go(v,w,s) - устанавливает URL окна

v - адрес
w - открыть в новом окне (window.open или переход по window.location)
s - 1: добавить перед значением https://; 2: http://
ff.go('#ff.go');
ff.go('//fsen.ru/docs/js#ff.go');
ff.go('fsen.ru/docs/js#ff.go',1,1);
ссылка-якорь на функцию ff.go

ff.ia(f,a) - есть ли значение в массиве

f - значение которое следует найти
a - массив
Функция булевая - возвращает true, false
if(ff.ia(f,[9,27])){}
ссылка-якорь на функцию ff.ia

ff.init({},{},..) - инициирует объект ff и анимации

Здесь происходит начальная подготовка, задаются переменные ff.path, ff.lang итд.
Проверяется и биндится Touch устройство.
Предобрабатываются анимации, которые устанавливаются в onload
ссылка-якорь на функцию ff.init

ff.int(v) - возвращает int число

v - значение
ссылка-якорь на функцию ff.int

ff.is() - определяет, установлена ли переменная

Булевая, может принимать несколько переменных. (аналог php isset)
Особенно полезна в случае прихода в функцию переменной = 0..
if(ff.is(fl[l],fl[l][n])){}
ссылка-якорь на функцию ff.is

ff.isf(v) - является ли переменная числом с плавающей запятой (float)

Булевая - возвращает true, false
if(ff.isf('1.43')){}
ссылка-якорь на функцию ff.isf

ff.isi(v) - является ли переменная целым числом (integer)

Булевая - возвращает true, false
if(ff.isi('143')){}
ссылка-якорь на функцию ff.isi

ff.ish(e) - скрыт ли элемент

Булевая - возвращает true, false
e - элемент
Проверяет visibility==hidden или вычисляет размеры объекта,
при display=none элемент не отображается и его размеры = 0
ссылка-якорь на функцию ff.ish

ff.ismail(v) - проверяет email

Булевая - возвращает true, false
v - строка
ссылка-якорь на функцию ff.ismail

ff.ist(e) - текстовое ли поле

Булевая - возвращает true, false
e - элемент
текстовое поле: textarea,
input type="text,password,hidden"
ссылка-якорь на функцию ff.ist

ff.kd(e,k,f) - проверить нажатие клавиш

e - event
k - код клавиши
f - функция которую вызвать в случае успеха
function find(){...}
ff.g('findtxt').onkeyup=function(event){ff.kd(event,13,find)}
<input type="text" onkeyup="ff.kd(event,13,find)" value="">
<input type="text" onkeyup="ff.kd(event,13,function(){ff.g('idbutton').click()})" value="">
ссылка-якорь на функцию ff.kd

ff.key(p,e) - сгенерировать капчу

Служебная, посылает запрос на сервер, результатом является картинка(капча)
p - объект в котором искать элемент по умолчанию 0=document
e - элемент в который вывести, будет взят по id или первый по классу..
<div class="keyo"></div>
ff.key(0,'keyo');
<a href="/" onclick="return ff.key(0,'keyo')">показать другую</a>
ссылка-якорь на функцию ff.key

ff.kis(p,n,o) - верно ли введена капча

p - элемент в котором искать поле ввода и элемент в который отдаёт результат AJAX
Оба будут взяты по id или первый по классу.
По умолчанию 0=document
n - класс или id поля ввода капчи
o - элемент для результата AJAX
<div class="keyot"></div>
<input type="text" class="key" onkeyup="ff.kis(ff.ot,'key','keyot')" value="">
Сервер вернёт ответ в ff.fieldok
ссылка-якорь на функцию ff.kis

ff.l(n,l) - возвращает значение из языкового пакета

n* - название (ключ в массивах fl - fl['ru'][n] итд)
l - язык (по умолчанию берётся язык страницы - ff.lang)
Если не обнаружит - вернёт переданное название n
alert(ff.l('next'));
alert(ff.l('next'),'en');
ссылка-якорь на функцию ff.l

ff.lim(e,l) - ограничить поле ввода

e - элемент
l - максимальное количество букв, не обязательный, задаётся равным длине строки, 
    чтоб ей можно было пользоваться для очистки полей без обрезания..
Функция так же удаляет вредные символы '`<>, пробелы в начале и двойные пробелы.
<textarea onkeyup="ff.lim(this,100)" rows="1" cols="1"></textarea>
ссылка-якорь на функцию ff.lim

ff.lis(s) - вернуть язык ввода

Функция задумана для определения языка ввода в полe пароля.
Удаляет все символы кроме букв и пытается определить язык по последней.
s - текст
В данный момент умеет определять только русский и английский языки 'ru','en'.
Если не сможет определить - вернёт пустую строку.
<textarea onkeyup="document.title=ff.lis(this.value)" rows="1" cols="1"></textarea>
ссылка-якорь на функцию ff.lis

ff.mask(e,m) - телефон согласно маски

s - элемент
m - маска, по умолчанию '+7 (___) ___-__-__'
|t~onfocus=``ff.mask(this)`` onkeyup=``ff.mask(this)``^Телефон *^+7 (___) ___-__-__|
<input type="text" value="" placeholder="Номер телефона" onfocus="ff.mask(this)" onkeyup="ff.mask(this)" onchange="...">
ссылка-якорь на функцию ff.mask

ff.menu(x,u,e,t,v) - всплывающее/выезжающее меню

Вызов ff.menu связан с фокусом (можно обойти через u=2), вызывайте с кнопок, 
ссылок или иных активных элементов (не считая вызова с клавиатуры).
Если есть необходимость при вёрстке уложить в контейнеры, для того чтоб 
позиционировать группы меню при разном расширении, добавьте класс walk 
элементу в который уложены ссылки, скрипт в зависимости от направления 
попытается перейти в следующий блок и установить фокус на ссылке, 
кнопке итп..
x - анимация:
0 - случайный прилёт/улёт меню с разных сторон
10 - в зависимости от позиции элемента вызвавшего (кнопка правее центра)
  прилёт меню слева или справа..
-11 - плавно изменяет прозрачность без перемещения (эффект fade-in/out)
Держите в уме сетку направлений движения:
8 1 2
7 9 3
6 5 4
Если задать 3 - меню прилетит справа и улетит направо..
Если задать 4.8 - прилетит справа снизу, улетит наверх налево.
Если задать -4.8 - добавит эффект изменения прозрачности
u - прилипать к краям слева-справа и при направлениях 1, 5 к верху/низу
  1 - прилипать с учётом точки вызова (элемент правее или левее, туда и прилетит)
  2 - прилипать без учёта точки вызова (например чтоб сделать выезжающий блок, попап.)
  отрицательное число -1, -2, -3(не прилипать) - оставить элемент в position:fixed
e - элемент - меню или 'id', по умолчанию берётся первый <nav>
t - длительности анимации = 400 мс.  (1000 мс = 1 сек)
    -400 (минус) отменяет установку фокуса на первую ссылку во время появления.
v - добавлять отступ сверху (и переустанавливать отстпы сверху и слева после анимации) 
  в случае растягивания блока за счёт абсолютной/фиксированной позиции:
  position:absolute;margin:auto;left:20px;right:20px;top:20px;bottom:20px; 
  (блок растянут на весь экран с отступами)
Если меню вмещается будет выведено под кнопкой его вызывающей,
если не вмещается по уровню кнопки и если и тут не вместилось то верха экрана.
Ещё скрипт пытается найти первый button и подвешивает на него функцию закрытия
или создаёт кнопку и добавляет её внутрь переданного элемента e ('id'). class=fbn
В onclick можете добавить свои действия, выполнятся после анимацией скрытия,
если потребуется выполнить до - добавьте кнопке класс jsbefore.
Чтоб она ездила вместе с блоком перебейте свойство - 
.myblock .fbn{position: absolute !important}
или
.myblock .fbn{width:40px;height:40px;top:8px !important;right:5px !important;
position:absolute !important;z-index:3;opacity:1 !important;box-shadow:none !important;}
Так же происходит установка клавиш управления ff.bindef
<nav><span>Меню</span><?php menu('top')?></nav>
<button onclick="ff.menu()">меню</button>
Разместите css см. Меню (...) [ff.menu()]
ссылка-якорь на функцию ff.menu

ff.mes(z,t,u,c,e,g) - всплывающая/выезжающая форма для обратной связи

z - mesid - id формы для обработки на стороне сервера,
  используйте 1525605447, в будущем будет генератор в ПУ сайта.
t - строка описывающая поля через разделитель | внутри разделитель ^
* - обязательное поле для заполнения пользователем (required)
** - обязательно одно из помеченных так полей (или или)
`` заменятся на "
` заменятся на '
Синтаксис: ^тег^значение (вкладывает значение внутрь тега..)
^^произвольный html код
u - URL по которому отправить запрос, по умолчанию inc/form.php
c - название класса, который добавить всплывшему блоку, по умолчанию mes
e - текст ошибки, по умолчанию из языкового пакета берётся:
    f.l('fill') - Заполните обязательное поле
g - id или класс элемента на который поставить фокус (по умолчанию - на 1 элемент)
Проще на примере всех возможных свойств показать:
ff.mes(1525605447,'

$| //оставить блок в позиции fixed после анимации появления
$0| //установить top в 0 (или 20px...)
x| //вложить кнопку закрытия внутрь блока class="fbn fbx"
x^myclass^Закрыть [Esc]| //заменить class и title на свои
Чтоб кнопка ездила вместе с наполнением .mes .fbn{position:absolute}
^h2^Написать сообщение| //преобразует в <h2>Написать сообщение</h2>
!| //для выхлопа AJAX (<div class="mout"></div>)
n^Представьтесь *^myplaceholder| //поле имени и placeholder
добавляет полю class="fname"
в принимающем скрипте $name (для вставки в заголовок письма например)
t^Телефон *| //поле телефона - приведёт к международному формату
ru 0 (000) 000-00-00; ua 000 (00) 000-00-00; en 0 (000) 0000-00-00;
добавляет полю class="fphone"
в принимающем скрипте $phone
Сообщение *| == a^Сообщение *| //текстовое поле textarea
//добавим своё значение и произвольную строку
Сообщение *==myvalue~onclick=``alert(`txt`)``
i^Имя пользователя *| //текстовое поле input=text
i~id=``user`` name=``user`` onkeyup=``ff.lim(this);ff.kd(event,13,function(){ff.g(\`mysend\`).click()})``^Имя пользователя *'
//добавить в создаваемый тег произвольную строку
Представьтесь *~name=`forPOST` onclick=``alert(`txt`)``|
t~onclick=``alert(`txt`)``^Телефон|
//Имейте ввиду, встречающий скрипт form.php проигнорирует переданное
зашифрованное поле с произвольным name=, необходимо самостоятельно
встречать в скрипте $forpost=aPOST('forPOST',1); (см. /deny/func.php)

//пример одного и того же:
^^<button title=`txt` onclick=``alert(`txt`)``><i class=`name`>t</i></button>|
==
~title=`txt` onclick=``alert(`txt`)``^button^<i class=`name`>t</i>|
%^E-mail или телефон *| //поле с проверкой ввода - email или телефон
добавляет полю class="fmailp"
@^E-mail *| //поле с проверкой ввода - email
добавляет полю class="fmail"
*^Пароль *| //указание вывести input type="password"

Следом можно указать:
^kbd| //запустит механизм распознавания языка ввода
и выведет в соответствующий тег, см. css .mes .fpass+kbd
размещать следует сразу после поля из-за css (можно и по другому сделать).
Можно указывать следом за любым элементом.

~role=`button` title=`Показать пароль` onclick=``ff.mesp(this,`fa fa-eye`,`Показать пароль`,`fa fa-eye-slash`,`Скрыть пароль`)``^var^<i class=`fa fa-eye`></i>|
//Найдёт предыдущий input и сменит тип, тем самым показав пароль за звёздочками
в виде текста, см. css .mes var
h^Скрытое поле^myid~value|
или
h~name=``myname``^txt^myid~value|
//для внешней вставки данных напимер..
myid - для обращения к полю по id (под этим же именем придёт в post)
value - значение
Я даю 2 секунды на анимацию, перед тем как вставить данные в всплывшую форму.
h^Название
h^Название^myid
h^Название^~value
c^Флажок checkbox^myid~value|
или
c~name=``myname``^Флажок checkbox^myid~value|
myid - для обращения к полю по id (под этим же именем придёт в post)
value - значение
c^Название
c^Название^myid
c^Название^~value
c~onchange=``this.value=this.checked?1:0``^Подписаться на новости^~0
добавляет для label class="fcbox"
s^Язык^ru~ru_Русский~en_Английский| //выпадающий список(select)
Строим элемент select^ //s~onchange=``ff.sc(`on`,this.value)``^
Текст заголовка label^
ключ(value) сравнения для выбора пункта как selected~
option~option~option~option~option..
может быть в формате только значение(value), оно подставится и в текст
или ~ru_Русский == значение(value) _ текст option
f^Приложить файлы^Загрузить| //input type="file" multiple (скрытый),
по умолчанию кнопка Обзор... или указанное ^Загрузить
выводит список выбранных файлов..
d^Приложить файлы^Перетащите файлы или нажмите^загрузить|
Поле загрузки файла с возможностью Drag-and-drop,
т.е. забросить файлы в поле из директории или нажать кнопку для стандартного диалога.
По умолчанию кнопка Обзор... или указанное ^загрузить
#^Введите код *^^Показать другой| //капча, последнее значение ссылки..
b^отправить| //кнопка для отсылки формы - ff.mesend

//Можно добавить своё событие до отсылки формы
|*~id=``myid`` onkeyup=``ff.kd(event,13,function(){ff.g(\`mysend\`).click()})``^txt *|^kbd|
|b~onclick=``my()`` id=``mysend``^txt|
^small^Нажимая на кнопку «Отправить», даю согласие на
<a href=`!privacy` target=`_blank`>обработку персональных данных</a>.
//восклицательный знак перед ссылкой означает добавить текущий путь ff.path
(/ или https://fsen.ru/sitefolder/ т.е. если сайт в подкаталоге)

','inc/form','mes','Заполните обязательное поле');
Анимация появления будет случайной.. Передаваемые данные шифруются..
Я постарался максимально затруднить жизнь спамерам..
Так же происходит установка клавиш управления ff.bindef
Разместите css см. Всплывающая/выезжающая форма...[ff.mes()]
Ещё примеры:
ff.mes(1525605447,'^h2^Напишите нам|!|Имя *|@^E-mail|Сообщение *|b^отправить');
echo '`|eval`|ff.mes(1,\'^h2^Заголовок|!|Сообщение *==myval~onclick=``alert(\`txt\`)``\',\'login\')';
Если необходимо создать форму на странице и отослать через этот же механизм:
<div class="mes">
  <h2>Написать сообщение</h2><div class="mout"></div>
  <label for="fse10">Представьтесь *</label><textarea id="fse10" class="fname" rows="1" cols="1" autocomplete="off" required></textarea>
  <label for="fse11">E-mail *</label><textarea id="fse11" class="fmail" rows="1" cols="1" autocomplete="off" required></textarea>
  <label for="fse12">Телефон *</label><textarea id="fse12" class="fphone" rows="1" cols="1" autocomplete="off" required></textarea>
  <label for="fse13">E-mail или телефон *</label><textarea id="fse13" class="fmailp" rows="1" cols="1" autocomplete="off" required></textarea>
  <label for="fse14">Сообщение *</label><textarea id="fse14" rows="1" cols="1" autocomplete="off" required></textarea>
  <code class="skip fsehdn" tabindex="-1"><i>Скрытое поле</i><textarea rows="1" cols="1" id="myid"></textarea></code>
  <label class="ffile" for="fse15"><span>Приложить файлы</span><i></i>
    <button type="button" id="fse15" onclick="ff.byt(this.parentNode,'input',0).click()">Обзор...</button>
    <input type="file" onchange="ff.mesf(this)" multiple>
  </label>
  //или Drag-and-drop
  <label class="ffile fdrop" for="fse15"><span>Приложить файлы</span><i>Перетащите файлы или нажмите</i>
    <button type="button" id="fse15" onclick="ff.byt(this.parentNode,'input',0).click()">загрузить</button>
    <input type="file" onchange="ff.mesf(this)" multiple>
  </label>
  <label for="fse16">Введите код *</label><input id="fse16" class="key2" type="text" name="key" onkeyup="ff.kis(this.parentNode,'key2','mout')" value="" required><br>
  <code class="keyo"><img src="//fsen.ru/inc/key.php" alt="" style="width:110px;height:50px"></code>
  <a href="/" onclick="return ff.key(this.parentNode,'keyo')">Показать другой</a>
  <label for="fse17">Язык</label>
  <select onchange="ff.sc('lang',this.value)" id="fse17">
    <option value="ru" selected>Русский</option>
    <option value="en">Английский</option>
  </select>
  <label for="fse18">Пароль</label>
  <input type="password" value="" id="fse18" class="fpass" onkeyup="ff.v(ff.next(this,'kbd',1),ff.lis(this.value))">
  <kbd></kbd>
  <var role="button" tabindex="-1" title="Показать символы за звёздочками" onclick="ff.mesp(this,'fa fa-eye','Показать символы за звёздочками','fa fa-eye-slash','Скрыть символы')"><i class="fa fa-eye"></i></var>
  <label for="fse19" class="fcbox">Подписаться на новости</label>
  <input type="checkbox" value="0" onchange="this.value=this.checked?1:0" id="fse19">
  <button onclick="ff.mesend(this.parentNode,'mout')">отправить</button>
  <small>Нажимая на кнопку «Отправить», даю согласие на <a href="/privacy" target="_blank">обработку персональных данных</a>.</small>
  <code class="skip" tabindex="-1">
    <input class="lang" value="ru" type="text">
    <input class="mesid" value="1525605447" type="text">
    <input class="email" name="email" value="" type="text">
    <input class="time" value="1525967052" type="hidden">
    <input class="php" value="inc/form" type="text">
    <!-- <input class="err" value="Своё сообщение об ошибке заполнения" type="text"> -->
  </code>
</div>
Естественно, удалите лишие поля..
Содержимое <code class="skip" tabindex="-1"> не трогать, исключая lang и mesid..
ссылка-якорь на функцию ff.mes

ff.mesend(p,o) - отправляет форму на сервер

p - элемент или 'id' или 'класс' - в котом искать элементы
o - элемент для результата AJAX (берётся по классу или id)
Функция автоматически собирает данные упаковывает в FormData, шифрует и
пересылает по указанному пути..
ссылка-якорь на функцию ff.mesend

ff.mesf(e) - выводит список файлов input file

Служебная для ff.mes, выводит список файлов при выборе файлов в тег i рядом с e
e - элемент input type="file
ссылка-якорь на функцию ff.mesf

ff.mesp(e,a,b,c,d) - переключает тип поля input

Служебная для ff.mes для кнопки показать/скрыть пароль.
Заменяет у вложенного элемента i className с "a" на "c",
ищет предыдущий input и меняет тип type="password" на type="text"
e - текущий элемент (см. ff.mes - *^Пароль *|)
a - className первого состояния password
b - всплывающая подсказка (title - Показать символы за звёздочками)
c - className второго состояния text
d - всплывающая подсказка (title - Скрыть символы)
ссылка-якорь на функцию ff.mesp

ff.mest(t,e,p) - выводит сообщение(tooltip) об ошибке заполнения поля

Служебная для ff.mesend.
t - элемент или id (textarea,input,select)
e - своё сообщение об ошибке или
  попытается взять из формы по input class="err" или
  из языкового пакета  fill: 'Заполните обязательное поле'.
p - родительский элемент блока формы для поиска ошибки по class="err"
  по умолчанию родительский t.parentNode
Запуск без параметров удаляет предыдущее сообщение.
ff.mest()
ff.mest(ff.g('myid'))
ff.mest(ff.g('myid'),'myerr')
ff.mest(ff.g('myid'),0,parent)
ссылка-якорь на функцию ff.mest

ff.move(e,f,t,nt,bt,nl,bl) - переместить элемент

Функция задумана для перемещения блока с меню, выезда из под другого меню итп..
e - элемент или 'id' или первый по 'классу'..
f - функция анимации
t - длительности анимации = 400 мс.  (1000 мс = 1 сек)
Координаты в пикселях (px):
nt - сверху (y - top) при движении вперёд (первое нажатие)
bt - сверху (y - top) при движении назад (второе нажатие)
nl - слева (x- left) при движении вперёд (первое нажатие)
bl - слева (x- left) при движении назад (второе нажатие)
Могут быть отрицательными для движения назад..
Примеры:
.moveme{position:fixed;z-index:1;height:100px;top:-100px;left:0;right:0;
background-color:#ff0;box-shadow:0 3px 3px -3px rgba(0,0,0,.5)}
<div class="moveme">...</div>
Переместить вниз, вторым нажатием вверх, на 300 пикселей:
<button onclick="ff.move('moveme',0,0,300)">move1</button>
Переместить вниз, вторым нажатием вверх, с анимацией "стрельбы из лука"
с длительностью анимации 700 мс на 300 px:
<button onclick="ff.move('moveme',ff.aback,700,300)">move2 ff.back</button>
Переместить вниз на 300 px, вторым нажатием вверх на 100 px:
<button onclick="ff.move('moveme',0,0,300,-100)">move3</button>
Переместить вниз на 300 px, вторым нажатием вниз на 100 px:
<button onclick="ff.move('moveme',0,0,300,100)">move4</button>
Движение по горизонтали, аналогично..
ссылка-якорь на функцию ff.move

ff.n(o1,o2,..) - установить элементам style.display='none'

Параметрами передаётся элемент или строка с id элемента
ff.n('id');
ff.n('id1','id2');
ff.n(obj1,obj2);
ссылка-якорь на функцию ff.n

ff.next(e,n,c) - получить следующий элемент

e - элемент
n - название тега или '' чтоб взять следующий (необязателен)
c - зациклить до встречи первого совпадения, по умолчанию 0
  (поиск соседнего элемента с требованием совпадать по тегу)
Вернёт false если не найден
d=ff.next(e,'div');
или
d=ff.next(e,'div,p,ul');
ссылка-якорь на функцию ff.next

ff.nf(v,x,d,s) - формат числа

v* - значение
x - знаков после запятой (по умолчанию 2)
d - дробная часть разделяется через точку '.' по умолчанию
s - разделитель тысяч (по умолчанию пробел)
Вернёт строку, числа разбиваются по 3 знака
ссылка-якорь на функцию ff.nf

ff.nn(e,v) - совпадает ли nodeName

Булевая - возвращает true, false
e - элемент
v - значения через запятую, если передана пустая строка '' или
  не передана вернёт true (для обеспечения внутренней функциональности).
if(ff.nn(e,'div')){}
if(ff.nn(e,'nav,div')){}
ссылка-якорь на функцию ff.nn

ff.onload(f) - бинд на onload окна

Задаёт функцию срабатывающую по окончанию загрузки страницы.
Задана в конце скрипта, добавляйте туда если что-то ещё необходимо.
Если onload уже задан, выполнит сначала себя, потом заданную функцию.
ff.onload(function(){});
ссылка-якорь на функцию ff.onload

ff.onscr(g,f) - обработка прокрутки(scroll) страницы

Служебная. Разгружает браузер, предотвращая излишние частые вычисления..
Обрабатывает кнопу наверх g - goup, фиксацию элемента f - fix, 
 объект hash -  h (эмуляция многостраничности для одностраничных сайтов), 
 объект fx - x (анимация появления блоков для сайтов визиток).
ссылка-якорь на функцию ff.onscr

ff.onscrf(f,x) - обслуживает ff.onscr fix

Служебная. Фиксирует элементы переданные ff.onscr
ссылка-якорь на функцию ff.onscrf

ff.op(e,o) - задаёт прозрачность элемента

e - элемент или 'id'
o - прозрачность opacity от 0 до 1 (0.7)
ссылка-якорь на функцию ff.op

ff.otl(x,b) - служебная для анимации

Вычисляет позицию "отлёта" из-за экрана по выбранным направлениям.
ссылка-якорь на функцию ff.otl

ff.otln(y,x,t,l) - служебная для анимации

Проверяет направления, выравнивая полёт по вертикальным и горизонтальным осям..
ссылка-якорь на функцию ff.otln

ff.otly(a,b,y,n) - служебная для анимации

Проверяет помещается ли объект в окно и отдаёт координаты в зависимости от
направления прилёта..
n - результат без отступа (экран/100)
ссылка-якорь на функцию ff.otly

ff.ove - выполняется при закрытии всплывающих окон

Служебная. Разустанавливает ff.bind клавиш и переходит к последнему
элементу до запуска окон анимации - меню итп.
ссылка-якорь на функцию ff.ove

ff.ovy(x,h) - служебная для анимации

Проверяет поданные направления x анимации разбивая float, если он подан
в качестве направления и в зависимости от того скрыт h ли элемент отдаёт
направления движения..
ссылка-якорь на функцию ff.ovy

ff.over(t,x,u,c,e,g) - всплывающий блок с затемнением фона

Так же является служебным для ff.mes. role=dialog
t - текст / html вставляемый внутрь блока..
  ~| в начале - оставить элемент в position:fixed
  ~0| установить top в 0 (или 20px...)
  x| в начале - не создавать кнопку закрытия в блоке подложке overb
x - анимация:
0 или отсутствие параметра = случайный прилёт/улёт с разных сторон..
-11 - плавно изменяет прозрачность (эффект fade-in/out)
Держите в уме сетку направлений движения:
8 1 2
7 9 3
6 5 4
Если задать 3 - подсказка прилетит справа и улетит направо..
Если задать 4.8 - прилетит справа снизу, улетит наверх налево.
Если задать -4.8 - добавит эффект изменения прозрачности
u - длительности анимации = 500 мс.  (1000 мс = 1 сек)
c - название класса, который добавить всплывшему блоку
e - функция при закрытии (вызывается до скрытия)// function(){stopvideo()}
g - id или класс элемента на который поставить фокус (ff.mes по умолчанию - на 1 элемент)
Так же происходит установка клавиш управления ff.bindef
Пример, вкладываем кнопку закрытия во внутрь:
ff.over(`x|<button class="fbn fbx" title=" Закрыть [Esc] " onclick="ff.ob.click()"></button> mytext `,0,500,`myclass`);
.myclass .fbn{position:absolute}
ссылка-якорь на функцию ff.over

ff.overb(v,n,p) - изменить свойство в css .overb

Вспомогательная, вызывает ff.css()
Если понадобится динамически менять цвет фона подложки при 
  выведении всплывающего меню ff.menu(), ff.over() итп.
v - задаваемое значение 'rgba(255,0,0,.7)'
n - название селектора класса итп (по умолчанию '.overb')
p - название свойства (по умолчанию 'backgroundColor')
Примеры:
ff.overb('rgba(255,0,0,.7)');
ff.overb('100px','.myclass','width');
ссылка-якорь на функцию ff.overb

ff.pf(v) - в формат телефона

Приводит поданное значение к виду 1 (123) 123-12-12.
Функция умная, если номер короче - выведет 12-12-12 итп.
ссылка-якорь на функцию ff.pf

ff.pos(e) - позиция элемента

e - элемент или 'id'
Возвращает массив координат с учётом высоты полосы прокрутки страницы:
t: сверху
l: слева
r: справа
b: снизу
y=ff.pos(e).t;
ссылка-якорь на функцию ff.pos

ff.posr(e) - координаты элемента

e - элемент или 'id'
Возвращает массив координат без учёта высоты прокрутки страницы:
t: сверху
l: слева
r: справа
b: снизу
y=ff.posr(e).t;
.getBoundingClientRect() 
возвращает размер элемента и его позицию относительно viewport 
(часть страницы, показанная на экране, и которую мы видим).
ссылка-якорь на функцию ff.posr

ff.prev(e,n,c) - получить предыдущий элемент

e - элемент
n - название тега или '' чтоб взять следующий (необязателен)
c - зациклить до встречи первого совпадения, по умолчанию 0
  (поиск соседнего элемента с требованием совпадать по тегу)
Вернёт false если не найден
d=ff.prev(e,'div');
или
d=ff.prev(e,'div,p,ul');
ссылка-якорь на функцию ff.prev

ff.props(e,s) - получить свойства элемента

Служебная, для отладки.
e - элемент
s - разделять строки (по умолчанию '\n')
console.log(ff.props(e));
alert(ff.props(e));
ссылка-якорь на функцию ff.props

ff.quotes(v) - замена кавычек

Служебная, заменяет приходящие `` и ` на " и '
Так же может подставить путь(ff.path) ссылкам =`! или =\`!
ссылка-якорь на функцию ff.quotes

ff.rand(a,b) - возвращает случайное число в заданном диапазоне

x=ff.rand(1,10);
ссылка-якорь на функцию ff.rand

ff.req(p,f) - реализует AJAX запросы

Служебная для ff.send используйте её для запросов.
p* - объект параметров:
     u: URL запроса
     s: строка запроса (параметры)
     o: элемент (или 'id' или 'класс') в который возвращать результат
f - не добавлять заголовок application/x-www-form-urlencoded (нужен для FormData)
Все запросы уходят по POST, если необходим GET - просто укажите в u: ?par=need
new ff.req({u:u, s:s, o:o}, f);
Дополнительные возможности при ответе сервера:
Вложить ответ на уровень выше контейнера для ответа o:
echo '`|rise`|текст';
Перейти по адресу (window.location=):
echo '`|nav`|//fsen.ru/docs/js';
Перезагрузить страницу с гарантированным сбросом кэша:
echo '`|reboot`|';
rise, nav, reboot, eval - обязательно в начале ответа!
Вызвать выполнение скрипта eval:
echo '`|eval`|alert(`js eval`)';
echo 'текст<input type="hidden" id="fseval" value="func()">';
echo '<input type="hidden" id="fseval" value="ff.v(`sign`,`<button class=``butorange``>text</button>`)">';
`` заменятся на "
` заменятся на '
Прокрутит страницу к элементу и даст фокус на него..
echo 'текст<div role="alert" class="red">alert</div>';
А вот как выполнить дополнительный запрос после отсылки:
elseif(1600000000==$mesid)echo '`|rise`|<p role="alert">'.$out.'</p><input type="hidden" id="fseval" value="roistatGoal.reach({leadName:`Заявка с сайта`,text:`Заявка 1`,name: `'.$name.'`,phone:`'.$phone.'`});">';
ссылка-якорь на функцию ff.req

ff.sa(e,s) - строку в массив

e - строка элементов через запятую, если подан объект/элемент - вернёт его в массиве..
s - разделитель, по умолчанию запятая ','
var i, e = ff.sa('id1,id2');
for (i = 0; i < e.length; i++) {
  if(o = ff.g(e[i])){}
}
Для организации циклов с неизвестным количеством элементов на входе..
ссылка-якорь на функцию ff.sa

ff.sc(n,v,e,r,z,s) - установить cookie и обновить страницу

n* - название
v* - значение
e - время жизни cookie сек.(0 = месяц по умолчанию) см. ff.c
r - список удаляемых/заменяемых переменных $_GET из адреса
z - заменить переменные
s - сортировка, включена по умолчанию = 1
Установить:
ff.sc('name','value');
Установить с удалением/заменой/добавлением параметров $_GET:
ff.sc('name','value',90,'remove,me');
ff.sc('name','value',0,'t'); //fsen.ru?t=1612863384838 -> fsen.ru
ff.sc('name',1,60,'t',ff.time(1)); //fsen.ru -> fsen.ru?t=1612863384838
ff.sc('name','value',0,'old','new');
ff.sc('name','value',0,'replace,remove,replace','new,null,new2'); //null==remove
Удалить:
ff.sc('name','');
ссылка-якорь на функцию ff.sc

ff.scr() - получить позицию прокрутки(scroll) страницы

Возвращает объект {t:сверху, l:слева}
t = ff.scr().t;
ссылка-якорь на функцию ff.scr

ff.scrto(e,t,y,d) - прокрутить к элементу

e - элемент или 'id'
t - отступить сверху, по умолчанию 9px
y - переключатель:
    к началу страницы - ff.scrto(0,0,1);
    к концу - ff.scrto(0,0,2);
d - длительность анимации прокрутки (duration) по умолчанию 300мс (ff.at)
ff.scrto(e);
ff.scrto('id',50);
ff.scrto(0,0,1,400)
ссылка-якорь на функцию ff.scrto

ff.see(e) - виден и элемент на экране

Булевая - возвращает true, false
e - элемент или 'id'
ссылка-якорь на функцию ff.see

ff.sel(o,s,e) - получить/задать позицию каретки в поле

o - элемент
s - начало
e - конец
s = ff.sel(e); //получить selectionStart
ff.sel(e, s); //установить
ff.sel(e, s, s+1); //установить выделив символ
Можно задавать отрицательное начало выделения, 
  т.е. отступить от конца столько-то символов.
ff.sel(o,-1)
Если конец выделения меньше позиции начала, 
  будет автоматически прибавлена позиция начала,
  таким образом можно не вычислять длину..
ff.sel(o,-1,1) //каретку на предпоследний символ и выделить последний
ff.sel(o,7,1) //каретку на 7 символ и выделить 8-й.
Если подать строку вместо цифры, то s и e возьмут длину строки поля за значение, 
  т.е. произойдёт установка каретки в конец.
ff.sel(o,2,'e') //каретку на 2 символ и выделить до конца
ff.sel(o,'e') //установить каретку в конец
Задержка 200мс перед вводом после установки фокуса, 
  заметил бывают сбои и установка происходит в начало.
ссылка-якорь на функцию ff.sel

ff.send(u,s,o,f) - послать AJAX запрос

Добавляет '.php' на конец u, если нет..
Всегда возвращает false (для удобства использования в ссылках)
Полное описание в ff.req
ff.send('inc/key','newkey=1','outid');
ссылка-якорь на функцию ff.send

ff.sip(s,f,o) - найти позицию строки без учёта регистра

s - строка
f - строка что найти
o - позиция, с которой начинать поиск: от 0 до (длины строки-1)
if(ff.sip(u, '.php') !== !1){}
if(ff.sip(u, '.php') !== false){}
ссылка-якорь на функцию ff.sip

ff.sp(s,f,o) - найти позицию строки

s - строка
f - строка что найти
o - позиция, с которой начинать поиск: от 0 до (длины строки-1)
if(ff.sp(u, '.php') !== !1){}
if(ff.sp(u, '.php') !== false){}
ссылка-якорь на функцию ff.sp

ff.style(e,n) - гарантировано возвращает значение CSS стиля

e - элемент или 'id'
n - название стиля
Вернёт пустую строку '', если не нашёл..
s=ff.style(e,'display');
ссылка-якорь на функцию ff.style

ff.tabs - переключает вкладки [tabs]

ff.onload(function() {
  ff.init({
    ...
    tabs:1  //ищет class 'tabs'
    или
    tabs:'tabs2'
    ...
  });
Пример:
<div class="tabs">
  <ul>
    <li>Вкладка 1</li>
    <li class="on">Вкладка 2</li>
    <li>Вкладка 3</li>
  </ul>
  <div>Содержание 1 вкладки..</div>
  <div>Содержание 2 вкладки..</div>
  <div>Содержание 3 вкладки..</div>
</div>
ссылка-якорь на функцию ff.tabs

ff.time(ms) - Unix Time Stamp

Возвращает текущую метку времени Unix
Cекунды, от начала эпохи Unix (1 января 1970 00:00:00 GMT) до текущего времени
Аналог php time()
В случае передачи флага ms вернёт время в микросекундах ff.time(1)
ссылка-якорь на функцию ff.time

ff.v(e,v) - возвращает/задаёт значение (value / innerHTML)

e - элемент или 'id'
v - значение
Функция определяет сама где значение у элемента в value или в innerHTML..
Приоритет получения/задания значений: e.getAttribute('value'), e.value, e.innerHTML;
ссылка-якорь на функцию ff.v

ff.vc(p,n) - возвращает значение элемента взятого по классу

e - родительский элемент или 'id', если не указан берётся document
n - название класса
v=ff.vc(0,'class');
ссылка-якорь на функцию ff.vc

ff.walk(i,e,n,f,q,h) - получить соседний элемент

Используется для перемещения по элементам формы.
i - направление движения: 1 - вперёд, 0 - назад
e - элемент, до или после которого начать поиск элементов n
n - разрешённые элементы, по умолчанию ff.walke='a,button,label,textarea,input,select'
f - установить фокус на элементе = 1
q - если не указано или 0 - подняться наверх(parentNode) к первому элементу 'nav,div'
h - брать в том числе невидимые элементы (необходим для ff.mesend
    для захвата input type="hidden")
Функция перескакивает label при обратном движении, и через элементы с tabindex==-1
и невидимые visibility==hidden и display==none
Ныряет и выныривает по элементам внутри, например если необходимо найти
textarea внутри label или элемент лежит внитри div итп..
//Двигаться назад, по окончании на последний элемент
var a=fs.ae(); //document.activeElement
if(!ff.walk(0,a,0,1))ff.walkto(a,0,-1);
ссылка-якорь на функцию ff.walk

ff.walkto(e,n,i,q,f,h) - получить элемент

Используется для перемещения по элементам формы.
e - элемент или 'id' внутри которого идёт поиск
n - разрешённые элементы, по умолчанию ff.walke='a,button,label,textarea,input,select'
i - номер элемента, который взять, по умолчанию 1-й
q - если не указано или 0 - не сбрасывать счётчик при поиске..
f - установить фокус на элементе = 1
h - брать в том числе невидимые элементы (необходим для ff.mesend 
    для захвата input type="hidden")
Функция перескакивает label при обратном движении, и через элементы с tabindex==-1
и невидимые visibility==hidden и display==none
var a=fs.ae(); //document.activeElement
ff.walkto(a,'div'); //первый div
ff.walkto(a,0,-1); //последний элемент
ссылка-якорь на функцию ff.walkto

ff.wh(e) - получить размеры элемента

e - элемент или 'id', если не подан функция вернёт размеры окна.
Возвращает целые числа в объекте {w: ширина,h: высота}
y=ff.wh().h;
ссылка-якорь на функцию ff.wh

ff.wl() - получить текущий URL

Возвращает window.location приведённый к строке
ссылка-якорь на функцию ff.wl

var fb - галерея изображений [fotobox]

ff.onload(function() {
  ff.init({
    ...
    fotobox: 1, //class=foto
    или
    fotobox: 'myclass',
    или
    fotobox: {n:1} //не выводить дубли (где одинаковая ссылка на картинку)
    или
    fotobox: {c:'myclass',n:1},
    ...
  });
});
Устанавливает обработку анимации на все найденные элементы..
Скрипт сначала опрашивает заголовки внутри контейнера затем h2 до..
Путь до картинки inc/img/.. при /inc/img/ от корня (движок сам подставит,
результат подстановки и видно сейчас, оставляйте пути без первого слэша /, 
если хотите чтоб ссылки на сайт в поддиректории корректно работал)
Примеры:
<h2>Заголовок</h2>
<div class="foto">
  <a href="/inc/img/?/0.jpg"><figure><img src="/inc/img/?/0s.jpg" alt="">
    <figcaption>text</figcaption></figure></a>
  <a href="/inc/img/?/0.jpg"><figure><img src="/inc/img/?/0s.jpg" alt="">
    <figcaption>text</figcaption></figure></a>
</div>
<div class="foto scroll">
  <h2>Заголовок</h2> или <h3>Заголовок</h3>
  <a href="/inc/img/?/big.jpg"><img src="/inc/img/?/small.jpg" alt="text"></a>
  <a href="/inc/img/?/0.jpg"><img src="/inc/img/?/0s.jpg" alt="">text</a>
</div>
<a class="foto" href="/inc/img/?/big.jpg"><img src="/inc/img/?/small.jpg" alt="text"></a>
scroll - показывать изображения в полном размере, с полосами прокрутки внутри блока.
Размер больших картинок рекомендую делать 1300 x 700 px из соображения 
  пропорциональности..
ссылка-якорь на fb

var fc - шифрование

Объект "жопной боли" криптоаналитика при прослушивании трафика в сети.
Полная функциональность не описывается..
Так же защищает данные от возможного искажения..
ссылка-якорь на fc

fc.a(s) - аналог php base64_encode

s=fc.a('зашифруй меня');
ссылка-якорь на функцию fc.a

fc.b(s) - аналог php base64_decode

s=fc.b('расшифруй меня');
ссылка-якорь на функцию fc.b

fc.g(z) - генератор пароля

z - длина
Функция "генерирует" только английские буквы в разном регистре и цифры..
ссылка-якорь на функцию fc.g

var fd - обрабатывает перетаскивание объектов (Drag-and-drop)

Служит для создания "бегунков" (скроллбаров) и прочих элементов связанных с 
тасканием объектов на странице.
Умеет ограничивать возможную область перетаскивания.
(Работает на touch устройствах.)
ссылка-якорь на fd

fd.init(e,minX,maxX,minY,maxY) - установить Drag-and-drop

e - элемент или 'id'
minX,maxX,minY,maxY - ограничения по осям. (не обязательные)
fd.init(e, 0, ff.wh(e).w - 20, 59, 59);
e.ondrag = e.ondragend = function(x, y){ calc(x); }
ссылка-якорь на функцию fd.init

fd.winit(e,f) - установить обработку колёсика мыши (MouseWheel)

e - элемент или 'id'
f - функция обработки
fd.winit(e.parentNode, function(event){
  var x, i = fd.wheel(event);
  if (i !== !1) {
    x = ff.int(e.style.left);
    if (i == -1){ //влево, колёсико крутится вверх
      x -= 15;
      if (x < 0) x = 0;
    } else { //вправо, i == 1 колёсико крутится вниз
      x += 15;
      i = ff.wh(e.parentNode).w - 20; // естественно логичнее заранее посчитать
      if (x > i) x = i;                         // и по замыканию передать значение 
    }
    e.style.left = x + 'px';
    calc(x);
  }
});
ссылка-якорь на функцию fd.winit

fd.bindswipe(o,f) - управлением пальцем (для touch устройств)

o - элемент или 'id'
f - функция обработки
   f = f || function(d){};
   d - направление свайпа пальцем: 1 = up, 2 = right, 3 = down, 4 = left
Пример:
if(ff.touch)fd.bindswipe('myid',function(d){
   if(d==1)doswipeup();
   ...
});
ссылка-якорь на функцию fd.bindswipe

var fe - слайдер (карусель) [slide]

ff.onload(function() {
  ff.init({
    ...
    slide: 1,
    или
    slide: {c:'slide',t:5000,d:400,f:ff.aback,u:1},
    или
    slide: {c:'newsslide',t:5000,d:400,u:'1,leftclass,rightclass',e:function(t){newsslide(t)}},
    ...
  });
});
c - класс на который будет повешена анимация, по умолчанию slide,
    если указать movel, mover - анимация начнёт двигаться влево и в право.
t - промежуток между запуском анимации, по умолчанию 5000 мс. (1000 мс = 1 сек)
d - длительности анимации, по умолчанию 400 мс.
f - функция анимации
u - 1 = разместить кнопки управления выше родительского элемента,
           чтоб была возмозность за блок выносить.
      Если написать так: '1,leftclass,rightclass' заменятся классы кнопок навигации.
      '1,leftclass,rightclass,1' - скрывать кнопки управления при анимации.
b - функция до начала проигрывания анимации.
e - функция в конце проигрывания анимации, для дозагрузки элементов например.
При наведении мыши на блок слайдера, срабатывает пауза.
Если блок не виден, анимация не проигрывается.
Устанавливает обработку анимации на все найденные элементы..
Примеры:
//class="slide swipe" - обрабатывать управление пальцем (swipe) на touch устройствах.
<div class="slide mover">
  <div><img src="/inc/img/main/slide1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/slide2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/slide3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/slide4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/slide5.jpg" alt=""><p>test5</p></div>
</div>
<div class="slide movel">
  <div><img src="/inc/img/main/slide1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/slide2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/slide3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/slide4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/slide5.jpg" alt=""><p>test5</p></div>
</div>



Сделаем дозагрузку элементов слайдера:
Загрузим 3 блока, первый из конца и два из начала по 5 новостей в блоке,
при смещении влево будем вставлять блок в начало из конца, вправо из начала
новостной ленты в базе данных.
JS:
var leftloaded=0;
ff.onload(function() {
  ff.init({
    focus: 1,
    fotobox: 1,
    tomain: 1
    ...
  },{
    slide: {c:'newsslide',u:'1,slideleft,slideright',e:function(t){newsslide(t)}}
  });
  var i, z = ff.slides.length;
  for (i = 0; i < z; i++){
    if(ff.slides[i].class=='newsslide'){
      if(ff.slides[i].s>1){//количество блоков div 0..n
        leftloaded=1;
        ff.slides[i].go(1);//сдвигаем на 1 блок вправо без анимации
        //или ff.slides[i].move(0); с анимацией направо
        //или ff.slides[i].ic(7); если требуется дальше
      } break;
    }
  }
});
function newsslide(t){
  var y=2;
  if(t.x==0)y=1;//догружаем блок в начало //t.x - текущая позиция
  else if(t.x==t.s)y=0;//догружаем блок в конец
  if(y!=2)ff.send('inc/news','more='+(t.s+1)+'&index='+t.index+'&tofirst='+y+'&leftloaded='+leftloaded,'newsout');
}
PHP:
inc/styles/def/_.php:
include D.'inc/news.php';
inc/news.php:
if(isset($_POST['more'])){//забор страниц далее через post (Показать ещё)
  define('D',preg_replace('#/inc$#','/',dirname($_SERVER['SCRIPT_FILENAME'])));
  $s=dirname($_SERVER['PHP_SELF']);if('/'!=$s)$s.='/';
  $s=str_replace('/inc/','/',$s);
  define('R',$s);//root
}
include D.'deny/sql.php';
dbConnect();
//sql может не соответствовать текущей кодобазе движка, проверяйте функции..
$limit=5;//сколько новостей в одном блоке..
$s=$p='';
if(!isset($_POST['more'])){//1-е результаты
  $r=dbqf('SELECT COUNT(*) FROM news WHERE hidden=0');
  $count=(int)$r[0];
  $lim2=$limit*2;
  $i=$x=0;
  if($count>=$lim2){
    if($count>$lim2){//>10 из конца забираем 5 шт или сколько осталось
      $x=$count-$lim2;
      if($x>$limit)$x=$limit;
      $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id ASC LIMIT '.$x) or _exit();
      while($r=$q->fetch_row()){
        ++$i;$p=slider($r).$p;//функция упаковки запроса например p, figure итд, без div!
        if($limit==$i){$s.='<div>'.$p.'</div>';$i=0;$p='';}//если вывод по 1 - обязательно
      } if(''!=$p)$s.='<div>'.$p.'</div>';
    }//из начала 10 шт
    $i=0;$p='';
    $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.$lim2) or _exit();
    while($r=$q->fetch_row()){
      ++$i;$p.=slider($r);
      if($limit==$i){$s.='<div>'.$p.'</div>';$i=0;$p='';}
    } if(''!=$p)$s.='<div>'.$p.'</div>';
  }else{//нехватка блоков, выводим всего два блока <= 10 шт
    $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.$lim2) or _exit();//из начала 10 шт
    while($r=$q->fetch_row()){
      ++$i;$p.=slider($r);
      if($limit==$i){$s.='<div>'.$p.'</div>';$i=0;$p='';}
    } if(''!=$p)$s.='<div>'.$p.'</div>';
  }
  echo '<div class="newsslide">'.$s.'</div><div id="newsout" class="skip"></div>';
}else{//забор страниц далее через post (Найти ещё)
  $start=(int)$_POST['more'];if(0>$start)$start=0;
  $i=(int)$_POST['index'];
  $r=dbqf('SELECT COUNT(*) FROM news WHERE hidden=0');
  $count=(int)$r[0];
  $start=$start*$limit;//количество загруженных новостей в блоках по 5 шт..
  if($start>=$count)_exit();//вся лента новостей загружена
  $tofirst=(int)$_POST['tofirst'];
  $leftloaded=(int)$_POST['leftloaded']*$limit;
  if($tofirst){//вставить блок в начало {i:1,..}
    $start=$leftloaded;
    $x=$count-$start;
    if($x<$limit)$limit=$x;
    $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id ASC LIMIT '.$start.','.$limit) or _exit();
    while($r=$q->fetch_row())$p=slider($r).$p;
  }else{
    $start=$start-$leftloaded;//уже предзагружены - не считать
    $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.$start.','.$limit) or _exit();
    while($r=$q->fetch_row())$p.=slider($r);
  }
  if(''!=$p)echo '`|eval`|(function(){'.($tofirst?'leftloaded++;':'').'var o=ff.ce({i:'.$tofirst.',p:ff.slides['.$i.'].o,t:`'.$p.'`});ff.n(o);ff.slides['.$i.'].update();})();';
  //в функцию можно не заворачивать, это чтоб var o не попало в глобальную видимость и чего-нить не стёрло, мало ли используете..
}
ссылка-якорь на fe

var fh - эмуляция многостраничности для одностраничных сайтов [hash]

Используется для одностраничных сайтов, дабы сэмулировать многостраничную 
  структуру для поисковиков.
Занимается управлением document.title, history.state итп. на основании 
  якорей на странице.
Прокручивает к якорю при нажатии, и при прокрутке страницы переключает 
  заголовки итд..
Ссылки "подцвечивает" классом 'da' по умолчанию или любым 
  желаемым hash: 'myclass',
Место срабатывания в каждом блоке можно подкорректировать путём задания 
  позиции конкретного якоря(ссылки) или массово под конкретное разрешение..
.lt{position:relative;top:-120px}
Пример использования (название для document.title возьмёт из ссылок):
<nav>
  <a href="/#about">О нас</a>
  <a href="/#services">Услуги</a>
  <a href="/#contacts">Контакты</a>
</nav>
<a id="about" class="lt"></a><br><h2>О нас</h2>
<p>Наша компания...</p>
<a id="services" class="lt"></a><h2>Услуги нашей компании</h2>
<p>Наши услуги...</p>
<a id="contacts" class="lt"></a><h2>Контакты</h2>
<p>Наши контакты...</p>
ff.onload(function(){
  ff.init({
    ...
    hash: 1,
    или с указанием времени прокручивания
    hash: 400,
    или с указанием класса для активной ссылки
    hash: 'myclass',
    или
    hash: {t:400},
    или
    hash: {c:'myclass',t:400},
    ...
  });
});
ссылка-якорь на fh

var fo - выпадающий список [combobox]

Служебный объект, обслуживает аналог стандартных элементов select -> combobox 
  с адаптацией для слабовидящих (WCAG 2.0, ГОСТ Р 52872-2012) и возможностью поиска.
Метод активации и прочее смотрите в onload
ссылка-якорь на fo

var fs - операции с фокусом и первое нажатие tab

Служебная.
Первое нажатие tab - перейти к основному содержанию
Метод активации и прочее смотрите в onload
ссылка-якорь на fs

var ft - слайдер лента (карусель с блоками внутри) [tape]

ff.onload(function() {
  ff.init({
    ...
    tape: 1,
    или
    tape: {c:'tape',t:2500,d:500,f:ff.aback},
    или
    tape: {c:'newstape',t:2500,d:500,u:'1,slideleft,slideright',e:function(t){newstape(t)}}
    ...
  });
});
c - класс на который будет повешена анимация, по умолчанию tape,
    если указать vert - то слайдер считается вертикальным,
    movel или movet, mover или moveb - анимация начнёт двигаться 
    вверх или вниз.
t - промежуток между запуском анимации, по умолчанию 
    4000 мс. (1000 мс = 1 сек)
d - длительности анимации, по умолчанию 400 мс.
f - функция анимации
u - 1 = разместить кнопки управления выше родительского элемента, 
           чтоб была возмозность за блок выносить.
      Если написать так: '1,leftclass,rightclass' заменятся классы кнопок навигации.
e - функция в конце проигрывания анимации, для дозагрузки элементов например.
При наведении мыши на блок с каруселью, срабатывает пауза.
Если блок не виден, анимация не проигрывается.
Устанавливает обработку анимации на все найденные элементы..
Примеры:
//class="tape swipe" - обрабатывать управление пальцем (swipe) на touch устройствах.
<div class="tape mover">
  <div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/tape2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/tape3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/tape4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/tape5.jpg" alt=""><p>test5</p></div>
</div>
<div class="tape vert moveb">
  <div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/tape2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/tape3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/tape4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/tape5.jpg" alt=""><p>test5</p></div>
</div>


Сделаем дозагрузку элементов новостной ленты:
ff.onload(function() {
  ff.init({
    focus: 1,
    fotobox: 1,
    tomain: 1
    ...
  },{
    tape: {c:'newstape',t:2500,d:500,u:'1,slideleft,slideright',e:function(t){newstape(t)}}
  })
});
function newstape(t){//передана ссылка на весь объект - делайте что хотите.
  if(t.isend())ff.send('inc/news','more='+(t.s+1)+'&index='+t.index,'newsout');//t.s = [0 ... n]
}
//В отдающем /inc/news.php скрипте:
$i=(int)$_POST['index'];
1) Хороший вариант, динамически вставить блоки
$s = '...';
$s = 'ff.ce({p:ff.tapes['.$i.'].i,t:`'.$s.'`});';//контейнер = div по умолчанию
2) Другой варинат - будет мигать при перестроении из-за innerHTML
$s = '<div>...</div>';
echo '`|eval`|ff.tapes['.$i.'].i.innerHTML+=`'.$s.'`;ff.tapes['.$i.'].update();';

Ещё вариант со сдвигом и дозагрузкой в обе стороны:
ff.onload(function() {
  ff.init({
    focus: 1,
    fotobox: 1,
    tomain: 1
    ...
  },{
    tape: {c:'newstape',t:2500,d:500,u:'1,slideleft,slideright',e:function(t){newstape(t)}}
  });
  var i, z = ff.tapes.length;
  for (i = 0; i < z; i++){
    if(ff.tapes[i].class=='newstape'){
      if(ff.tapes[i].s>4)ff.tapes[i].go(1);//-1 от требуемого количества 5 = [0..4]
      break;
    }
  }
});
function newstape(t){
  var o,s,e,y=2;//первый элемент в минусовой позиции для математики..
  if(t.n==-1)y=1;//догружаем блоки в начало //t.n - текущая позиция
  else if(t.isend())y=0;//догружаем блоки в конец
  if(y!=2){
    o=ff.byt(t.a[0],'var',0);s=ff.v(o);
    o=ff.byt(t.a[t.s],'var',0);e=ff.v(o);
    ff.send('inc/news','more=1&index='+t.index+'&tofirst='+y+'&s='+s+'&e='+e,'newsout');
  }
}
PHP:
inc/styles/def/_.php:
include D.'inc/news.php';
inc/news.php:
if(isset($_POST['more'])){
  define('D',preg_replace('#/inc$#','/',dirname($_SERVER['SCRIPT_FILENAME'])));
  $s=dirname($_SERVER['PHP_SELF']);if('/'!=$s)$s.='/';
  $s=str_replace('/inc/','/',$s);
  define('R',$s);//root
}
$limit=6;//вывод для tape,+2 блока для дозагрузки, на экране 4 по бокам ещё по 1,
чтоб при листании он понял что это последний/первый элемент и догрузил.
if(!isset($dbl))include D.'deny/sql.php';
dbConnect();
//sql может не соответствовать текущей кодобазе движка, проверяйте функции..
$t=$s=$p='';
if(!isset($_POST['more'])){//1-е результаты
  $r=dbqf('SELECT COUNT(*) FROM news WHERE hidden=0');
  $count=(int)$r[0];
  if($count>=$limit){
    $r=dbqf('SELECT * FROM news WHERE hidden=0 ORDER BY id ASC LIMIT 1');
    $t.='<div onclick="newsopen(this)"><var>'.$r[0].'</var>...</div>';//$r[0]=id
  }
  $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.($limit-1)) or _exit();
  while($r=$q->fetch_row())
    $t.='<div onclick="newsopen(this)">...</div>';
  echo '<div class="newsc"><div class="newstape">'.$t.'</div></div><div id="newsout" class="skip"></div>';
}else{//забор страниц далее через post (Найти ещё)
  $s=(int)$_POST['s'];
  $e=(int)$_POST['e'];
  $i=(int)$_POST['index'];
  $tofirst=(int)$_POST['tofirst'];
  if($tofirst)$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 AND id>'.$s.' AND id<'.$e.' ORDER BY id ASC LIMIT '.$limit) or _exit();
         else $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 AND id>'.$s.' AND id<'.$e.' ORDER BY id DESC LIMIT '.$limit) or _exit();
  while($r=$q->fetch_row()){//ff.ce - div по умолчанию
    $t.='ff.ce({i:'.$tofirst.',p:ff.tapes['.$i.'].i,f:function(){newsopen(this)},t:`<var>'.$r[0].'</var>...`});';
  }
  if(''==$t)_exit();
  echo '`|eval`|ff.tapes['.$i.'].preup();'.$t.'ff.tapes['.$i.'].update();';
}//_close();
ссылка-якорь на ft

var fx - анимация появления блоков для сайтов визиток

Ищет элементы с классом fxanim, в случае появления на экране задает класс fxdone
  и начинает проигрываться заданная в CSS стилях анимация, 
    по сути можно прикрутить любую...
Если объект больше половины экрана, проигрывание запуститься ранее.
Затем подчищает за собой - удаляет все классы начинающиеся с fx.
Если больше нет объектов - обработка останавливается, 
  но пустой вызов при скорллинге будет..
fxloop позволяет повторять эффект постоянно, скрипт будет удалять класс fxdone
  при выходе за пределы видимости анимированного элемента.
Добавте CSS в свой файл стилей:
.fxanim{}
.fxloop{}
.fxdone{transition:.6s ease}
.fxtime200{transition-duration:.2s !important}
.fxtime400{transition-duration:.4s !important}
.fxtime800{transition-duration:.8s !important}
.fxdelay200{transition-delay:.2s !important}
.fxdelay400{transition-delay:.4s !important}
.fxdelay600{transition-delay:.6s !important}
.fxdelay800{transition-delay:.8s !important}
.fxdelay1200{transition-delay:1.2s !important}
.fxfade{opacity:0}
.fxfade.fxdone{opacity:1}
.fxrotateleft{transform:rotate(20deg);opacity:0}
.fxrotateright{transform:rotate(-20deg);opacity:0}
.fxrotateleft.fxdone,
  .fxrotateright.fxdone{transform:rotate(0deg);opacity:1}
.fxslideup{transform:translateY(100px);opacity:0}
.fxslidedown{transform:translateY(-100px);opacity:0}
.fxslideleft{transform:translateX(100px);opacity:0}
.fxslideright{transform:translateX(-100px);opacity:0}
.fxslideup.fxdone,.fxslidedown.fxdone,.fxslideleft.fxdone,
  .fxslideright.fxdone{transform:translate(0,0);opacity:1}
.fxzoomin{transform:scale(0.75);opacity:0}
.fxzoomout{transform:scale(1.5);opacity:0}
.fxzoomin.fxdone,.fxzoomout.fxdone{transform:scale(1);opacity:1}
fxtime* - время (мс) проигрывания анимации;
fxdelay* - задержка (мс) перед запуском анимации;
fxfade - анимация появления (нарастания прозрачности)
fxrotateleft - появление с поворотом слева
fxrotateright - появление с поворотом справа
fxslideup - появление движением снизу вверх
fxslidedown - появление движением сверху вниз
fxslideleft - появление движением слева направо
fxslideright - появление движением справа налево
fxzoomin - появление увеличением
fxzoomout - появление уменьшением
Задайте overflow:hidden для блоков(контейнеров) дабы избавиться 
  от скроллинга страницы или просто на main, 
    и перекрытие блоков при надобности position:relative;z-index:1
Якоря лучше выносить за блок, иначе скроллинг ff.scrto(e); 
будет на сдвинутую позицию блока (актуально при использовании hash: 1)..
ff.onload(function() {
  ff.init({
    ...
    fx: 1,
    ...
  });
});
Пример:
<div class="fxanim fxloop fxrotateleft">
  <div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
</div>
<div class="fxanim fxloop fxrotateright fxdelay200">
  <div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
</div>
<a href="/" class="fxanim fxloop fxrotateright fxdelay400">
  <img src="/inc/img/main/tape1.jpg" alt="">
</a>
ссылка-якорь на fx

var fl - языковые пакеты

Для получения значений из массивов используйте ff.l()
ссылка-якорь на fl

ff.onload() - активация скриптов при загрузке страницы

CSS оформление элементов см. здесь.
//------------------------------------------------------------------------------
ff.onload(function() {
  //По умолчанию включены:
  ff.init({focus:1,fotobox:1,tomain:1});
});
ff.onload(function() {
  //Возможны:
  ff.init({
    accordion: 1,
    combobox: 1,
    fix: {e:'header',y:95},
    fotobox: 1,
    fx: 1,
    goup: {t:'⇪',y:300},
    hash: 1,
    slide: {c:'slide',t:5000,d:400,f:ff.aback},
    tabs: 1,
    tape: {c:'tape',t:2500,d:500,f:ff.aback},
    tomain: 1
  });
});
Если значение 0 или отсутствие параметра = отключить, например fix:0
Если необходимо воспользоваться элементами несколько раз:
ff.onload(function() {
  ff.init({
    accordion: 1,
    combobox: 1,
    focus: 1,
    fotobox: 1,
    goup: 300,
    tomain: 1
  },
  {combobox: 'combo'},
  {
    accordion: 'ac2',
    combobox: 'combo2'
    slide: {c:'slide2', t:5000,d:400,f:ff.aback},
    tabs: 'tabs2',
    tape: {c:'tape2',t:2500,d:500,f:ff.aback},
    fotobox: {c:'foto2'}
  });
});
Обратите внимание!
- focus и tomain в единичном экземпляре, и должны в одном объекте вызываться вместе.
  (скрипт перевыполнит последние установки из последнего объекта (где заданы))
- goup: {c:'mygoup',t:'/',y:300}, - в единичном экземпляре (в целях оптимизации) 
  из-за отслеживания прокрутки страницы..
//------------------------------------------------------------------------------
Эффект аккордеона [accordion]:
//------------------------------------------------------------------------------
accordion: 'class' или 1 (class="ac")
class="ac noup" - не схлопывать другие пункты при раскрытии
Могут быть заголовки: h2, h3
После заголовка допустимы теги: div, p, ul
Аккордеон можно вкладывать во внутрь другого.
Устанавливает обработку анимации на все найденные элементы..
Пример:
<div class="ac noup">
  <h2>Заголовок</h2>
  <div>текст</div>
  <h2>Заголовок</h2>
  <div>текст</div>
</div>
//------------------------------------------------------------------------------
Выпадающий список [combobox]:
//------------------------------------------------------------------------------
combobox: 'class' или 1 (class="combobox")
Компонент combobox (объект fo={}) аналог стандартного элемент select,
  с возможностью поиска и адаптацией для слабовидящих.
Описание и пример смотрите здесь.
//------------------------------------------------------------------------------
Фиксация элемента при прокрутке(scroll) страницы вниз [fix]:
//------------------------------------------------------------------------------
fix: {e:'header,nav,fixid,fixclass',c:'fixed',y:95}
  e* - объекты для захвата, функция всеядна, можно указывать элемент, id, класс, тег..
  c - класс который здать элементам, по умолчанию fixed.
  h - элемент для срабатывания триггера подъёма элемента e* по достижении его высоты.
  y - высота прокрутки(scroll) сверху, при котором необходимо фиксировать элементы.
  t - срабатывать в начале позиции элемента (top) при наличии h. 
      По умолчанию y=top+height (т.е. позиция снизу).
Примеры:
//.fixed{position:fixed !important} //уже есть в обязательной "шапке" CSS
header.fixed{left:0;right:0}
ff.onload(function(){
  ff.init({
    ...
    fix: {e:ff.byt(0,'header',0),y:95}
    ...
  });
Собираем по мере прокручивания элементы на разной высоте в бургер:(полоса появляющаяся сверху при прокрутке страницы)
wherebmenu, wherephone - дополнительные элементы для фиксации позиции элементов
  (необходимые элементы будут перемещены, в следствии случиться "галлюцинал" без дополнительных элементов)
ff.onload(function() {
  var w=ff.g('wherebmenu'),v=ff.g('wherephone'),b=ff.g('bmenu'),o=ff.g('burger');
  ff.init({
   ...
    fix:[ 
      {e:ff.g('home'), h:w, t:1},  //равноценно с меньшей оптимизацией {e:'home', h:'wherebmenu', t:1},
      {e:o, h:w, t:1},  //равноценно {e:'burger', h:'wherebmenu', t:1},
      {e:b, h:w, t:1},  //равноценно кнопке вызывающей меню {e:'bmenu', h:'wherebmenu', t:1},
      {e:o, h:ff.byt(0,'header',0), c:'lighter', y:-50},  //Достигли конца блока 
        с отступос вверх -50px = добавляем класс lighter, скажем бургер стал другого цвета.
      {e:ff.g('phone'), h:v, t:1, y:-100} //при достижении wherephone минус 100px - добавляем class fixed для phone
    ],
   ...
  });
Дальше действия зависят от CSS сценария, обычно это фиксация элементов над бургером.
//------------------------------------------------------------------------------
Сохранение истории фокуса и обслуживание [tomain]:
//------------------------------------------------------------------------------
focus:1
По умолчанию задаются перехваты клавишам:
Ctrl+` фокус на предыдущий элемент;
Ctrl+1 к меню (в том числе Ctrl+NumPad 1)
Если есть флаг tomain:1
Первое нажатие Tab (и Esc - закрыть) - перейти к основному содержанию
Создаётся кнопка с классом tomain, он есть в обязательной "шапке" CSS..
При нажатии на кнопку будет добавлен якорь maincontent на тег main или article и
будет выполнен переход..
//------------------------------------------------------------------------------
Кнопка наверх (к началу страницы) [goup]:
//------------------------------------------------------------------------------
c - класс, по умолчанию goup
t - текст внутри кнопки, по умолчанию стрелка вверх ⇪
y - на какой высоте страницы отображать кнопку
Создаёт button с классом goup, и встроенной подсказкой из языкового пакета -
к началу страницы
Примеры:
goup: 300, //эквивалентно goup:{y:300}
goup: {c:'goup',t:'⇪',y:300},
ссылка-якорь на onload

Меню раздела "Документация"

CSS JavaScript PHP класс для обработки IP адресов Построение меню Пример рекурсивного меню

написать сообщение

Fast Site Engine

Общественно полезное

Меню раздела "Документация"

Библиотека JavaScript

Функции:

anim - анимация

дополнительные функции для анимации

touchr - перехват touch устройств (планшетов итп)

var ff - переменные

ff.ac(e) - обрабатывает эффект аккордеона [accordion]

ff.ae(n,f,e,с,r) - add/remove/EventListener

ff.alert(t,x,e,c,u,w) - всплывающая/выезжающая подсказка

ff.atr(e,n,v) - получить/установить атрибут

ff.atrcut(s,a) - получить значение атрибута и вырезать его из строки

ff.b(o1,o2,..) - установить элементам style.display='block'

ff.bind(f,u) - устанавливает window.onkeydown/onkeyup

ff.bindef(e,f) - действия для клавиш по умолчанию

ff.by(i,e,t,n) - берёт элементы по названию тега или класса

ff.byc(e,t,n) - берёт элементы по названию класса

ff.byt(e,t,n) - берёт элементы по названию тега

ff.c(n,v,e) - установка cookie

ff.ca(e,v,w) - добавить (удалить, перевернуть) класс

ff.cc(e,v) - задан ли класс у элемента

ff.ce({}) - создать элемент

ff.copy(o,e,v,c,t) - скопировать в буфер обмена (Clipboard)

ff.copytext(v,c) - скопировать текст в буфер обмена (Clipboard)

ff.cr(e,v) - удалить класс

ff.ct(e,v) - перевернуть класс

ff.css(n,p,v,b) - изменить свойство в css

ff.d(e,v) - получить/установить style.display

ff.del(e) - удалить элемент

ff.dirname(p,l) - Возвращает имя родительского каталога

ff.e(s,n) - экранировка запроса POST

ff.fade(i,e,f,to,t) - плавно изменяет прозрачность

ff.fieldok(i,n,g,r) - подсвечивает поле зелёным или красным

ff.fix(e,i) - переворачивает position

ff.float(v,n) - возвращает float число или строку

ff.g(e) - берёт элемент по id

ff.gc(p,n) - берёт элемент по id или классу

ff.get(n,s) - аналог PHP $_GET

ff.go(v,w,s) - устанавливает URL окна

ff.ia(f,a) - есть ли значение в массиве

ff.init({},{},..) - инициирует объект ff и анимации

ff.int(v) - возвращает int число

ff.is() - определяет, установлена ли переменная

ff.isf(v) - является ли переменная числом с плавающей запятой (float)

ff.isi(v) - является ли переменная целым числом (integer)

ff.ish(e) - скрыт ли элемент

ff.ismail(v) - проверяет email

ff.ist(e) - текстовое ли поле

ff.kd(e,k,f) - проверить нажатие клавиш

ff.key(p,e) - сгенерировать капчу

ff.kis(p,n,o) - верно ли введена капча

ff.l(n,l) - возвращает значение из языкового пакета

ff.lim(e,l) - ограничить поле ввода

ff.lis(s) - вернуть язык ввода

ff.mask(e,m) - телефон согласно маски

ff.menu(x,u,e,t,v) - всплывающее/выезжающее меню

ff.mes(z,t,u,c,e,g) - всплывающая/выезжающая форма для обратной связи

ff.mesend(p,o) - отправляет форму на сервер

ff.mesf(e) - выводит список файлов input file

ff.mesp(e,a,b,c,d) - переключает тип поля input

ff.mest(t,e,p) - выводит сообщение(tooltip) об ошибке заполнения поля

ff.move(e,f,t,nt,bt,nl,bl) - переместить элемент

ff.n(o1,o2,..) - установить элементам style.display='none'

ff.next(e,n,c) - получить следующий элемент

ff.nf(v,x,d,s) - формат числа

ff.nn(e,v) - совпадает ли nodeName

ff.onload(f) - бинд на onload окна

ff.onscr(g,f) - обработка прокрутки(scroll) страницы

ff.onscrf(f,x) - обслуживает ff.onscr fix

ff.op(e,o) - задаёт прозрачность элемента

ff.otl(x,b) - служебная для анимации

ff.otln(y,x,t,l) - служебная для анимации

ff.otly(a,b,y,n) - служебная для анимации

ff.ove - выполняется при закрытии всплывающих окон

ff.ovy(x,h) - служебная для анимации

ff.over(t,x,u,c,e,g) - всплывающий блок с затемнением фона

ff.overb(v,n,p) - изменить свойство в css .overb

ff.pf(v) - в формат телефона