Для связи: dmitriyzhuravlev (гав-гав) yandex.ru

Персональный сайт Дмитрия Журавлева


Мой ЖЖ: dimadima.livejournal.com — там дубль, плюс коментов больше.

Здесь я собираю скрипты, которые сам написал на JavaScript. Разные полезности.

Зачем это мне нужно? Прокачиваю свой скилл.

Также рекомендую порешать мои онлайн-задачи по JavaScript (необходимый уровень знаний - средний и выше).
Комментариев нет

Написал свой CSS Beautifier.
Вводите "некрасивый" CSS - получаете красивый. :) Удобно после всяких минификаторов смотреть чужой стиль.
Нормально обрабатывает вложенность блоков.
Читать далее...

Комментариев нет

Написал свою версию судоку.
Сначала версию алгоритма взял с Хабра, но там ерунда оказалась, с видимыми паттернами цифр. Пришлось самому писать алгоритм, основанный на чистом рандоме.
Играть в судоку...

Комментариев нет

Написал свой HTML5 видеоплеер со всякими удобными функциями.

Примеры плеера тут.

За ориентир брал ютубовский плеер. Там удобные фишки есть вроде перемотки двойным тачем сбоку и пр.
Комментариев нет

Написал свой скроллер, который перематывает страницу в самый вверх, а при повторном клике обратно.

Знаете такая раздражающая панель, которая вылазит слева, если туда мышкой навести?
Вот я её зачем-то сделал. :)

Аналогичный скроллер есть на Хабре, Пикабу и других сайтах. Для тех, кому лень нажать клавишу Home или кликнуть на среднюю кнопку мышки и потянуть вверх.

Я себе такое на сайт ни за что не поставлю, но многим нравится. :)

Меня эта штука раздражает, потому что я как раз иногда намеренно кликаю в самую левую часть сайта, чтобы сбросить фокус. Т.е., например, убрать курсор клавиатуры из поля ввода, гарантированно никуда не кликнув по пути. А там вместо этого перемотчик этот бесячий.

Пример работы и код внутри...

Комментариев нет


Играть...

Комментариев нет

Написал свой определитель свайпа на тач-экране. Задействованы только события touchstart, touchend, touchmove и touchcancel. На мышиные клики не реагирует.

Читать далее...

Комментариев нет

Написал свой вариант меню-гамбургера. Мобайл-френдли, работает в браузерах-динозаврах. Не тупит, всё быстро.
Вот, кликните/тапните:


Всё просто и очень удобно. JS / CSS / HTML код внутри.
Меню позволяет внутреннюю рубрикацию, т.е. можно входить в подменю, потом ещё глубже и возвращаться назад.
Клик вне области открытого меню - закрывает это меню.
Люблю быстрые интерфейсы, а не как тормознутое нечто на современных сайтах, тянущих с собой пачку тяжёлых фреймворков.
Комментариев нет

Написал на JS простой калькулятор.

Посмотреть...

Комментариев нет

Мой скрипт для сортировки таблицы по колонкам.

Наша семья
Имя ВозрастСколько пар обуви
1Дима3512
2Ира3520
3Саша415
4Миша110
5Женя04

У таблицы должен быть thead и должна быть левая колонка c номерами. По ней дополнительно сортируется, если у ячеек одинаковые значения.
Сортируется первый tbody, ячейки из thead не участвуют в сортировке.
Код работает в браузерах-динозаврах.

var table = testtable;

var colTitles = table.tHead.rows[0].getElementsByTagName('td');

for (var i = 0; i < colTitles.length; i++)
{
	var newElem = document.createElement('div');
	newElem.innerHTML = '&udarr;';
	newElem.sorterDiv = true;
	newElem.sortIncrease = false;
	newElem.colNum = i;
	newElem.table = table;
	newElem.style="position: relative; float: right; width: 25px; height: 30px; background-color: #d8d8d8; overflow: hidden; font-size: 30px; line-height: 30px; text-align: center; margin: 0px 0px 0px 10px; cursor: default;"
	colTitles[i].appendChild(newElem);
}

table.tHead.addEventListener('click', handleTheadClick);

function handleTheadClick(e)
{
	if (!e.target.sorterDiv){ return; }
	// else { console.log('Начинаю сортировать по столбцу ' + e.target.colNum); }  
	var table = e.target.table;
	var arr = [];
	var rows = table.tBodies[0].getElementsByTagName('tr');
	for (var i = 0; i < rows.length; i++)
	{
		arr.push(rows[i]);
	}
	
	// сортирую массив рядов
	// если значения совпадают, то сортировка идёт по первому столбцу (столбцу номеров)
	arr.sort( function(a, b)
	{
		var thisIsNumber = !isNaN(a.children[e.target.colNum].innerText);
		var returnValue;
		if (thisIsNumber)
		{
			if ( +a.children[e.target.colNum].innerText > +b.children[e.target.colNum].innerText )
			{
				returnValue = 1;
			}
						else if ( +a.children[e.target.colNum].innerText == +b.children[e.target.colNum].innerText )
			{
				if ( +a.children[0].innerText > +b.children[0].innerText ) {returnValue = 1;}
				else {returnValue = -1;}
			}
			else
			{
				 returnValue = -1;
			}
		}
		else
		{
			if ( a.children[e.target.colNum].innerText > b.children[e.target.colNum].innerText )
			{
				returnValue = 1;
			 }
			else if ( a.children[e.target.colNum].innerText == b.children[e.target.colNum].innerText )
			{
				if ( +a.children[0].innerText > +b.children[0].innerText ) {returnValue = 1;}
				else {returnValue = -1;}
			}
			else
			{
				returnValue = -1;
			}
		}
		
		if (!e.target.sortIncrease) { returnValue *= -1;}
		return returnValue;
				
		
	});
		
	e.target.sortIncrease = !e.target.sortIncrease;
	arr.forEach( function(elem) { table.tBodies[0].appendChild(elem); } ); // заново вставляю ряды в нужном порядке
}
Комментариев нет

Страницы: 1 2