Специальные символы (сущности) в HTML

При работе с HTML и XSLT для вставки некоторых символов очень часто приходится использовать сущности (или мнемоники). Ниже представлены таблицы с полным набором данных символов.

Читать далее

Рубрика: HTML/CSS | Метки: | Добавить комментарий

Как убрать лишние отступы для кнопок в 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 | Метки: , , | 4 комментария

Расширяем 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 комментария

Меняем свойства элементов в JQuery 1.6+

С переходом на новую версию JQuery (1.6.2), я обнаружил что не могу менять свойства таких элементов как option, input:checkbox и др.

Раньше для того, чтобы сделать выбранным option можно было просто добавить к нему атрибут selected:

[codesyntax lang=»javascript» title=»JQuery: option selected»]

$('option').attr('selected', 'selected');
//или
$('option').attr('selected', true);

[/codesyntax]

Для того, чтобы убрать выделение:

[codesyntax lang=»javascript» title=»JQuery: option selected»]

$('option').remove('selected');
//или
$('option').attr('selected', false);

[/codesyntax] Читать далее

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

Проверка на существование 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 | Метки: | Добавить комментарий

Валидная кнопка Google +1

Сегодня передо мной стала задача добавить на сайт кнопку +1 от Google. Казалось бы все довольно просто — надо всего лишь добавить этот код в то место, в котором вы хотите увидеть кнопку:

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

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

[/codesyntax]

Читать далее

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

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

По-умолчанию для оформления списков используется свойство 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 комментарий