Web Мастерская
Контакт
  • Ghost
    Ghost
    Администратор

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

Как выводить SVG иконки из отдельного файла (Подключение файла SVG)

SVG
Необходимо создать файл, где будут храниться у нас все спрайты SVG, назовём данный файл sprite.svg, с таким содержимым:
Выделить
<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="sprite1" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite1" -->
	</symbol>

	<symbol id="sprite2" viewBox="0 0 64 64">
		<!-- Код спрайта id="sprite2" -->
	</symbol>
</svg>

Тут внутри тега <svg> находятся два спрайта, "завёрнутые" в тег <symbol> с id="sprite1" и id="sprite2". По этим идентификаторам мы и будем выводить на экран наши спрайты, а поможет нам в этом тег <use>. Для вывода первого спрайта (sprite1), в нужном нам месте делаем так:
Выделить
<svg>
	<use xlink:href="sprite.svg#sprite1"></use>
</svg>

И, разумеется, для вывода второго спрайта (sprite2), делаем так:
Выделить
<svg>
	<use xlink:href="sprite.svg#sprite2"></use>
</svg>

Для изменения стилей спрайтов, например, размеров, можете добавлять атрибут class в тег <svg>:
Выделить
<svg class="nameClass">
	<use
...

jQuery: Как проверить блок на пустоту

Библиотека JS
Появилась необходимость проверить блок на пустоту, то есть есть ли в нём какие либо теги или нет. Ниже, как это можно сделать.

Допустим есть у нас такой блок (Без тегов внутри него):
Выделить
<div id="blockID"></div>

Его та нам и надо проверить. Для этого используем следующее условие:
Выделить
if ($('#blockID').html().trim() == '') {
	// Блок пустой | Действие при пустом блоке
}

ID или другой атрибут блока (blockID) пишите свой....

jQuery: проверка наличие элемента в массиве

Библиотека JS
Для проверки элемента в массиве в библиотеку jQuery добавлена функция jQuery.inArray():
Выделить
if (jQuery.inArray('js', ['js', 'jQuery']) > -1) {
    // Элемент существует в массиве
};

Вместо: jQuery.inArray можно писать: $.inArray....

Как посчитать количество элементов на чистом CSS

CSS
Допустим у нас есть блок с ID block, в котором находятся элементы (<span> или другие), и нам надо посчитать их на чистом CSS:
Выделить
<div id="block">
    <span></span>
    <span></span>
    <span></span>
</div>

Добавим блок, для вывода количества элементов:
Выделить
<div id="sum"></div>

Затем считаем на чистом CSS:
Выделить
#block {
	counter-reset: block;
}

#block > span {
	counter-increment: block;
}

#sum:before {
	content: counter(block);
}

CSS посчитает элементов в блоке и выведет результат в блок <div id="sum"></div>....

Nginx: Удаление параметров в URL

Где есть пагинация (1, 2, 3, и так далее), например, тема форума, первая страница может открываться по трем адресам:
  1. site/forum/thread/xxx/
  2. site/forum/thread/xxx/page_0/
  3. site/forum/thread/xxx/page_1/

Параметр page_X нужен начиная со второй страницы, но ни как не первой. На то, что одна страница открывается по нескольким адресам, могут ругаться поисковые системы. Я избавился от ненужного параметра для первых страниц, где есть пагинация, на PHP:
Выделить
		// Удаление "page_0" | "page_1" из URL
		if (preg_match('/page_(0|1)?\//i', $url) && stristr($url, 'admincp/') === false)
		{
			$url = preg_replace('/page_(0|1)?\//', '', $url);
		} // End: Удаление "page_0" | "page_1" из URL

Имея возможность редактировать конфигурацию Nginx, я решил переписать удаление параметров в Nginx. Важно было, чтобы параметр бул удален только при значении 0 и 1, значения 10, 11, 12 и так далее, оставались. Сделал в server:
Выделить
	# Удаление "page_0" | "page_1" из URL
	location ~* ^(.*)/page_(0|1)/$
...
Реклама