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

Связь: dmitriyzhuravlev@yandex.ru

Интерфейс в виде монетки. Тут, конечно, больше CSS, чем JS.

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

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

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

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

Аналогичный скроллер есть на Хабре, Пикабу и других сайтах. Для тех, кому лень нажать клавишу 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); } ); // заново вставляю ряды в нужном порядке
}
Комментариев нет

Мой короткий скрипт для показа (загрузки) картинок после их появления на экране. Изображения не будут загружаться, если до них не промотана страница. Соответственно, экономия трафика пользователя, экономия трафика сервера.

Скрипт не грузит процессор постоянной проверкой, а срабатывает с короткой задержкой после события scroll.
document.addEventListener('DOMContentLoaded', showNotShownImages);
document.addEventListener('scroll', runShowNotShownImages);
 
var imgs = document.getElementsByClassName('afterVisible');
 
var wasPlanned = false;
 
function showNotShownImages()
{
    for (var i = 0; i < imgs.length; i++)
    {
        // если верхушка img находится на экране
        if ( imgs[i].getBoundingClientRect().top >= 0 && imgs[i].getBoundingClientRect().top <= window.innerHeight )
        {
            if (!imgs[i].src) {imgs[i].src = imgs[i].dataset.src;}  
        }
    }
wasPlanned = false;
}
 
function runShowNotShownImages()
{
    if (!wasPlanned)
    {
        wasPlanned = true;
        console.log('старт таймера')
        setTimeout(showNotShownImages, 300);
    }
}

Ну и CSS для картинок, у которых не должно быть атрибута src, но должен быть атрибут data-src:

.afterVisible { max-width: 200px; border: 1px solid black; width: 100%; min-height: 10px;}
Комментариев нет

flipper.js - мой скрипт для листания фотографий на сайте. Скрипт - аналог так называемого лайтбокса (слайдер изображений Lightbox).

Для вставки на сайт надо в любое место html-кода страницы вставить код:

<script src="flipper.js"></script>

А картинкам добавить атрибут data-flipper. Пример кода:

<a href="1big.jpg" target="_blank"><img src="1small.jpg" class="smallImgForUrl" data-flipper></a>
<a href="2big.jpg" target="_blank"><img src="2small.jpg" class="smallImgForUrl" data-flipper></a>
<a href="3big.jpg" target="_blank"><img src="3small.jpg" class="smallImgForUrl" data-flipper></a>

<script src="flipper.js"></script>

У документа должен стоять современный доктайп HTML5:

<!DOCTYPE html>

Скрипт становится рабочим сразу после загрузки всего html-документа (используется событие DOMContentLoaded).
Скрипт не требует никаких сторонних библиотек (вроде jQuery), писал на "чистом" джаваскрипте.

Работоспособность в Internet Explorer проверял только в 11-й версии. В 8-й версии точно не работает (слишком старый и ничего нормального не поддерживает). Зато работает нормально в старой, но по-прежнему мной любимой Opera Presto.

Никаких ограничений на использование скрипта нет: редактируйте и копируйте в своё удовольствие.

Нью-Йорк
Париж
Нью-Йорк
Нью-Йорк
Париж
Геленджик
Нью-Йорк
Париж
Париж
Париж
Геленджик
Москва

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

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


К дате:



прибавить дней:




Получается дата:

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

Для перемешивания используется алгоритм Фишера-Йетса (был популяризован Дональдом Кнутом): перебор элементов идёт от последнего элемента массива в сторону первого, меняя местами его со случайно-выбранным элементом.

Введите строки:


Результат:




 

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

Страницы: 1 2 3 4