Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

0 подписчиков
-4 за неделю
←   Все выпуски   →

Cкрипт вертикального скроллинга произвольного содержимого

Программирование на JavaScript
Выпуск      : 40
Подписчиков : 13304
Cайт        : CodeGuru.ru
Архив       : Программирование на JavaScript (архив)
В этом выпуске
HTML и CSS в примерах. Создание Web-страниц

HTML и CSS в примерах. Создание Web-страниц

От автора

Здравствуйте уважаемые подписчики !

Сегодня перед вами еще один выпуск рассылки "Программирование на JavaScript".

Признаю, что, к сожалению, рассылка не выходила очень долго. Виной всему - катастрофическая нехватка времени. Дело в том, что ваш покорный слуга, ведущий данной рассылки пишет книгу, посвященную программированию на JavaScript. Книга уже почти готова, осталось пара последних, самых сложных глав. Да, работая над книгой я совсем забыл о рассылке. Жаль. Однако очено скоро, обещаю, рассылка будет выходить гораздо более часто и периодично.

Теперь о нововведениях.

Для того, чтобы разнообразить материал рассылки, сделать ее более живой и динамичной, я рещил добавить в нее раздел "Вопросы и ответы по JavaScript".

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

Так что, дорогие подписчики, пожалуйста задавайте свои вопросы. Верю, ни один из них не останется без ответа.

Ну а в этом выпуске вашему вниманию представлена небольшая статья, в которой описывается скрипт, производящий вертикальный скроллинг произвольного содержимого в некоторой области web-страницы.

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

Я также буду рад любым пожеланиям, замечаниям, предложениям (а также сообщениям об ошибках) по поводу рассылки и сайта. Их можно отправлять по тому же адресу.

И, как всегда, вы можете задать свои вопросы по JavaScript - программированию на форуме. Или обсудить их в дискуссионном листе "Скрипты для сайта".

С уважением, Вахтуров Виктор.
JavaScript solutions

Cкрипт вертикального скроллинга произвольного содержимого

В данной статье рассматривается скрипт, производящий циклическую прокрутку гипертекстового содержимого в вертикальном направлении.
Увидеть скрипт в действии вы можете на странице с оригиналом статьи: скрипт вертикального скроллинга произвольного содержимого.

Вместо предисловия

Должно быть, вы не будете отрицать, что в последние пару лет развитие Internet-технологий происходило стремительными темпами. Даже обычному пользьзователю, не имеющему никакого отношения к web-разработке, это видно с первого взгляда. Действительно, совершенствование в части соответствия стандартам W3C, улучшение ядра исполнения скриптов, поддержка работы с DOM (хотя бы первого уровня) различными браузерами, позволяют web-мастерам все шире применять клиентские сценарии для улучшения пользовательских характеристик web-сайтов. Уже не является редкостью применение на web-страницах иерархических меню, позволяющих реализовать развернутую навигацию по сайту, используя лишь небольшую часть полезной площади web-страницы. Технология AJAX, с помощью которой можно осуществлять взаимодействие с удаленным сервером, внедряется там, где уместно производить изменение страницы без ее перезагрузки при совершении пользователем некоторых действий (яркий пример - добавление сообщения на страницу форума при отправке его из формы быстрого ответа).

Вообще, на мой взгляд, web становится более динамичным и удобным. Применение скриптов (при правильном подходе) часто позволяет "разгрузить" web-страницу, отведя самое выгодное место для ее информационной составляющей - контента (собственно того, зачем пользователь и ходит на Ваш сайт). И сегодня мы рассмотрим небольшой и простенький скрипт, также служащий цели освобождения места на странице.

Описание скрипта

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

Как уже отмечалось, скрипт очень прост. Он не производит генерирования содержимого для прокрутки - содержимое определяется HTML-разметкой (как, впрочем, и также размещение области прокрутки). Таким образом, прокручиваемое содержимое должно быть внедрено в документ (в общем случае это хорошо, так как данное содержимое будет без проблем индексироваться поисковиками). Вся прокручиваемая часть документа должна содержаться между фрагментами разметки:

Код
<DIV class="frame"><DIV ID="ID_ANIMATION"><DIV ID="ID_ANIMATE">
и
Код
</DIV></DIV></DIV>

Вид и размер блока с прокручиваемым содержимым определяется правилами таблицы стилей (они могут быть внедрены в документ, либо находиться во внешних файлах):

Код
DIV.frame
{
 padding  : 0px;
 margin  : 0px;
 width  : 128px;
 border  : 1px solid black;
}

#ID_ANIMATION
{
 position : relative;
 padding  : 0px;
 margin  : 0px;
 height  : 172px;
 overflow : hidden;
}

