Быстрый поиск
Введите фрагмент названия статьи для поиска
Динамическое изменение 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>
Просмотров: 10970 | Комментариев: 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;
- }
- }
Читать статью целиком »
Просмотров: 18233 | Комментариев: 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;
- }
Читать статью целиком »
Просмотров: 5338 | Комментариев: 2
Технология COMET на JavaScript
03.12.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Технология COMET на JavaScript
Если вы, прочитав заголовок и посмотрев на картинку, вдруг подумали чего-нибудь странное, то напрасно. К небесным телам и моющим средствам эта статья никакого отношения не имеет. COMET - это еще одна современная технология веб-строительства, заключающаяся в том, что веб-страница не просто разово или циклично запрашивает контент с сервера, а создает с сервером постоянное HTTP-соединение и ждет от него передачи данных. Это позволяет пользователям веб-приложения более оперативно получать все возникающие на сервере события (пример - мгновенное уведомление о новом сообщении в социальных сетях). В идеальном варианте для этого на сервере разворачивается специальное программное обеспечение, сам сервер особым образом конфигурируется, а на клиентской части используются специальные библиотеки для обмена данными. Это если рассматривать использование COMET в контексте больших и серьезных проектов. Но для рядового сайта, размещенного на обычном хостинге с ограничением времени исполнения скрипта, тоже можно сделать облегченный аналог COMET.
Читать статью целиком »
Просмотров: 8563 | Комментариев: 8
Загрузка файлов перетаскиванием в окно браузера
21.09.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Загрузка файлов перетаскиванием в окно браузера
Практически все современные web-сервисы предлагают пользователям такую фичу, как загрузку файлов простым перетаскиванием их в браузер. Это действительно очень удобно, когда надо загрузить сразу несколько файлов, поле загрузки может иметь произвольный вид и форму, т.к. не подвязано на стандартные элементы формы, и еще множество других плюсов. Как же это сделано? Очень просто. Мы уже рассматривали в одной из статей прием и отправку текстовых данных при помощи технологии AJAX, загрузка файлов выполняется не намного сложнее.
Читать статью целиком »
Просмотров: 25657 | Комментариев: 17
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,699 раз
Поблагодарили 35,699 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |