Blog. Just Blog

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

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

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

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 скрывает уже ненужный блок со ссылкой.

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

Градиентный фон на PHP

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

Градиентный фон на PHP

Продолжаем работать с графикой на PHP. Сегодня будем рисовать градиентную заливку фона, когда один цвет плавно перетекает в другой.

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

Получение всех функций 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. }());
На выходе вы получите список всех функций за исключением нативных. Определение нативных функций предельно простое, делалось под конкретную задачу, если надо чтобы было красиво, то вам сюда. Пример работы скрипта вы можете посмотреть на демонстрационной странице.

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

Разделенные ссылки

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


Разделенные ссылки

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

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

Как узнать размер базы MySQL

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

Как узнать размер базы MySQL

Иногда бывает нужным прикинуть размер базы MySQL, который занимает ваш проект. Например, чтобы не вылезти за ограничения хостинга или вовремя обнаружить аномальное разрастание базы в случае программной ошибки, да или просто для спортивного интереса.

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

prev 01 02 03 04 05 06 07 08 09 ... 36 next
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (21), AJAX (5), Assembler (268), COM (19), CSS (38), Exif (15), FASM (7), Firefox (7), HDD (13), Hello Teddy (9), HTML (45), iconBIT (4), JavaScript (62), MySQL (12), Nikon (19), PDF (9), PHP (97), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (64), аккумуляторы (22), аксессуары (12), анализаторы файлов (8), архиваторы (5), аттракционы (6), безопасность (50), браузеры (16), бытовая техника (9), варенье (16), ВВЦ (9), ВДНХ (9), видео (20), Воробьевы горы (6), вторые блюда (99), выпечка (18), выставки (104), генератор ПСЧ (9), графика (90), десерты (27), Египет (7), заготовки на зиму (36), закуска (19), закуска к пиву (22), зарядные устройства (22), защита (15), зоопарки (9), игры (30), иконки (20), интерфейс (22), исследование защиты (252), каша (4), клавиатура (7), Коломенское (35), консоль (5), концерты (52), Кузьминки (4), куклы (26), ледяные скульптуры (6), мои программы (62), мониторы (6), музеи (65), мультимедиа (42), мясо (42), напитки (11), ноутбуки (6), обфускация (6), окна (65), оформление сайта (45), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (107), полезные функции (34), прохождения (4), процессы (20), птица (16), путешествия (24), распаковка (14), реверсинг (46), рыба (31), салаты (17), сброс триала (4), сеть (27), система (157), Сокольники (8), соусы (7), супы (12), телефоны (7), Тунис (6), файлы справки (6), фаст-фуд (15), фестиваль цветов (5), флешки (5), фото (23), хеши (15), числа (8), юмор (12), яйца (16)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 29,751 раз
<< 2021 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
    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} Яндекс ИКС: 390
Сейчас я слушаю
---
Имя:

Сообщение:

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

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