Как убрать лишние отступы для кнопок в Mozilla Firefox

Иногда  при верстке кнопок можно столкнуться с проблемой в браузере Firefox, если нам надо полностью убрать отступы в кнопке. Для остальных (новых) браузеров достаточно написать следующий CSS:

[codesyntax lang=»css» title=»CSS»]

.button{
	padding:0;
	border:0;
}

[/codesyntax]

Но Firefox упрямо оставляет между текстом и границей кнопки по 3px. Это касается как тега button, так и input (с атрибутом type=«button | reset | submit«). Читать далее

Рубрика: HTML/CSS | Метки: , , | 5 комментариев

Расширяем fancybox. Меняем hash при смене картинки.

Fancybox — популярный JQuery плагин для создания фотогалерей и вывода фотографий и другого контента в модальных окнах в стиле Mac. Он обладает довольно широким API, но некоторых возможностей иногда не хватает.

Например мне надо, чтобы при перелистывании фото у меня менялся и url для того, чтобы можно было легко дать кому-то ссылку на изображение, не открывая картинку в отдельном окне. Читать далее

Рубрика: JavaScript/JQuery | Метки: , , | 6 комментариев

HTML5 data-атрибуты (data-*)

Тем, кто занимался разработкой сложных web-приложений часто приходилось сталкиваться с ситуацией, когда необходимо хранить какие-либо данные прямо в html — документе. Будь то дефолтные значения для чего-либо или свойства элементов. Зачастую они добавляли сложные классы, которые надо было парсить, жертвуя семантикой верстки или же пользовались атрибутом rel, что сказывалось на валидности документа. Или вообще добавляли свои собственные атрибуты…

В HTML5 появилась возможность добавления универсального атрибута data-* для любых элементов DOM дерева. Читать далее

Рубрика: HTML/CSS, JavaScript/JQuery | Метки: , , | 4 комментария

Подключаем счетчики событий для Google Analytics

Google analytics

Для глубокого анализа действий посетителей на вашем сайте возникает необходимость в сборе информации об их действиях. С этой задачей отлично справляется Google Analytics. Читать далее

Рубрика: SEO | Метки: , , , | 3 комментария

Проверка на существование js функции

Иногда точно не известно, объявлена ли Javascript функция. Для этого перед вызовом функции необходимо проверить ее существование. Делается это очень просто:

[codesyntax lang=»javascript» title=»JavaScript»]

if (typeof myFunc == 'function') {
	myFunc()
}

[/codesyntax]

Как известно, оператор typeof используется для определения типа данных, он возвращает строку, указывающую тип аргумента.

Тип Результат
Неопределенный (Undefined) Undefined
Пустой (Null) Object
Логический (Boolean) Boolean
Числовой (Number) Number
Строковый (String) String
Объект (Object) Object
Функция (Function) Function
Рубрика: JavaScript/JQuery | Метки: | Добавить комментарий

Оформление списков с помощью псевдоэлементов

По-умолчанию для оформления списков используется свойство list-style. Но для сложных макетов его не хватает. Например нам надо рядом с каждым элементом списка поставить синий квадрат, отцентрированный по вертикали, в то время, как сам текст списка должен быть серым.

Читать далее

Рубрика: HTML/CSS | Метки: , , , , , , | 1 комментарий

Как задать overflow:hidden для ячеек таблицы

Часто возникает ситуация, когда в ячейке таблицы (td, th)  с фиксированной шириной находится текст, который либо растягивает либо разрывает ячейку.

[codesyntax lang=»html4strict» title=»HTML»]

<table width="50">
	<tr>
		<td>Очень длинный текст</td>
	</tr>
</table>

[/codesyntax]

В таком случае очень хочется поставить ей свойство overflow:hidden; Читать далее

Рубрика: HTML/CSS | Метки: , , , | 1 комментарий

Масштабируемое фоновое изображение

Недавно передо мной стала задача сделать масштабируемый фон для сайта. При чем быстро. В принципе задача нетрудная. Но как всегда встретились подводные камни. Сначала подумал просто использовать CSS 3 свойство background-size. Но тут без костылей не обойтись и этот вариант отбросил. Получилось следующее: Читать далее

Рубрика: HTML/CSS, JavaScript/JQuery | Метки: , , , , | 7 комментариев