Посты категории: Создание сайтов
Я не автор этого кода, нашел в сети, мне очень понравилась. Поэтому решил использовать на сайте Gravitsapa.info, тут же можно посмотреть как она работает. Но изобретать тут особо и нечего… Код не нагружает сайт, прокрутка вверх отрабатывает без ошибок и тормозов. Легко модернизировать в более сложный функционал, или накинуть других параметров. Протестировано на смартфоне, в адаптивный дизайн вписывается отлично. И ещё, если у вас есть длинные страницы или статьи, рекомендую использовать эту кнопку без сомнений!
Что бы у Вас на сайте заработала такая прекрасная кнопка “Наверх” с плавной прокруткой, выполните простую инструкцию:
- Между <head></head> вставляем этот код:
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
- Прямо перед </body> вставляем этот код:
<div id="toTop" >Наверх</div>
- В файле стилей .css вставляем этот код (цвета и другие стили можно изменить на свои):
#toTop {
width: 70px;
background: #2487ca9c;
text-align: center;
padding: 5px;
position: fixed;
bottom: 20px;
left: 15px;
cursor: pointer;
display: none;
color: #fff;
height: 20px;
vertical-align: middle;
}
Теперь и у Вас на сайте эта прекрасная полезная кнопочка, которой бывает очень не хватает. Делитесь статьёй в соц. сетях 😉 Спасибо!
Подключать будем библиотеку отсюда. Там же можно посмотреть demo. Называется Lightbox2 от разработчика Lokesh Dhakar. Достаточно простое решение, не перегруженное, изображения в лайтбоксе будут адаптироваться под любые размеры мониторов на любых мобильных устройствах.
Так же отмечу, что из всех js плагинов лайтбоксов, которые уже протестировал, у этого варианта, по моему мнению, достаточно высокое быстродействие. По сути на скорость загрузки страницы не влияет, а это является не маловажным фактором.
Итак, делаем всё по инструкции для подключения Lightbox изображений в Вашей теме WordPress:
- Скачиваем и распаковываем архив с файлами Лайтбокса.
- Ищем папку “src”, в ней есть три папки, которые нужно скопировать в корень папки Вашего шаблона WordPress.
- Затем в файле header.php между нужно подключить файлы Лайтбокса вот так:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/lightbox.css">
<script src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script>
- После этого в файл functions.php нужно вставить этот код:
<?php
add_filter('the_content', 'addrellightbox');
function addrellightbox($content) {
global $post;
$pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i";
$replacement = '<a$1href=$2$3.$4$5 data-lightbox="image"$1 title="'.$post->post_title.'"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
?>
- Изображения в посты нужно вставлять как медиафайл:
Теперь у Вас есть красивый, простой, адаптивный Lightbox для изображений 😉 Пишите комменты, делитесь статьёй в соц. сетях.
В некоторых статьях блога Gravitsapa.info присутствую видео с Youtube, которые вставлены самым обычным способом:
Видео вставленное на сайт просто с таким кодом не является адаптивным. На мобильных устройствах будет выходить за рамки экрана. В интернетах находил решение, где данный iframe помещают в div контейнер с любым классом и задают css стили для адаптивности. Но мне такое решение не понравилось, так как если на сайте уже присутствует множество встроенных видео с Ютуба, то слишком трудоёмко будет каждое оборачивать в div блок. Поэтому был написан простенький скрипт, который находит на странице такое видео и задаёт ему ширину 100% вместо фиксированной ширины.
Для моего сайта скрипт выглядит следующим образом:
<script>
$(document).ready(function() {
var vidos = $('article iframe'); //article текущий блок в котором iframe
vidos.attr('width','100%');
});
</script>
Вставить его можно между <head>…</head>
Этот скрипт подходит для любого другого сайта. Нужно лишь “article” заменить на класс или ид того блока, где находится iframe. Например, если код будет выглядеть так:
<div class="post"><iframe width="560" height="315" src="https://www.youtube.com/embed/2Vo0lhfE8Jo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
…то в скрипте вместо article iframe нужно написать .post iframe
Таким образом редактировать ничего не нужно, никакими дополнительными div блоками оборачивать видео ненужно и писать дополнительные CSS стили тоже не нужно. Решение простое и универсально, за это спасибо программисту от бога @only_darkangel (Телеграм).
Смотреть полностью
Данное задание размещено на одном из крупнейших ресурсов СНГ в качестве теста на фронтендщика…
Итак! Имеем блок с текстом:
<div class="example">Дважды <span>два</span> - пять</div>
Задание изложено следующим образом:
Дан фрагмент HTML. Используя только нативный JavaScript исправьте текст, следующий после тега <span> так, чтобы элемент <span> остался незатронутым.
Решение данной задачи следующее:
<script>
document.getElementsByClassName('example')["0"].childNodes[2].textContent = " - шесть";
</script>
И короткое разъяснение кода для понимания того, что происходит:
- document – наша страничка
- .getElementsByClassName('example') – выбираем содержимое контейнера с классом example
- ["0"] – имеем массив содержимого контейнера, и нам нужен его первый элемент
- .childNodes – в этом объекте находятся дочерние элементы, их трое: текст до спана, спан, текст после спана.
- [2] – выбираем текст после спана
- .textContent = " – шесть" – присваиваем этому элементу свой текст
Автор решения @only_darkangel (Telegram).
Спасибо за внимание 😉
Итак, имеем менюху с выпадающими списками. В стилях это реализовано как display: none по умолчанию для подменю. И display: block для подменю при hover на основное меню.
Хотим сделать анимацию и задержку появления меню. Используем стиль transition с параметрами или просто стиль паузы transition-delay. Но из-за того, что подменю изначально назначено display: none, то transition работать не будет.
Для этого вместо display: none и display: block будем использовать opacity: 0; visibility: hidden; и opacity: 1; visibility: visible;.
Пример реализации можно посмотреть тут.
- Создаем файл progress.js, помещаем его в удобную папку на сайте и подключаем на всех страницах между <head></head> вот так <script src="полный_адрес_к_файлу/progress.js"></script>
- В файл progress.js вставляем этот код:
$(function() {
var $progress = $('#progress');
$(document).ajaxStart(function() {
if ($progress.length === 0) {
$progress = $('<div><dt/><dd/></div>').attr('id', 'progress');
$("body").append($progress);
}
$progress.width((50 + Math.random() * 30) + "%");
});
$(document).ajaxComplete(function() {
$progress.width("100%").delay(200).fadeOut(400, function() {
$progress.width("0%").delay(200).show();
});
});
$(document).ready(function(){
$.getJSON('https://jsonip.com');
});
});
- Дописываем такие стили, которые можно подправить под свой дизайн:
Смотреть полностью
Итак, коротко и ясно… Ниже способ реализации простого выезжающего меню. Код сразу с комментами, что бы было понятно. Тут DEMO. Смысл в том, что нажимаем на значок ☰, и слева выезжает менюшка. Значек бургера превращается в крестик, как в Телеграме 🙂 Затем нажимаем на крестик и менюшка заезжает влево. Всё очень простенько… При желании код и стили легко модернизировать, изменить цвета и размеры. Так же если хотите переместить меню в правую часть, то в стилях просто все left замените на right. Опять же в DEMO песочнице можно экспериментировать. Преимущество такого меню в том, что его можно внедрить в большинство шаблонов.
Вот сама вёрстка:
<!-- input нужен для того, что бы в дальнейшем задать стили иконке ☰ по событию checked, то есть когда меню будем открыать и закрыать -->
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<!-- Далее вёрстка самой иконки. Разделена на спаны, что бы красиво превращать в крестик при открытии (почти как в Телеграме :) -->
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
<!-- Менюшка раскрывающаяся и скрывающаяся -->
<ul class="hidden-menu">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
<!-- А затем уже контент странички. В примере просто зашголовок, что бы было видно, как менюшка нахлёстом выдвигается -->
<header>
<h1>ПРОСТОЕ ВЫЕЗЖАЮЩЕЕ БОКОВОЕ МЕНЮ</h1>
</header>
Далее CSS стили:
Смотреть полностью
Идея предельно проста и понятна… Предположим, что хотим смену цвета фона страницы при прокрутке каждых 500px от верха. К сожалению найти готовый простой вариант, поддающийся модернизации, не удалось найти. Поэтому совместно с @only_darkangel
был написан элементарный вариант:
Сперва подключим библиотеки в head, если они ещё не подключены
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
Затем пару строк стилей
<style type="text/css">
body {
background: #fff;
height:4000px;
}
</style>
Далее скрипт, который и будет менять цвет страницы при прокрутке.
Цифра 400 задаёт скорость смены цвета (0,4 секунды). В самом низу цифра 451 задаёт время проверки положения скролла, данная цифра должна быть всегда больше времени скорости цвета.
Смотреть полностью
Для вывода даты публикации записи в WordPress обычно используется функция <?php the_date(); ?>. Но она используется для вывода даты публикации группы постов одного дня. То есть если в один и тот же день было 2 записи, то для первой дата выведется, а для второй нет.
В моём случае эта функция используется в микроразметке поста в таком формате <meta itemprop="datePublished" content="<?php the_date(); ?>">. Со временем я решил вывести видимую дату публикацию записи, и судя из выше сказанного, второй раз функция <?php the_date(); ?> уже ничего не выводила. Поэтому в просторах интернетов было найдено решение использовать функцию <?php the_time("d M Y"); ?> – она выводит для каждой записи индивидуально её дату публикации, а не для группы записей одного дня.
Сегодня на gravitsapa.info сделал редизайн. Добавил серости, флэтовости и мрачности 🙂 На самом деле всё было выполнено для максимально комфортного чтения и быстрой скорости загрузки страниц.
Но мне часто писали на почту с просьбой поделится старым шаблоном. Хоть и так его легко можно было содрать, всё равно ни кому не отправлял. Но теперь готов бесплатно раздать всем желающим…
Особенности шаблона GRAVI1:
- Простота дизайна
- Только необходимый код в файлах, ничего лишнего
- Нет лишних файлов
- Внедрена микроразметка
- Шаблон без настроек и прочих заморочек
- Код полностью валидный, основан на HTML5
- Адаптивный дизайн на медиа-запросах
- Реализован хук для скрытия системных ссылок, rss, лишних скриптов и прочего ненужного вордпрессовского кода
- В finctions.php каждая функция прокомментирована, не придётся ломать голову
Дэмо нет, есть скрин 🙂 СКАЧАТЬ ШАБЛОН GRAVI1
Я не автор этого кода, нашел в сети, мне очень понравилась. Поэтому решил использовать на сайте Gravitsapa.info, тут же можно посмотреть как она работает. Но изобретать тут особо и нечего… Код не нагружает сайт, прокрутка вверх отрабатывает без ошибок и тормозов. Легко модернизировать в более сложный функционал, или накинуть других параметров. Протестировано на смартфоне, в адаптивный дизайн вписывается отлично. И ещё, если у вас есть длинные страницы или статьи, рекомендую использовать эту кнопку без сомнений!
