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

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


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

Написал на 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.

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

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

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

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


К дате:



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




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

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

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

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


Результат:




 

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

Моя реализация drag-and-drop: мышкой можно переносить div-ы с одного места на другое. Хватайте мышкой какой-нибудь город и переносите его в другой список.
Переносятся элементы, у которых есть CSS-класс "draggable". Переносить можно внутрь элементов, у которых есть CSS-класс "container4draggable".

Москва
Париж
Нью-Йорк
Ростов-на-Дону
Рим
Барселона
Прага
Дрезден
Флоренция
Санкт-Петербург
Комментариев нет

Скрипт вычитает из первого списка строк второй список строк. Если совпадающих значений несколько, то удаляются все они. Регистр символов важен.
Введите массив (список) строк, из которого надо вычесть:

Введите массив (список) строк, который надо вычесть:

Результат:


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

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