четверг, 28 января 2010 г.

Они, любимые, или изменение шрифта с помощью javascript

Решил сделать для себя успокаивательную страничку. Чтобы в любое время тяжелого рабочего дня можно было бы чуть чуть отдохнуть душой:)
В результате получилось следующее:

(.) (.)
Чтобы увидеть, как это реализовано, вы можете посмотреть исходный код этой страницы:) Здесь же я вкратце опишу принцип. Во-первых, задаем 2 функции javascript, increaseFontSize() и decreaseFontSize(), для увеличения и уменьшения размера шрифта. Они действуют так: 
var p = document.getElementsByTagName('shticka');
После этого в p у нас получается массив всех тегов типа "shticka". Конечно, вы можете получать список тегов по классу, или отдельно каждый тег по его id. Во-вторых, для каждого элемента из p находим размер шрифта и помещаем его в переменную s:
var s = parseInt(p[i].style.fontSize.replace("px",""));
После чего мы увеличиваем ее, например, на 4:
s+=4;
В-третьих, заменяем размер шрифта на увеличенное s:
p[i].style.fontSize = s+"px";
Вот и все готово:) Можно наслаждаться))

четверг, 21 января 2010 г.

Использование setTimout в javascript, или про то, как давать пользователям ссылку на скачивание с задержкой.

Представим, что вы хотите давать пользователям ссылку на скачивание файла с вашего сайта с какой-то задержкой, например, 30 секунд. Для этого нам понадобится написать всего одну строку на javascript и несколько на html:)
Итак, во-первых, выделим область на своем сайте, где будет выдаваться ссылка. Сделаем это с помощью HTML-тега 'div':
<div id='link'></div>
где link - это уникальный идентификатор этого тега, по которому будем обращаться к нему с помощью javascript. Далее мы пишем сам код javascript, заключая его в HTML тег 'script' :
<script>
setTimeout("document.getElementById('link').innerHTML='<a href='bla-bla.txt'>Ссылка</a>';",30000);
</script>


Что это означает - setTimout - это javascript-функция, выполняющая команды, переданные ей в первом аргументе по истечении времени, заданного во втором аргументе (в миллисекундах). document.getElementById('link') - обращаемся к элементу  документа с идентификатором, равным 'link'. Подробнее про использование getElementById вы можете почитать здесь и тут. innerHTML - переменная элемента, отвечающая за все то, что находится внутри тега. То есть в итоге, после выполнения скрипта, наш тег будет выглядеть так:
<div id='link'><a href='bla-bla.txt'>Ссылка</a></div>
Вот и всё:)

пятница, 8 января 2010 г.

Еще один бесплатный аналог lastfm

Вот и еще один бесплатный и качественный аналог lastfm - GrooveShark


Сделан он на флеше, причем дизайн невероятно удобный и интуитивно понятный. Главное предназначение - это онлайн плеер. Музыки много, в хорошем качестве. Можно добавлять ее в свою библиотку, ставить сердечки и смайлики - нравится или не нравится. В зависимости от этого в режиме радио вам будет предлагаться музыка, которая, скорее всего, вам понравится.
Интересная фишка - создание виджетов для вставки определенных песен или всего плейлиста на ваш сайт или блог. Один из них вы можете наблюдать в начале этого поста.
Кстати, для Chrome есть расширение, которое позволяет управлять музыкой, не переходя на вкладку с ГрувШарком.
В общем, слушаю с большим удовольствием. Единственное, чего нет, в отличие от LastFM - это скробблера для своего плеера.