Быстрый поиск
Введите фрагмент названия статьи для поиска
Правильное поле для ввода паролей
03.06.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Правильное поле для ввода паролей
Исторически так сложилось, что символы в полях для ввода пароля в программах и на сайтах заменяют "звездочками" или какими-нибудь другими символами. Хорошо это или плохо, однозначно сказать сложно. На эту тему было уже немало споров, но к единому мнению оппоненты так и не пришли. С одной стороны вроде бы все логично, вводимый пароль никто не видит, безопасность, приватность, паранойя и все такое. Но с другой стороны это ужасно неудобно, можно ошибиться буквой, ввести пароль не в том регистре или не в той раскладке, часто при копировании паролей из текста писем или с сайтов в конце захватывается лишний пробел или перенос строки, где-то не вовремя проявит инициативу Punto Switcher, при регистрации на сайтах надо заводить еще одно поле для подтверждения пароля, ну и так далее. В открытом текстовом поле для ввода пароля такие ошибки были бы видны сразу.
Читать статью целиком »
Просмотров: 9689 | Комментариев: 18
Календарь на JavaScript
02.03.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из рабочих проектов мне потребовался календарик на JavaScript. Можно было, конечно, поискать что-то готовое, но гораздо приятнее написать собственный вариант. В результате был написан вот такой кроссбраузерный скрипт календаря, который легко дополняется любыми нужными функциями. Например, в рабочем проекте была добавлена проверка, чтобы пользователь не мог выбрать дни и листать месяцы далее определенной даты. Здесь я выкладываю только базовый вариант скрипта без дополнительных наворотов. Код подробно прокомментирован, с его пониманием проблем быть не должно.Code (JavaScript) : Убрать нумерацию
- // Скрипт календарика с возможностью выбора даты
- calendar = {};
- // Названия месяцев
- calendar.monthName=[
- 'Январь', 'Февраль', 'Март', 'Апрель',
- 'Май', 'Июнь', 'Июль', 'Август',
- 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
- ];
- // Названия дней недели
- calendar.dayName=[
- 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'
- ];
- // Выбранная дата
- calendar.selectedDate = {
- 'Day' : null,
- 'Month' : null,
- 'Year' : null
- };
- // ID элемента для размещения календарика
- calendar.element_id=null;
- // Выбор даты
- calendar.selectDate = function(day,month,year) {
- calendar.selectedDate={
- 'Day' : day,
- 'Month' : month,
- 'Year' : year
- };
- calendar.drawCalendar(month,year);
- }
- // Отрисовка календарика на выбранный месяц и год
- calendar.drawCalendar = function(month,year) {
- var tmp='';
- tmp+='<table class="calendar" cellspacing="0" cellpadding="0">';
- // Месяц и навигация
- tmp+='<tr>';
- tmp+='<td class="navigation" '+
- 'onclick="calendar.drawCalendar('+(month>1?(month-1):12)+
- ','+(month>1?year:(year-1))+');">◄<\/td>';
- tmp+='<td colspan="5" class="navigation" '+
- 'onclick="calendar.drawCalendar('+
- calendar.selectedDate.Month+','+
- calendar.selectedDate.Year+');">'+
- calendar.monthName[(month-1)]+' - '+year+'<\/td>';
- tmp+='<td class="navigation" '+
- 'onclick="calendar.drawCalendar('+(month<12?(month+1):1)+
- ','+(month<12?year:(year+1))+');">►<\/td>';
- tmp+='<\/tr>';
- // Шапка таблицы с днями недели
- tmp+='<tr>';
- tmp+='<th>'+calendar.dayName[0]+'<\/th>';
- tmp+='<th>'+calendar.dayName[1]+'<\/th>';
- tmp+='<th>'+calendar.dayName[2]+'<\/th>';
- tmp+='<th>'+calendar.dayName[3]+'<\/th>';
- tmp+='<th>'+calendar.dayName[4]+'<\/th>';
- tmp+='<th class="holiday">'+calendar.dayName[5]+'<\/th>';
- tmp+='<th class="holiday">'+calendar.dayName[6]+'<\/th>';
- tmp+='<\/tr>';
- // Количество дней в месяце
- var total_days = 32 - new Date(year, (month-1), 32).getDate();
- // Начальный день месяца
- var start_day = new Date(year, (month-1), 1).getDay();
- if (start_day==0) { start_day=7; }
- start_day--;
- // Количество ячеек в таблице
- var final_index=Math.ceil((total_days+start_day)/7)*7;
- var day=1;
- var index=0;
- do {
- // Начало строки таблицы
- if (index%7==0) {
- tmp+='<tr>';
- }
- // Пустые ячейки до начала месяца или после окончания
- if ((index<start_day) || (index>=(total_days+start_day))) {
- tmp+='<td class="grayed"> <\/td>';
- }
- else {
- var class_name='';
- // Выбранный день
- if (calendar.selectedDate.Day==day &&
- calendar.selectedDate.Month==month &&
- calendar.selectedDate.Year==year) {
- class_name='selected';
- }
- // Праздничный день
- else if (index%7==6 || index%7==5) {
- class_name='holiday';
- }
- // Ячейка с датой
- tmp+='<td class="'+class_name+'" '+
- 'onclick="calendar.selectDate('+
- day+','+month+','+year+');">'+day+'<\/td>';
- day++;
- }
- // Конец строки таблицы
- if (index%7==6) {
- tmp+='<\/tr>';
- }
- index++;
- }
- while (index<final_index);
- tmp+='<\/table>';
- // Вставить таблицу календарика на страницу
- var el=document.getElementById(calendar.element_id);
- if (el) {
- el.innerHTML=tmp;
- }
- }
Читать статью целиком »
Просмотров: 18430 | Комментариев: 25
Анимированное меню с вкладками на JavaScript
26.01.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Этот скрипт - небольшая доработка меню с вкладками, которое я описывал в одной из своих предыдущих статей. Я решил добавить в него эффект анимации: при наведении курсора на вкладку она плавно поднимается над строкой меню, а при выходе курсора за пределы вкладки плавно опускается обратно. Главная фишка, чтобы анимация работала параллельно и независимо для каждой вкладки. Начнем с разметки, она очень похожа на разметку из предыдущей статьи, но с одним дополнением - строка меню дополнительно обернута в контейнер фиксированной высоты, который имеет стиль overflow:hidden. В остальном все то же самое.Code (HTML) : Убрать нумерацию
- <div id="over_menu">
- <div id="menu">
- <a href="#" class="viramaina" id="menu1">Information</a>
- <a href="#" class="viramaina" id="menu2">Products</a>
- <a href="#" class="viramaina" id="menu3">Do!</a>
- <a href="#" class="viramaina" id="menu4">Payments</a>
- <a href="#" class="viramaina" id="menu5">Exit</a>
- </div>
- </div>
- <div id="content">
- lorem ipsum dolor sit amet
- </div>
Code (HTML) : Убрать нумерацию
- #over_menu {
- height: 50px;
- overflow: hidden;
- }
- #menu {
- position: relative;
- height: 30px;
- margin-top: 15px;
- }
- .viramaina {
- position: relative;
- height: 45px;
- border: 2px solid #909090;
- background: #E0E0E0;
- color: #000000;
- float: left;
- padding: 5px 10px 0 10px;
- border-radius: 16 16 0 0;
- font-weight: bold;
- font-family: Arial;
- text-decoration: none;
- }
- a.viramaina:hover {
- background: #FFFFFF;
- color: #FF0000;
- }
- #content {
- font-size: 16px;
- border: 2px solid #909090;
- padding: 20px;
- border-radius: 0 16 16 16;
- }
Читать статью целиком »
Просмотров: 5470 | Комментариев: 2
Как спрятать курсор на сайте
03.09.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного аппарата с сенсорным экраном потребовалось сделать так, чтобы курсор на экране не отображался. Все клики основному приложению передавал тач-скрин, а курсор мыши только отвлекал и был лишним. Ставить дополнительные утилиты нельзя, вносить изменения в систему тоже. В моем случае задача облегчалась тем, что вся эта конструкция работала на движке Internet Explorer и кроссбраузерной универсальности не требовалось. Но в процессе решения задачи я решил поэкспериментировать с другими браузерами и вот что у меня получилось.Штатными средствами CSS просто скрыть курсор нельзя, но зато есть документированная возможность задавать свой курсор при помощи конструкции cursor: url('ваш_курсор.cur'). То есть теоретически можно создать полностью прозрачный курсор, а затем применить его на сайте в качестве пользовательского. Для этого в CSS добавляется следующее описание стилей:
Code: Убрать нумерацию
- * {
- cursor: url('transparent.cur'), auto;
- }
Из всех протестированных браузеров в точном соответствии с описаниями стандарта повел себя, как ни странно, только Internet Explorer, то есть добросовестно спрятал курсор и не показывал его ни при каких действиях на странице.
Чуть похуже справился с задачей Firefox: при перемещении по странице курсор иногда попадал в промежутки между элементами верстки, и в этот момент он становился видимым. Проблема решается изменением верстки с добавлением какого-нибудь обрамляющего элемента для всего содержимого страницы.
Читать статью целиком »
Просмотров: 12959 | Комментариев: 8
Эффект параллакса на JavaScript
11.08.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект параллакса на JavaScript
Эффект параллакса хорошо известен в астрономии, стрелковом деле и, как ни странно, в современном веб-дизайне. Для начала давайте разберемся, что же такое параллакс вообще. Вот что нам говорят словари.
Параллакс - изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.
В веб-дизайне эффект параллакса используется в неравномерном перемещении фона, а также ближних объектов относительно дальних на многослойном изображении, что создает иллюзию объема. Это может быть вертикальный параллакс, когда при прокрутке страницы сайта фон перемещается медленнее ее содержимого, или же псевдоанимация в шапке сайте или рекламном блоке, которая активизируется при движении мыши.
Читать статью целиком »
Просмотров: 15219 | Комментариев: 13
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 36,906 раз
Поблагодарили 36,906 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |