Blog. Just Blog

Web-мастеру и не только

Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал Web-мастеру и не только - Карта сайта

Отслеживание изменений в DOM через Mutation Events и MutationObserver

04.03.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

Отслеживание изменений в DOM через Mutation Events и MutationObserver

Время статичных web-страниц уже давно прошло, теперь немалая часть контента подгружается динамически уже после загрузки основной страницы. Соответственно, эти данные недоступны для скриптов, отслеживающих загрузку через события типа onload или DOMContentLoaded. Может возникнуть вопрос: а зачем вообще это отслеживать? Ну, например, чтобы при помощи браузерных расширений и пользовательских скриптов удалять со страниц динамически подгружаемую рекламу, которую другими способами не заблокировать. К счастью, для отслеживания любых изменений, вносимых в структуру DOM, есть как минимум два инструмента. Речь идет о событиях Mutation Events и интерфейсе MutationObserver.

Читать статью целиком »
Просмотров: 777 | Комментариев: 2

Плавное появление надписи при наведении на картинку

21.12.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.
  1. <style type="text/css">
  2. .cool_img {
  3.     displayinline-block;
  4.     positionrelative;
  5.     text-aligncenter;
  6.     overflowhidden;
  7.     border-radius5px;
  8. }
  9.  
  10. .cool_img .info {
  11.     positionabsolute;
  12.     bottom0;
  13. }
  14.  
  15. .cool_img .info span {
  16.     displayblock;
  17.     positionrelative;
  18.     top130px;
  19.     color#FFFFFF;
  20.     background#000000;
  21.     transition-delay0;
  22.     transition-duration0.3s;
  23. }
  24.  
  25. .cool_img .info .info_title {
  26.     font-size18px;
  27.     font-weightbold;
  28.     padding5px;
  29.     border-radius5px 5px 0 0;
  30.     opacity0.8;
  31. }
  32.  
  33. .cool_img .info .info_text {
  34.     font-size12px;
  35.     padding10px;
  36.     opacity0.6;
  37. }
  38.  
  39. .cool_img:hover .info span, .cool_img:focus .info span {
  40.     top0;
  41. }
  42.  
  43. .cool_img:hover .info .info_title {
  44.     transition-delay0.15s;
  45. }
  46.  
  47. .cool_img:hover .info .info_text {
  48.     transition-delay0.25s;
  49. }
  50. </style>
Если описания планируются очень объемные, то смещение элементов span с текстом надо будет сдвинуть вниз на нужное количество пикселов. Для создания эффекта используется CSS-анимация через свойства transition, поэтому для старых браузеров придется замутить что-нибудь попроще или задействовать браузерные префиксы типа "-webkit-", "-moz-" и т.д.

Читать статью целиком »
Просмотров: 1250 | Комментариев: 0

Создание скриншотов сайтов с помощью Headless Chrome

23.11.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Создание скриншотов сайтов с помощью Headless Chrome

Ранее я рассказывал о сервисах для создания скриншотов сайтов, но время не стоит на месте. Если у вас в распоряжении есть свой сервер, то вы легко сможете организовать собственный сервис для создания скриншотов сайтов. Начиная с версии 59, браузер Chrome может работать в так называемом "безголовом" режиме, то есть он реально не отрисовывает содержимое web-страницы, а все формирует в памяти. При этом он работает из командной строки и может быть установлен на сервер.

Читать статью целиком »
Просмотров: 992 | Комментариев: 7

Стилизация недоступных ссылок на картинки

21.11.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:
  1. <style type="text/css">
  2. img:before {
  3.     content"Извините, изображение " attr(alt" недоступно";
  4.     color#FF0000;
  5.     displayblock;
  6.     margin-bottom5px;
  7. }
  8.  
  9. img:after {
  10.     content"Источник: " attr(src);
  11.     color#0000FF;
  12.     displayblock;
  13.     margin-top5px;
  14. }
  15. </style>
Над "битой" картинкой будет уведомление, что она недоступна, и показано название картинки из атрибута alt. А под картинкой будет указана ссылка, по которой она должна находиться.

Читать статью целиком »
Просмотров: 637 | Комментариев: 2

Определение состояния подключения к сети на JavaScript

21.10.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Определение состояния подключения к сети на JavaScript

В очередной раз бродя по интернетам, я наткнулся на упоминание электронного журнала The Disconnect. Суть его в том, что контент сайта становится доступен только когда пользователь отключится от интернета. Стоит включить соединение обратно и текст вновь скрывается. Весь этот эпатаж я оставлю на совести разработчика, но мне стало интересно, как реализована проверка состояния подключения.

Читать статью целиком »
Просмотров: 1092 | Комментариев: 3

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0017 сек.) / Память: 4.75 Mb
Наверх