Blog. Just Blog

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

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

Правильное поле для ввода паролей

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

Правильное поле для ввода паролей

Исторически так сложилось, что символы в полях для ввода пароля в программах и на сайтах заменяют "звездочками" или какими-нибудь другими символами. Хорошо это или плохо, однозначно сказать сложно. На эту тему было уже немало споров, но к единому мнению оппоненты так и не пришли. С одной стороны вроде бы все логично, вводимый пароль никто не видит, безопасность, приватность, паранойя и все такое. Но с другой стороны это ужасно неудобно, можно ошибиться буквой, ввести пароль не в том регистре или не в той раскладке, часто при копировании паролей из текста писем или с сайтов в конце захватывается лишний пробел или перенос строки, где-то не вовремя проявит инициативу Punto Switcher, при регистрации на сайтах надо заводить еще одно поле для подтверждения пароля, ну и так далее. В открытом текстовом поле для ввода пароля такие ошибки были бы видны сразу.

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

Динамическое изменение favicon сайта в браузере

24.04.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Ни для кого не секрет, как на сайт добавляется иконка, которая отображается в адресной строке браузера. Достаточно прописать ссылку на нее в заголовке HTML-страницы:
Code (HTML) : Убрать нумерацию
  1. <html>
  2.   <head>
  3.     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  4.   <head>
  5.   <body>
  6.   ...
  7.   </body>
  8. </html>
С добавлением никаких сложностей нет. А вот можно ли динамически поменять иконку после того, как страница загружена? Первое, что приходит в голову, это присвоить тегу link с иконкой какой-нибудь id и затем попробовать поменять его свойства через DOM. Увы, такой способ не срабатывает. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так:
Code (JavaScript) : Убрать нумерацию
  1. <script type="text/javascript">
  2. // Ссылка на файл новой иконки
  3. var icon='new_favicon.ico';
  4.  
  5. var head = document.getElementsByTagName('head')[0];
  6.  
  7. // Найти и удалить старую иконку из тега HEAD
  8. var links = head.getElementsByTagName('link');
  9. for (var i = 0; i < links.length; i++) {
  10.     var lnk = links[i];
  11.     if (lnk.rel=='shortcut icon') {
  12.         head.removeChild(lnk);
  13.     }
  14. }
  15.  
  16. // Добавить новую иконку
  17. var link = document.createElement('link');
  18. link.setAttribute('href',icon);
  19. link.setAttribute('type','image/x-icon');
  20. link.setAttribute('rel','shortcut icon');
  21. head.appendChild(link);
  22. </script>
Метод кроссбраузерный и самодостаточный, не требует никаких сторонних библиотек. Таким способом, например, можно оповестить пользователя о каком-нибудь событии, когда вкладка со страницей не активна. Для истинных извращенцев есть даже игра в favicon. Главное не злоупотреблять анимацией в рабочих проектах.

Просмотров: 11177 | Комментариев: 14

Календарь на JavaScript

