Быстрый поиск
Введите фрагмент названия статьи для поиска
Онлайн-сервисы для создания скриншотов сайтов
21.01.2015 | Категория: Web-мастеру и не только | Автор: ManHunter
Онлайн-сервисы для создания скриншотов сайтов
Для создания скриншотов обычно используются стационарные программы, которых написано уже немало. С их помощью легко сделать снимки экрана, отдельных окон или элементов интерфейса. Но когда требуется полноразмерный скриншот сайта, они не всегда могут быть удобны. Конечно, на своем компьютере можно поставить какие-нибудь расширения для ваших любимых браузеров, которые делают скриншоты сайтов в полный размер страницы. А как быть, если скриншоты сайтов должны создаваться без участия человека? Вот для этого и используются онлайн-сервисы. Принцип их работы схож: через API или через форму на сайте сервису передается URL веб-страницы, с которой надо сделать снимок, а на выходе получаем ссылку на готовое изображение или само изображение.
Читать статью целиком »
Просмотров: 18538 | Комментариев: 14
Галерея в стиле старого альбома с фотоуголками
04.07.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Галерея в стиле старого альбома с фотоуголками
В каждой семье наверняка хранятся старые советские фотоальбомы, в которые фотографии надо было вклеивать самим. Обычно для этого использовались бумажные фотоуголки. Они надевались на углы фотографий, смачивались языком и прикладывались на страницу фотоальбома. Однажды я подумал: а почему бы не сделать нечто подобное в виртуальном мире, создать веб-страницу галереи, которая будет выглядеть как старый фотоальбом? Вот что у меня получилось.
Читать статью целиком »
Просмотров: 6768 | Комментариев: 9
Правильное поле для ввода паролей
03.06.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Правильное поле для ввода паролей
Исторически так сложилось, что символы в полях для ввода пароля в программах и на сайтах заменяют "звездочками" или какими-нибудь другими символами. Хорошо это или плохо, однозначно сказать сложно. На эту тему было уже немало споров, но к единому мнению оппоненты так и не пришли. С одной стороны вроде бы все логично, вводимый пароль никто не видит, безопасность, приватность, паранойя и все такое. Но с другой стороны это ужасно неудобно, можно ошибиться буквой, ввести пароль не в том регистре или не в той раскладке, часто при копировании паролей из текста писем или с сайтов в конце захватывается лишний пробел или перенос строки, где-то не вовремя проявит инициативу Punto Switcher, при регистрации на сайтах надо заводить еще одно поле для подтверждения пароля, ну и так далее. В открытом текстовом поле для ввода пароля такие ошибки были бы видны сразу.
Читать статью целиком »
Просмотров: 8150 | Комментариев: 18
Динамическое изменение favicon сайта в браузере
24.04.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Ни для кого не секрет, как на сайт добавляется иконка, которая отображается в адресной строке браузера. Достаточно прописать ссылку на нее в заголовке HTML-страницы:Code (HTML) : Убрать нумерацию
- <html>
- <head>
- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
- <head>
- <body>
- ...
- </body>
- </html>
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- // Ссылка на файл новой иконки
- var icon='new_favicon.ico';
- var head = document.getElementsByTagName('head')[0];
- // Найти и удалить старую иконку из тега HEAD
- var links = head.getElementsByTagName('link');
- for (var i = 0; i < links.length; i++) {
- var lnk = links[i];
- if (lnk.rel=='shortcut icon') {
- head.removeChild(lnk);
- }
- }
- // Добавить новую иконку
- var link = document.createElement('link');
- link.setAttribute('href',icon);
- link.setAttribute('type','image/x-icon');
- link.setAttribute('rel','shortcut icon');
- head.appendChild(link);
- </script>
Просмотров: 8867 | Комментариев: 14
Календарь на 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;
- }
- }
Читать статью целиком »
Просмотров: 15607 | Комментариев: 25
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 27,772 раза
Поблагодарили 27,772 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 410 |
 |
 |