Любой код из заметок тестировался ТОЛЬКО в последних версиях популярных браузеров.
Ибо, пока разработчики поддерживать совместимость со старыми браузерами - люди будут использовать старые браузеры.
|
1 2 3 4 5 6 7 8 |
<div class="columns"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.columns { /* Настройки */ --min-column-size: 200px; --max-column-count: 4; --gap: 20px; /* Вычисления */ --breakpoint: calc(var(--min-column-size) * var(--max-column-count) + (var(--gap) * (var(--max-column-count) - 1))); --column-size: calc((100% / var(--max-column-count)) - var(--gap)); display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(max(var(--column-size), (100% - var(--breakpoint)) * -999), 100%), 1fr)); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="cover"> <div class="text"> <div class="text_inner"> <p>...</p> </div> </div> <button type="button" class="text_more"> <div>Читать далее</div> <div>Скрыть часть</div> </button> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.text { display: grid; grid-template-rows: 12em; transition: all 300ms linear; } .text_inner { position: relative; overflow: hidden; } .text.shown { grid-template-rows: 1fr; } .text_inner::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2em; background: rgb(255,255,255); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); transition: all 300ms linear; opacity: 1; visibility: visible; } .text.shown .text_inner::after { opacity: 0; visibility: hidden; } .text_more.active div:nth-child(1), .text_more:not(.active) div:nth-child(2) { display: none; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
document.addEventListener('DOMContentLoaded', function(event) { // Показать / Скрыть часть текста [].forEach.call(document.querySelectorAll('.cover'), function(cover) { let text = cover.querySelector('.text'); [].forEach.call(cover.querySelectorAll('.text_more'), function(toggle) { toggle.addEventListener('click', function(e) { e.preventDefault(); if (text.classList.contains('shown')) { text.classList.remove('shown'); toggle.classList.remove('active'); text.scrollIntoView(); } else { text.classList.add('shown'); toggle.classList.add('active'); } }); }); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
document.addEventListener('DOMContentLoaded', function(event) { var act; window.addEventListener('resize', function(e) { clearTimeout(act); act = setTimeout(function() { // script }, 100); }); window.dispatchEvent(new Event('resize')); }); |
Нумерация дочерних списков начинается с номера родителя.
|
1 2 3 4 5 6 7 8 9 10 11 |
<ol> <li>Первый уровень <ol> <li>Второй уровень <ol> <li>Третий уровень</li> </ol> </li> </ol> </li> </ol> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
ol { counter-reset: level1; list-style-type: none; } ol ol { counter-reset: level2; } ol ol ol { counter-reset: level3; } ol li { list-style-type:none; } ol li::before { counter-increment: level1; content: counter(level1) '. '; } ol ol li::before { counter-increment: level2; content: counter(level1) '.' counter(level2) ' '; } ol ol ol li::before { counter-increment: level3; content: counter(level1) '.' counter(level2) '.' counter(level3) ' '; } |
$e — jQuery элемент (объект) внутрь которого будет добавляться текст с числом.
from — начальное число (с которого начать отсчет)
to — конечное число (на котором остановить счетчик)
duration — время в миллисекундах, за которое нужно дойти до конечного числа (если не указано — смена числа будет происходить каждый 50 миллисекунд)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function animateCount($e, from, to, duration) { if (from === to) return; if ($e.hasClass('_counted')) return; let current = from, interval = duration ? Math.abs(Math.floor(duration / (to - from))) : 50, timer; $e.addClass('_counted'); timer = setInterval(function() { current += (to > from ? 1 : -1); $e.text(current); if (current == to) { clearInterval(timer); } }, interval); } |
|
1 2 3 4 5 6 7 |
:root { --main-color: #444; } .selector { color: var(--main-color); /* вторым параметром можно указать значение по умолчанию (если переменная не задана) */ } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
document.addEventListener('DOMContentLoaded', function(event) { let root = document.querySelector(':root'), styles = root.getComputedStyle(root); // Получить значение styles.getPropertyValue('--main-color') // Изменить значение root.style.setProerty('--main-color', '#777'); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* clamp(min, mid, max); min = минимально допустимый размер mid = max в относительных единицах измерения на экране, начиная с которого нужно применять max max = максимально допустимый размер Пример: 4vw ≈ 40px на экране 1024px */ .selector { clamp(20px, 4vw, 40px); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="box crumbs"> <div class="inner"> <div class="content"> <div class="crumbs_row"> <div class="crumbs_item"> <a href="#">Главная</a> </div> <div class="crumbs_sep">/</div> <div class="crumbs_item"> <a href="#">Родительская</a> </div> <div class="crumbs_sep">/</div> <div class="crumbs_item"> <div>Текущая</div> </div> </div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.crumbs { line-height: 16px; white-space: nowrap; } .crumbs .inner { position: relative; overflow: auto; } .crumbs::after { content: ''; display: block; width: 30px; height: 100%; position: absolute; top: 0; right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%); } .crumbs .content { height: 36px; /* line-height + 20px */ } .crumbs_row { display: grid; grid-auto-flow: column; padding: 0 20px; height: 16px; /* line-height */ position: absolute; top: 0; left: 0; } .crumbs_item a { display: block; border-bottom: 1px solid transparent; } .crumbs_item a:hover { border-bottom-color: #000; } .crumbs_sep { margin: 0 5px; } /* 1280px - экран после которого контентная часть перестает растягиваться по ширине */ @media (min-width: 1280px) { .crumbs_row { padding: 0 calc((100% - 1160px) / 2); /* 1160px - максимальная ширина контентной частии */ } } |
Адрес сайта (URL).index.php, указав корректный путь к файлу wp-blog-header.php, дописав имя папки в которую загружен WP .index.php (чтоб не возникала ошибка в админке)wp-content, например в view./wp-config.php объявить константы:|
1 2 |
define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/view'); define('WP_CONTENT_URL', '//' . $_SERVER['HTTP_HOST'] . '/view'); |
/wp-config.php заменить строку define( 'WP_DEBUG', false ); на:|
1 2 3 4 |
$is_master = ($_SERVER['REMOTE_ADDR'] == '000.000.000.000'); // Подставить IP define('WP_DEBUG', TRUE); define('WP_DEBUG_DISPLAY', $is_master); define('WP_DEBUG_LOG', TRUE); |
|
1 |
define('DISALLOW_FILE_EDIT', true); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
jQuery(document).ready(function($) { $W = $(window); // Меню (слежка) (function(){ var $trigs = $B.find('.nav a[href^="#"]'); if (!$trigs.length) return; var doing = false; $W.on('scroll', function() { if (doing) return; doing = true; var st = $W.scrollTop(); $trigs.each(function(i, e) { var $e = $(e), $a = $B.find('a[name="' + $e.attr('href').replace('#', '') + '"]'); if (!$a.length) return; if (st + window.innerHeight / 2 >= $a.offset().top) { if (!$e.hasClass('current')) { $trigs.removeClass('current'); $e.addClass('current'); } } }); doing = false; }); })(); }); |