02.03.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из рабочих проектов мне потребовался календарик на JavaScript. Можно было, конечно, поискать что-то готовое, но гораздо приятнее написать собственный вариант. В результате был написан вот такой кроссбраузерный скрипт календаря, который легко дополняется любыми нужными функциями. Например, в рабочем проекте была добавлена проверка, чтобы пользователь не мог выбрать дни и листать месяцы далее определенной даты. Здесь я выкладываю только базовый вариант скрипта без дополнительных наворотов. Код подробно прокомментирован, с его пониманием проблем быть не должно.
Code (JavaScript) : Убрать нумерацию
  1. // Скрипт календарика с возможностью выбора даты
  2. calendar = {};
  3.  
  4. // Названия месяцев
  5. calendar.monthName=[
  6.   'Январь', 'Февраль', 'Март', 'Апрель',
  7.   'Май', 'Июнь', 'Июль', 'Август',
  8.   'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
  9. ];
  10.  
  11. // Названия дней недели
  12. calendar.dayName=[
  13.   'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'
  14. ];
  15.  
  16. // Выбранная дата
  17. calendar.selectedDate = {
  18.   'Day' : null,
  19.   'Month' : null,
  20.   'Year' : null
  21. };
  22.  
  23. // ID элемента для размещения календарика
  24. calendar.element_id=null;
  25.  
  26. // Выбор даты
  27. calendar.selectDate = function(day,month,year) {
  28.   calendar.selectedDate={
  29.     'Day' : day,
  30.     'Month' : month,
  31.     'Year' : year
  32.   };
  33.   calendar.drawCalendar(month,year);
  34. }
  35.  
  36. // Отрисовка календарика на выбранный месяц и год
  37. calendar.drawCalendar = function(month,year) {
  38.   var tmp='';
  39.   tmp+='<table class="calendar" cellspacing="0" cellpadding="0">';
  40.  
  41.   // Месяц и навигация
  42.   tmp+='<tr>';
  43.   tmp+='<td class="navigation" '+
  44.        'onclick="calendar.drawCalendar('+(month>1?(month-1):12)+
  45.        ','+(month>1?year:(year-1))+');">&#9668;<\/td>';
  46.   tmp+='<td colspan="5" class="navigation" '+
  47.        'onclick="calendar.drawCalendar('+
  48.        calendar.selectedDate.Month+','+
  49.        calendar.selectedDate.Year+');">'+
  50.        calendar.monthName[(month-1)]+'&nbsp;-&nbsp;'+year+'<\/td>';
  51.   tmp+='<td class="navigation" '+
  52.        'onclick="calendar.drawCalendar('+(month<12?(month+1):1)+
  53.        ','+(month<12?year:(year+1))+');">&#9658;<\/td>';
  54.   tmp+='<\/tr>';
  55.  
  56.   // Шапка таблицы с днями недели
  57.   tmp+='<tr>';
  58.   tmp+='<th>'+calendar.dayName[0]+'<\/th>';
  59.   tmp+='<th>'+calendar.dayName[1]+'<\/th>';
  60.   tmp+='<th>'+calendar.dayName[2]+'<\/th>';
  61.   tmp+='<th>'+calendar.dayName[3]+'<\/th>';
  62.   tmp+='<th>'+calendar.dayName[4]+'<\/th>';
  63.   tmp+='<th class="holiday">'+calendar.dayName[5]+'<\/th>';
  64.   tmp+='<th class="holiday">'+calendar.dayName[6]+'<\/th>';
  65.   tmp+='<\/tr>';
  66.  
  67.   // Количество дней в месяце
  68.   var total_days = 32 - new Date(year, (month-1), 32).getDate();
  69.   // Начальный день месяца
  70.   var start_day = new Date(year, (month-1), 1).getDay();
  71.   if (start_day==0) { start_day=7; }
  72.   start_day--;
  73.   // Количество ячеек в таблице
  74.   var final_index=Math.ceil((total_days+start_day)/7)*7;
  75.  
  76.   var day=1;
  77.   var index=0;
  78.   do {
  79.     // Начало строки таблицы
  80.     if (index%7==0) {
  81.       tmp+='<tr>';
  82.     }
  83.     // Пустые ячейки до начала месяца или после окончания
  84.     if ((index<start_day) || (index>=(total_days+start_day))) {
  85.       tmp+='<td class="grayed">&nbsp;<\/td>';
  86.     }
  87.     else {
  88.       var class_name='';
  89.       // Выбранный день
  90.       if (calendar.selectedDate.Day==day &&
  91.           calendar.selectedDate.Month==month &&
  92.           calendar.selectedDate.Year==year) {
  93.         class_name='selected';
  94.       }
  95.       // Праздничный день
  96.       else if (index%7==6 || index%7==5) {
  97.         class_name='holiday';
  98.       }
  99.       // Ячейка с датой
  100.       tmp+='<td class="'+class_name+'" '+
  101.            'onclick="calendar.selectDate('+
  102.            day+','+month+','+year+');">'+day+'<\/td>';
  103.       day++;
  104.     }
  105.     // Конец строки таблицы
  106.     if (index%7==6) {
  107.       tmp+='<\/tr>';
  108.     }
  109.     index++;
  110.   }
  111.   while (index<final_index);
  112.  
  113.   tmp+='<\/table>';
  114.  
  115.   // Вставить таблицу календарика на страницу
  116.   var el=document.getElementById(calendar.element_id);
  117.   if (el) {
  118.     el.innerHTML=tmp;
  119.   }
  120. }
Скрипт рисует таблицу с календарем на выбранный месяц и год, с названием месяца в заголовке, а также с кнопками листания на следующий и предыдущий месяц. Суббота и воскресенье выделены цветом. Кликнув на любую дату, пользователь может выбрать ее для дальнейшей обработки в других скриптах. Клик по названию месяца в заголовке возвращает календарь на месяц, в котором находится выбранная дата.

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

Анимированное меню с вкладками на JavaScript