#ID_ANIMATE
{
 position : relative;
 padding  : 0px 4px 0px 4px;
 margin  : 0px;
 overflow : hidden;
 color  : black;
 text-align : justify;
 font  : normal 10px "Tahoma", "Verdana", "Helvetica", "Arial", "Times New Roman", serif;
}
Также данные правила обеспечивают правильное позиционирование вложенных блоков друг относительно друга. Заметьте, что значением свойства overflow набора правил, соответствующего селектору #ID_ANIMATION является hidden. Таким образом, содержимое блока, выходящее за границы элемента DIV с идентификатором ID_ANIMATION, будет усекаться.

Принцип работы скрипта состоит в периодическом циклическом сдвиге блока с основным содержимым, образованного элементом PRE относительно его контейнера, образованного элементом DIV. Далее приводится полный код скрипта.

Код
var oText = document.getElementById("ID_ANIMATE");
var oContainer = document.getElementById("ID_ANIMATION");

var nHeight = oText.offsetHeight;
var nPos = oContainer.offsetHeight;

// --

function OnTimer()
{
 oText.style.top = nPos.toString() + "px";

 if(--nPos < -nHeight)
  nPos = oContainer.offsetHeight;
}

// --

OnTimer();

window.setInterval(OnTimer, 20);

Как можно видеть из листинга, в процессе инициализации, переменным oContainer и oText присваиваются ссылки на DOM-объекты описанных ранее элементов DIV и PRE. Затем в переменной nHeight сохраняется высота (в пикселях) элемента PRE, а переменной nPos присваивается значение, равное высоте элемента-контейнера DIV. Для определения высоты элемента используется свойство offsetWidth, не специфицируемое в DOM. Однако, оно поддерживается большинством популярных браузеров.

Переменная nPos определяет текущее смешение блока элемента PRE относительно структурного элемента DIV. Затем производится вызов функции OnTimer и запускается таймер, обработчиком событий которого также является OnTimer.

В функции OnTimer производится изменение вертикального смещения блока элемента PRE относительно его контейнера путем установки значения свойства top встроенной информации о стиле. Значение, заносимое в top, определяется величиной, содержащейся в nPos. При каждом вызове OnTimer, значение nPos уменьшается на 1 (соответственно, на один пиксель уменьшается смещение блока элемента PRE относительно контейнера). При достижении значением смещения величины, равной отрицательному значению высоты прокручиваемого содержимого (в этот момент все содержимое скрывается за верхней границей элемента-контейнера), это значение (переменная nPos) снова устанавливается равным высоте контейнера (при таком смещении прокручиваемое содержимое скрыто за нижней границей контейнера). Таким образом и осуществляется периодический циклический скроллинг гипертекстового содержимого.


Надеюсь, данный скрипт окажется полезным для Вас.



Адрес данной статьи: Cкрипт вертикального скроллинга произвольного содержимого

Автор статьи: Вахуров Виктор.

Подготовка выпуска: Вахтуров Виктор.
Анонсы книг по программированию на JavaScript
Flash MX. Библия пользователя (+ CD-ROM)
Flash MX. Библия пользователя (+ CD-ROM)

Автор: Роберт Рейнхардт, Сноу Дауд

Книга представляет собой наиболее всестороннее и исчерпывающее руководство по новой версии программы Flash MX. Она поможет вам в первые дни знакомства с программой и останется ценным источником, даже когда вы достигнете определенного мастерства в использовании Flash. Решая проблему интеграции Flash с другими программами и пытаясь `втиснуть` уникальное и завершенное содержание в формат Flash, вы будете знать, куда обратиться. В этой книге внимание уделяется практически каждому аспекту функциональных возможностей Flash. Подробно рассматривается интерфейс программы, не менее детально изложены вопросы импортирования анимации и звука в фильмы Flash. Поскольку Flash - многозадачное приложение (иллюстрационная программа, графический и звуковой редактор, механизм анимации и процессор создания сценариев), авторы книги рассматривают работу каждого компонента отдельно. В книге собраны советы и технические приемы от нескольких лучших представителей в индустрии Flash, так что вы сможете воспользоваться их многолетнимопытом. Это именно та книга, которую необходимо иметь любому профессиональному дизайнеру Web, разработчику или аниматору.

Страница книги на Озоне
Ваша домашняя страничка в Интернете. Homepage, или Просто
Ваша домашняя страничка в Интернете. Homepage, или Просто "хомяк"

Автор: Андрей Калиновский

Рассмотрен процесс создания персональной домашней страницы на конкретных примерах и с пояснениями. Описано, какие темы и какая информация являются в Интернете наиболее популярными и востребованными, какие программы необходимо иметь на своем компьютере начинающему web-мастеру, как правильно указывать имена файлов, как просматривать и оценивать изготовленные HTML-страницы. Рассмотрены работа с текстом, в том числе форматирование и оформление, использование различных шрифтов и внешнего вида текста, гиперссылки всех существующих типов, добавление графики и таблиц стилей. Приведены примеры полезных и простых сценариев JavaScript. Описаны процессы быстрого и продуктивного тестирования сайта для выявления недостатков и ошибок, возникающих в ходе разработки. Даются рекомендации по размещению сайта в Интернете и набор приемов раскрутки и продвижения сайта.

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