Пару недель назад Google анонсировал AJAX Feed API, который позволяет загрузить и разместить на веб-странице анонсы новостей из любого открытого Atom- или RSS-канала, используя только JavaScript. Покажу, как доработать простой пример из документации к API и получить список новостей, отсортированных по дате, из нескольких лент.
Это обновленная версия скрипта, который позволяет сворачивать-разворачивать вложенные списки. Теперь сценарий запускается до события load объекта window. Для навигации по списку теперь можно использовать не только мышь, но и клавиатуру. По прежнему: если в браузере отключить JavaScript, будет просто показан развернутый список, т.е. все его элементы всегда доступны, не зависимо от возможности выполнять JavaScript.
Работая с новостными лентами или же просто с информацией, содержащей графические изображения, довольно часто возникает потребность генерации картинок-превью. На первый взгляд нет ничего проще чем создать уменьшенное изображение произвольного рисунка или фотографии. Однако, оказывается и в этой области есть где развернуться.
Этот пример демонстрирует, как можно добраться до любой ячейки любой таблицы (x)HTML-документа с помощью DOM.
Добавление новых элементов обычными методами DOM скучное занятие, которое может вызвать справедливое недовольство: для каждого элемента получаются очень многословные и многоэтажные конструкции. Если нужно сделать один-два элемента (например, DIV или P и т.п.) с текстом внутри, еще можно смириться с написанием большого количества практически одинаковых строк кода. А когда таких элементов не один десяток и все разные…
Собственно, вся проблема состоит в том, что событие onload() возникает после полной загрузки документа. Конечно, было бы здорово выполнить какие-нибудь действия с загруженным html-документом не дожидаясь загрузки изображений, flash-роликов и пр.
Функция, которая позволяет найти любой существующий элемент в HTML-документе. Элементы можно искать по названию тэга, по названию атрибута и по его значению.
В сентябре прошлого года я показал, как с помощью JavaScript можно представить XHTML документ в виде последовательности слайдов. По прошествии некоторого времени эта идея получила дальнейшее развитие. Предлагаю новую версию XHTML+CSS+DOM слайд-шоу.
Существует несколько различных способов создания динамических выпадающих списков для заполнения различных форм, когда в зависимости от выбранного значения в одном, нужно изменить содержимое другого. Например, на странице есть список стран, при выборе одной из них, во втором списке с городами остаются только те, которые есть в выбранной стране.
С помощью DOM можно без особого труда перемещать целые фрагменты XHTML-документа и, таким образом, изменять порядок отображения элементов в окне браузера не зависимо от порядка загрузки веб-страницы.
Кроссбраузерный on-line подбор цвета (ColorPicker). В результате получаем шестнадцатиричный RGB код выбранного цвета. ?спользованы: XHTML1.1+JavaScript+CSS.
Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.
Фотогалерея, в которой увеличенные изображения можно выбирать без перезагрузки всей html-страницы. В примере используется Объектная модель документа(DOM), минимум XHTML-кода, немного CSS и JavaScript. Работает в Firefox1.02+, Opera7+, Internet Explorer5+, в других браузерах не проверял.
Рекомендации W3C для HTML 4.01 Strict и XHTML 1.0 Strict более не включают атрибут target для тега . Переходные (Transitional) версии спецификаций допускают его применение, но стандарты для того и разработаны, чтобы ими пользоваться. Поэтому далее рассмотрим, как все-таки открывать ссылки в новом окне, не используя при этом устаревший атрибут target в (X)HTML-коде документа.