Blog. Just Blog

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

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

Определение типа банковской карты по ее номеру

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

Определение типа банковской карты по ее номеру

Полезная информация в дополнение к опубликованной ранее статье о проверке корректности номера банковской карты. Помимо прочих данных, в номере карты закодирован ее тип, например, Visa, MasterCard или UnionPay. В интернетах есть информация о кодах IIN (Issuer Identification Number), надо только переложить ее на нужный вам язык программирования.

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

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

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

Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
  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. Теперь таблица стилей. Для удобства понимания я оставил только те параметры, которые относятся непосредственно к функционированию раскрываемых блоков.
  1. <style type="text/css">
  2. .textbox {
  3.     overflowhidden;
  4.     height100px;
  5.     border1px dashed #A0A0A0;
  6. }
  7. .opened {
  8.     overflowauto;
  9.     heightauto;
  10. }
  11. .opened+div {
  12.     displaynone;
  13. }
  14. </style>
Первоначально свернутый блок имеет высоту 100px, а свойство overflow: hidden не дает его содержимому выходить за эти размеры. При добавлении класса opened высота и перекрытие блока сбрасываются к дефолтным, в результате чего он раскрывается на всю высоту его содержимого. Последнее правило CSS скрывает уже ненужный блок со ссылкой.

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

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

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

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

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

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

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

21.07.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Иногда в процессе разработки появляются странные задачи. Вот и на этот раз возникла необходимость узнать все пользовательские функции 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. }());
На выходе вы получите список всех функций за исключением нативных. Определение нативных функций предельно простое, делалось под конкретную задачу, если надо чтобы было красиво, то вам сюда. Пример работы скрипта вы можете посмотреть на демонстрационной странице.

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

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

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


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

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

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

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