Web Мастерская | Блог :: Страница: 13

Блог

Web Мастерская

Как выводить 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 xlink:href="sprite.svg#sprite1"></use>
</svg>

.nameClass {

...

Жалоба

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

Библиотека JS

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

Допустим есть у нас такой блок (Без тегов внутри него):

<div id="blockID"></div>

Его та нам и надо проверить. Для этого используем следующее условие:

if ($('#blockID').html().trim() == '') {
	// Блок пустой | Действие при пустом блоке
}

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

Жалоба

MySQL: Как произвести замену строки по всей таблице

MySQL

Потребовалось мне произвести замену строки size:: на size:, сразу во всех записях, в поле text, таблицы comment. В чём мне помог запрос ниже:

UPDATE `comment`
SET `text` = replace(`text`, 'size::', 'size:');

Одно мгновение и замена произведена, во всех записях сразу.

Если надо заменить сразу несколько строк/подстрок, можно делать так:

UPDATE `comment` SET `text` = replace(`text`, '[size:1]', '[title]');
UPDATE `comment` SET `text` = replace(`text`, '[size:2]', '[title]');
UPDATE `comment` SET `text` = replace(`text`, '[size:3]', '[title]');
UPDATE `comment` SET `text` = replace(`text`, '[/size]', '[/title]');

...

Жалоба

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>....

Жалоба