Калькулятор EM

Всем кому надоело использовать эти приевшиеся px в своей верстке, и хотят перейти на em, но нет никакого желания высчитывать em размеры этот калькулятор для вас.

Em второе определение для вас.

Добавления тегу IMG свойств ALT и TITLE из свойства SRC

Рад приветствовать, в этой статье я хотел бы с вами поделится одним полезным скриптом, который берет из свойства SRC изображения URL проводит с ним некоторые манипуляции? получает название картинки и записывает его в title и alt. Этот скрипт будет полезен людям(как и мне самому) которым ну очень уж не очень хочется писать эти важные свойства изображения.

Первым делом возьмем набор каких нибудь изображений для этого используем тег

<img src="">

или просто возьмите следующий код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Изменение атрибуда ALT у изображени PONTYK.com.ua</title>
<link rel="stylesheet" type="text/css" href="resets.css"/>
</head>
<body>
<img src="img/1.jpg" width="250" />
<img src="img/2.jpg" width="250" />
<img src="img/3.jpg" width="250" />
<img src="img/3.jpg" width="250" />
<img src="forum/img/5.jpg" width="250" />
<img src="img/sac/wdas/5.jpg" width="250" />
<img src="asdasdasd5.jpg" width="250" />
</body>
</html>

Когда изображения добавлены, нужно добавить скрипт для обработки этих(всех) изображений, очень желательно чтобы этот скрипт был вставлен перед закрывающимся тегом body, внизу страницы

Для того чтобы вам было понятно что делает весь этот код, я его прокомментировал.

<script type="text/javascript">
    function changeAlt() {
		// получаем все объекты изображения на странице
	    var allImage = document.getElementsByTagName("IMG");

		// запускаем перебор этих элементом циклом
		for (i = 0; i < allImage.length; i ++) {
			// теперь в новую переменную получаем и записываем атрибут src, при этом разделяем его и переворачиваем встроенными функциями  JavaScript
			var attrSrc = allImage[i].getAttribute("src").split("/").reverse();

			// тут разделяем название изображения и разширения, и записываем в переменную
			attrSrc[0] = attrSrc[0].split(".");
			// теперь задаем все атрибуты
			allImage[i].setAttribute("title", attrSrc[0][0]);
			allImage[i].setAttribute("alt", attrSrc[0][0]);
        }
    }
    // запуск функции
    onload = changeAlt;
</script>
Если кому интересно справка по встроенным функциям JavaScript
Уравнивание высоты блока с помощью JavaScript

Вот вчера сидя на работе, верстал дизайн одной велокомпании, и столкнулся с проблемой, проблема уравнивания блока. Если не понятно, то сейчас все поясню.

У меня есть изображение, которое должно заливать центральный блок контейнера (<div id="container">) по оси -y- (background: repeat-y;). У этого блока есть минимальная высота, она равна двум высотам изображениям 326px (высота изображения = 163px) . Вот это изображение

container-bg

И есть второй блок подвал (<div id="footer">), в котором находится я бы сказал ключевое изображение дизайна. Вот это изображение. Я думаю тут должно быть все понятно, эти изображения должны совпасть. совпадают они только тогда, блок кратен 163px.

(далее…)

Создаем раздвижную панель с помощью CSS и jQuery

panel

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

Отмечу сразу что такие панели не очень хорошо влияют на юзабилити, но для красоты и подчеркивания индивидуальности вашего блога (сайта) они сделают свое дело.

План действий:

нам будут нужны такие файлы

ну еще я дум нам понадобятся умелые руки 😉

(далее…)