Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

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

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

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

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

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

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

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

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

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

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

Раскрытие текста при нажатии на ссылку

13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.

Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Code (HTML) : Убрать нумерацию
  1. <div class="textbox" id="mytext">
  2. Тут находится большой текст, который мы должны показать при нажатии на ссылку
  3. </div>
  4. <div>
  5.     <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
  6.     return false;">Посмотреть весь текст</a>
  7. </div>
Что происходит при нажатии на ссылку? Блоку текста просто добавляется класс "opened". И да, это не обязательно должна быть именно ссылка, а любой HTML-элемент, который может обработать событие onclick. Теперь таблица стилей. Для удобства понимания я оставил только те параметры, которые относятся непосредственно к функционированию раскрываемых блоков.
Code: Убрать нумерацию
  1. <style type="text/css">
  2. .textbox {
  3.     overflow: hidden;
  4.     height: 100px;
  5.     border: 1px dashed #A0A0A0;
  6. }
  7. .opened {
  8.     overflow: auto;
  9.     height: auto;
  10. }
  11. .opened+div {
  12.     display: none;
  13. }
  14. </style>
Первоначально свернутый блок имеет высоту 100px, а свойство overflow: hidden не дает его содержимому выходить за эти размеры. При добавлении класса opened высота и перекрытие блока сбрасываются к дефолтным, в результате чего он раскрывается на всю высоту его содержимого. Последнее правило CSS скрывает уже ненужный блок со ссылкой.

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

Получение всех функций JavaScript на странице

21.07.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Иногда в процессе разработки появляются странные задачи. Вот и на этот раз возникла необходимость узнать все пользовательские функции JavaScript, которые задействованы на странице. Немного колдунства и получился вот такой код:
Code (JavaScript) : Убрать нумерацию
  1. (function() {
  2.     var source;
  3.     for (var method in window) {
  4.         if (typeof window[method]=="function" && window.hasOwnProperty(method)) {
  5.             // Текст функции
  6.             source=Function.prototype.toString.call(eval(method));
  7.             // Пропускаем нативные функции
  8.             if ((/\{\s*\[native code\]\s*\}/).test(source)) { continue; }
  9.             // Вывести название и текст функции
  10.             document.write('<pre>');
  11.             document.write('<div><b>'+method+'</b>:</div>');
  12.             document.write(source);
  13.             document.write('</pre>');
  14.         }
  15.     }
  16. }());
На выходе вы получите список всех функций за исключением нативных. Определение нативных функций предельно простое, делалось под конкретную задачу, если надо чтобы было красиво, то вам сюда. Пример работы скрипта вы можете посмотреть на демонстрационной странице.

Просмотров: 1674 | Комментариев: 0

Исследование защиты программы 1st JavaScript Editor

09.01.2019 | Категория: Темная сторона Силы | Автор: ManHunter

Скриншот программы 1st JavaScript Editor

1st JavaScript Editor - редактор для начинающих и профессиональных web-разработчиков, поддерживающий синтаксис JavaScript, HTML, CSS, VBScript, PHP и ASP. Перечислять все его возможности я не буду, вы можете посмотреть их на офсайте, скажу только, что они весьма обширны. Без регистрации редактор работает три недели, после чего придется обратиться в ближайшую кассу. Или придется прочитать эту статью.

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

01 02 03 04 05 06 07 08 09 ... 17
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Я в Telegram
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (35), AJAX (5), Assembler (386), COM (44), CSS (46), Exif (15), FASM (9), Firefox (7), HDD (18), Hello Teddy (10), HTML (56), iconBIT (4), JavaScript (85), MySQL (13), Nikon (19), PDF (12), PHP (128), Samsung (6), SEO (12), Sublime Text (9), Telegram (5), TintonLife (4), UGREEN (6), Windows 7 (68), аккумуляторы (24), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (35), варенье (22), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (140), выпечка (34), выставки (131), генератор ПСЧ (10), графика (124), десерты (31), Египет (9), заготовки на зиму (47), закуска (23), закуска к пиву (26), зарядные устройства (25), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (341), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (30), ледяные скульптуры (6), мои программы (70), мониторы (8), музеи (86), мультимедиа (90), мясо (67), напитки (14), ноутбуки (9), обфускация (7), окна (71), оформление сайта (53), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (145), полезные функции (49), прохождения (4), процессы (27), птица (28), путешествия (26), распаковка (22), реверсинг (54), регулярные выражения (5), рыба (35), салаты (20), сброс триала (4), сеть (40), система (182), Сокольники (8), соусы (16), супы (15), телефоны (10), Тунис (6), умный дом (29), файлы справки (7), фаст-фуд (20), фестиваль цветов (5), флешки (7), фото (23), хеши (24), числа (8), юмор (12), яйца (21), Яндекс (25)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 38,154 раза
<< 2026 - МАЙ >>
Пн Вт Ср Чт Пт Сб Вс
        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
День памяти жертв депортации народов Крыма
День Балтийского флота ВМФ России
Международный день музеев
День Розовой Пантеры
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 320
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

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