26.01.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Этот скрипт - небольшая доработка меню с вкладками, которое я описывал в одной из своих предыдущих статей. Я решил добавить в него эффект анимации: при наведении курсора на вкладку она плавно поднимается над строкой меню, а при выходе курсора за пределы вкладки плавно опускается обратно. Главная фишка, чтобы анимация работала параллельно и независимо для каждой вкладки. Начнем с разметки, она очень похожа на разметку из предыдущей статьи, но с одним дополнением - строка меню дополнительно обернута в контейнер фиксированной высоты, который имеет стиль overflow:hidden. В остальном все то же самое.
Code (HTML) : Убрать нумерацию
  1. <div id="over_menu">
  2.     <div id="menu">
  3.         <a href="#" class="viramaina" id="menu1">Information</a>
  4.         <a href="#" class="viramaina" id="menu2">Products</a>
  5.         <a href="#" class="viramaina" id="menu3">Do!</a>
  6.         <a href="#" class="viramaina" id="menu4">Payments</a>
  7.         <a href="#" class="viramaina" id="menu5">Exit</a>
  8.     </div>
  9. </div>
  10. <div id="content">
  11. lorem ipsum dolor sit amet
  12. </div>
Таблица стилей тоже похожа. Главное отличие в том, что вкладки спозиционированы относительно строки меню, имеют высоту больше высоты строки меню и изначально смещены вниз под обрез верхней границы строки меню. Такая верстка позволит смещать вкладки по вертикали, достигая нужного эффекта.
Code (HTML) : Убрать нумерацию
  1. #over_menu {
  2.     height: 50px;
  3.     overflow: hidden;
  4. }
  5. #menu {
  6.     position: relative;
  7.     height: 30px;
  8.     margin-top: 15px;
  9. }
  10. .viramaina {
  11.     position: relative;
  12.     height: 45px;
  13.     border: 2px solid #909090;
  14.     background: #E0E0E0;
  15.     color: #000000;
  16.     float: left;
  17.     padding: 5px 10px 0 10px;
  18.     border-radius: 16 16 0 0;
  19.     font-weight: bold;
  20.     font-family: Arial;
  21.     text-decoration: none;
  22. }
  23. a.viramaina:hover {
  24.     background: #FFFFFF;
  25.     color: #FF0000;
  26. }
  27. #content {
  28.     font-size: 16px;
  29.     border: 2px solid #909090;
  30.     padding: 20px;
  31.     border-radius: 0 16 16 16;
  32. }
Теперь немного теоретической части, как это меню должно работать. На каждую вкладку устанавливаются два обработчика событий - перемещение курсора над вкладкой и выход курсора за ее границы. При заходе курсора на вкладку устанавливается персональный таймер, по которому вкладка плавно перемещается вверх с шагом в 1 пиксел до определенного значения. При подъеме вкладки до нужной высоты таймер сбрасывается. При выходе курсора за пределы вкладки устанавливается новый таймер, по которой она смещается обратно в прежнее положение. Идентификатор таймера, сдвиг и направление сдвига хранятся как свойства элемента вкладки.

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

Эффект параллакса на JavaScript

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

Эффект параллакса на JavaScript

Эффект параллакса хорошо известен в астрономии, стрелковом деле и, как ни странно, в современном веб-дизайне. Для начала давайте разберемся, что же такое параллакс вообще. Вот что нам говорят словари.


Параллакс - изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.


В веб-дизайне эффект параллакса используется в неравномерном перемещении фона, а также ближних объектов относительно дальних на многослойном изображении, что создает иллюзию объема. Это может быть вертикальный параллакс, когда при прокрутке страницы сайта фон перемещается медленнее ее содержимого, или же псевдоанимация в шапке сайте или рекламном блоке, которая активизируется при движении мыши.

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

01 02 03 04 05 06 07 08 09 10 11
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Я в Telegram
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (33), AJAX (5), Assembler (379), COM (44), CSS (45), Exif (15), FASM (9), Firefox (7), HDD (17), Hello Teddy (10), HTML (54), iconBIT (4), JavaScript (78), MySQL (13), Nikon (19), PDF (10), PHP (125), Samsung (6), SEO (12), Sublime Text (9), Telegram (5), TintonLife (4), UGREEN (4), Windows 7 (67), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (21), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (133), выпечка (31), выставки (123), генератор ПСЧ (10), графика (122), десерты (31), Египет (9), заготовки на зиму (47), закуска (23), закуска к пиву (26), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (327), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (28), ледяные скульптуры (6), мои программы (70), мониторы (6), музеи (80), мультимедиа (83), мясо (66), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (52), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (136), полезные функции (47), прохождения (4), процессы (25), птица (24), путешествия (26), распаковка (22), реверсинг (53), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (179), Сокольники (8), соусы (16), супы (14), телефоны (10), Тунис (6), умный дом (15), файлы справки (7), фаст-фуд (19), фестиваль цветов (5), флешки (6), фото (23), хеши (18), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 36,796 раз
<< 2025 - ИЮНЬ >>
Пн Вт Ср Чт Пт Сб Вс
            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            
Международный день блогера
День мебельщика
День пивовара
День работника миграционной службы России
Всемирный день вязания на публике
Всемирный день жонглирования
Международный банный день
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

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

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