Blog. Just Blog

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

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

Онлайн-сервисы для создания скриншотов сайтов

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

Онлайн-сервисы для создания скриншотов сайтов

Для создания скриншотов обычно используются стационарные программы, которых написано уже немало. С их помощью легко сделать снимки экрана, отдельных окон или элементов интерфейса. Но когда требуется полноразмерный скриншот сайта, они не всегда могут быть удобны. Конечно, на своем компьютере можно поставить какие-нибудь расширения для ваших любимых браузеров, которые делают скриншоты сайтов в полный размер страницы. А как быть, если скриншоты сайтов должны создаваться без участия человека? Вот для этого и используются онлайн-сервисы. Принцип их работы схож: через API или через форму на сайте сервису передается URL веб-страницы, с которой надо сделать снимок, а на выходе получаем ссылку на готовое изображение или само изображение.

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

Галерея в стиле старого альбома с фотоуголками

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

Галерея в стиле старого альбома с фотоуголками

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

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

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

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

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

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

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

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

24.04.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Ни для кого не секрет, как на сайт добавляется иконка, которая отображается в адресной строке браузера. Достаточно прописать ссылку на нее в заголовке 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 со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так:
  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 0links.lengthi++) {
  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. Главное не злоупотреблять анимацией в рабочих проектах.

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

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

02.03.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из рабочих проектов мне потребовался календарик на 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==|| 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. }
Скрипт рисует таблицу с календарем на выбранный месяц и год, с названием месяца в заголовке, а также с кнопками листания на следующий и предыдущий месяц. Суббота и воскресенье выделены цветом. Кликнув на любую дату, пользователь может выбрать ее для дальнейшей обработки в других скриптах. Клик по названию месяца в заголовке возвращает календарь на месяц, в котором находится выбранная дата.

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

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