Blog. Just Blog

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

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

Динамическое изменение 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. Главное не злоупотреблять анимацией в рабочих проектах.

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

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

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

26.01.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Этот скрипт - небольшая доработка меню с вкладками, которое я описывал в одной из своих предыдущих статей. Я решил добавить в него эффект анимации: при наведении курсора на вкладку она плавно поднимается над строкой меню, а при выходе курсора за пределы вкладки плавно опускается обратно. Главная фишка, чтобы анимация работала параллельно и независимо для каждой вкладки. Начнем с разметки, она очень похожа на разметку из предыдущей статьи, но с одним дополнением - строка меню дополнительно обернута в контейнер фиксированной высоты, который имеет стиль overflow:hidden. В остальном все то же самое.
  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>
Таблица стилей тоже похожа. Главное отличие в том, что вкладки спозиционированы относительно строки меню, имеют высоту больше высоты строки меню и изначально смещены вниз под обрез верхней границы строки меню. Такая верстка позволит смещать вкладки по вертикали, достигая нужного эффекта.
  1. #over_menu {
  2.     height50px;
  3.     overflowhidden;
  4. }
  5. #menu {
  6.     positionrelative;
  7.     height30px;
  8.     margin-top15px;
  9. }
  10. .viramaina {
  11.     positionrelative;
  12.     height45px;
  13.     border2px solid #909090;
  14.     background#E0E0E0;
  15.     color#000000;
  16.     floatleft;
  17.     padding5px 10px 0 10px;
  18.     border-radius16 16 0 0;
  19.     font-weightbold;
  20.     font-familyArial;
  21.     text-decorationnone;
  22. }
  23. a.viramaina:hover {
  24.     background#FFFFFF;
  25.     color#FF0000;
  26. }
  27. #content {
  28.     font-size16px;
  29.     border2px solid #909090;
  30.     padding20px;
  31.     border-radius0 16 16 16;
  32. }
Теперь немного теоретической части, как это меню должно работать. На каждую вкладку устанавливаются два обработчика событий - перемещение курсора над вкладкой и выход курсора за ее границы. При заходе курсора на вкладку устанавливается персональный таймер, по которому вкладка плавно перемещается вверх с шагом в 1 пиксел до определенного значения. При подъеме вкладки до нужной высоты таймер сбрасывается. При выходе курсора за пределы вкладки устанавливается новый таймер, по которой она смещается обратно в прежнее положение. Идентификатор таймера, сдвиг и направление сдвига хранятся как свойства элемента вкладки.

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

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

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

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

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


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


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

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

Эффектное слайд-шоу на JavaScript

19.07.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:
  1. <div style="position: relative; height:600px; width:800px;"></div>
Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:
  1. <div style="position: relative; height:600px; width:800px;">
  2.    <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
  3.    <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
  4. </div>
Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.

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

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