Fast Site Engine

Высокопроизводительная CMS для сайтов.

Сделать сайт

Карта сайта
Переходим на Линукс
Политика конфиденциальности
Сделать сайт на основе Fast Site Engine

Установка
Документация
Список изменений
Лицензионное соглашение

Скачать
О движкеПроизводительностьБезопасностьТехнические требованияSEOКонтакты

Библиотека 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/cry.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" style="color: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


© Все права защищены 2004 - 2024