В честь этого двойного праздника был открыт сайт 14 Days of jQuery, на котором в течении 14 дней будет анонсирована новая версия библиотеки.

Скачать последнюю версию библиотеки вы можете здесь – jQuery 1.4. Следить за последними анонсами можно через Твиттер или подписавшись на RSS рассылку.

Уже доступны онлайн и PDF версия для печати шпаргалки для текущей версии jQuery 1.4. Также известно, что обновлен дизайн и структура jQuery API.

Теперь должно быть все просто, мы задаем родительскому блоку фиксированную ширину, position: relative (для того, чтобы мы могли абсолютно позиционировать блок с текстом относительно текущего), overflow: hidden (для того, чтобы “бегущий” текст скрывался за границами родительского блока). Далее пишем скрипт, который отодвигает текст вправо на ширину родительского блока (теперь он не видим) и потом перемещает его влево с заданной скоростью, пока текст не скроется полностью. И повторяем это действие снова и снова =).
Для того, чтобы рассчитать момент, когда текст полностью скроется за левой границей, нам нужно узнать настоящую ширину блока с текстом. Если наш текстовый блок будет содержаться в marquee_container с заданной шириной, скрипт нам покажет ширину не больше нами заданной. Поэтому нам нужен еще один блок (marquee_subcontainer). Зададим ему ширину width:9999999px, и поместим в него текстовый блок. Теперь проблема с определением ширины решена.

Составим HTML код бегущей строки:

<div class="marquee-container" id="marquee_container">
    <div class="marquee-subcontainer" id="marquee_subcontainer">
        <div class="marquee-text" id="marquee_text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

Теперь составим таблицу CSS стилей в соответствии с нашими рассуждениями:

.marquee-container {
    position: relative; /* см. UPD 1 */
    border-right:1px dotted #d8cfc2;
    height:30px;
    width:200px;
    overflow: hidden;
    border:2px solid #f00;
    margin:0px auto;
}

.marquee-subcontainer {
    position: relative;
    width:9999999px;
    height:30px;
    margin:0px;
}

.marquee-text {
    position: absolute;
    margin: 0px;
    top:0px;
    left:0px;
    height:30px;
    font: bold 16px Arial Georgia;
    color:#000;
}

Когда все предварительные приготовления сделали, можно приступить к написанию JS кода.

// текущий сдвиг текста относительно левой границы блока бегущей строки
var craw_line_offset;

// функция инициализации бегущей строки
function enableCrawLine () {
    craw_line_offset = 0;

    // ширина текстового блока
    var craw_line_width = document.getElementById('marquee_text').offsetWidth;

    moveCrawLine (craw_line_width);
}

// функция пошагового сдвига
function moveCrawLine (w) {
    var lefttime;
    var container_width = document.getElementById('marquee_container').offsetWidth;
    // шаг (в пикселях), с которым будем перемещать текст
    var step = 1;
    // задержка между перемещениями на step пикселей
    var tdelay = 50;

    // ширина текстового блока
    w = parseInt(w);

    // если блок не "заехал" за левую границу
    if (craw_line_offset<(w+container_width)) {
        // сдвигаем блок на шаг влево
        craw_line_offset = craw_line_offset + step;
    } else {
        // иначе начинаем все с начала
        craw_line_offset = 0;
    }

    // изменяем позицию текстового блока
    document.getElementById('marquee_text').style.left = parseInt(container_width-craw_line_offset)+'px';

    // рекурсивно вызываем функцию сдвига с заданной задержкой
    setTimeout('moveCrawLine ('+w+');', tdelay);
}

// вызов инициализирующей функции
enableCrawLine ();

Теперь можем ознакомиться с рабочим примером.

UPD 1: В IE6 не корректно срабатывал overlow: hidden для родительского блока. Дочерний див с position:absolute отображался полностью, не зависимо от границ родительского блока. Оказалось нужно просто добавить свойство position: relative и блоку с overflow:hidden.

Как для регистрации обработчиков событий DOM и пользовательских событий, так и для их запуска в Google maps API есть пространство имен GEvent.  Сейчас мы воспользуемся для примера методом addListener(source, event, handler).  Этот метод регистрирует пользовательское событие event в источнике объекта source и вызывает обработчик handler.

Теперь назначим событию click обработчик, который будет создавать метки на карте. Затем мы научим эти метки позиционироваться путем перетаскивания их мышкой по самой карте и назначим удаление их из карты по даблклику по метке.

Теперь перейдем от теории к практической части:

/* Здесь мы будем хранить классы:
- GMap2 для создания карты;
- GClientGeocoder для получения геокодов для пользовательских адресов
*/
var map, geocoder;

function initialize_map () {
    /* Если браузер совместим */
    if (GBrowserIsCompatible()) {
        /* Создадим объект карты */
        map = new GMap2(document.getElementById("google_canvas"));
        geocoder = new GClientGeocoder();

        /* Установим координаты центра карты и начальный масштаб */
        map.setCenter(new GLatLng(37.4419, -122.1419), 5);

        /* Добавим элементы управления картой, воспользовавшись конструктором GLargeMapControl из класса GControl  */
        map.addControl(new GLargeMapControl());

        /* Добавим мини-карту обзора в углу основной карты */
        map.addControl(new GOverviewMapControl());

        /* Назначаем  onClickForMap() обработчиком события click  */
        GEvent.addListener(map, "click", onClickForMap);
    }
}

/* При нажатии на карту  */
function onClickForMap(overlay, latlng) {
    /* Если определен входной аргумент */
    if (latlng != null) {
        /* Определим координаты точки, в которой было вызвано событие  */
        geocoder.getLocations(latlng, addPointToMap);
    }
}

/* Непосредственно добавление точки с маркером на карту */
function addPointToMap (response) {
    /* Если произошла какая-либо ошибка при определении координат - выведем ошибку */
    if (!response || response.Status.code != 200) {
        alert("Status Code:" + response.Status.code);
    } else {
        /* Получим координаты */
        place = response.Placemark[0];
        /* Создадим точку на карте */
        point = new GLatLng(place.Point.coordinates[1],
        place.Point.coordinates[0]);

        /* Создадим маркер в этой точке */
        var marker = new GMarker(
            point,
            /* разрешим пользователю перетаскивать мышкой этот маркер  */
            {draggable: true}
        );

        /* При двойном клике по маркеру */
        GEvent.addListener(marker, "dblclick", function() {
            /* Вызовем метод  hide() который скроет маркер */
            this.hide();
        });

        /* Нанесем созданный нами объект на полотно карты */
        map.addOverlay(marker);
    }
}

initialize_map ();

То что из этого получиться вы можете посмотреть в примере.

Следующим шагом нам необходимо подключить саму библиотеку Google:

<script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=[здесь_код_к_API]" type="text/javascript"></script>

Затем в HTML коде страницы необходимо определить блок, в котором будет отображаться карта и стили для него.

<style>
div#google_canvas {
 height:300px;
 width: 500px;
 margin:0px auto;
}
</style>
<div id="google_canvas"></div>

Теперь пишем функцию инициализации карты Google:

 /* Если браузер совместим */
 if (GBrowserIsCompatible()) {
 /* Создадим объект карты */
 var map = new GMap2(document.getElementById("google_canvas"));

 /* Установим координаты центра карты и начальный масштаб */
 map.setCenter(new GLatLng(37.4419, -122.1419), 5);

 /* Добавим элементы управления картой воспользовавшись конструктором GLargeMapControl из класса GControl  */
 map.addControl(new GLargeMapControl());

 /* Добавим мини-карту обзора в углу основной карты */
 map.addControl(new GOverviewMapControl());
 }

И самое главное, нам нужно запустить эту функцию при загрузке страницы и выгрузить при закрытии:

<body onload=“initialize_map()” onunload=“GUnload()”>

Сейчас у нас получилось отобразить карту следующим образом. В следующей статье мы научим нашу карту взаимодействовать с пользователем в интерактивном режиме.

P.S. Для самостоятельного изучения рекомендую к прочтению справочные материалы по API карт Google.

Для любимого нами огненного лиса (Firefox) средствами JavaScript HTML код необходимо вставлять следующим образом:

     // Блок куда необходимо вставить html контент
    var our_div = document.getElementById('our_div_name');

     // Непосредственно наш контент
    var our_text = 'our html code ...';

     // Получим userAgent браузера
    var ua = navigator.userAgent.toLowerCase();

    if (ua.indexOf("gecko") != -1) {
        // Если браузер Mozilla, или Firefox, или Netscape
        var range = div_preview.ownerDocument.createRange();
        range.selectNodeContents(our_div);

        // Очистим внутренности нашего блока
        range.deleteContents();
        var fragment = range.createContextualFragment(our_text); //<-- dies here

        // Теперь наполним необходимым контентом
        our_div.appendChild(fragment);
    }  else  {
        // Для остальных браузеров
        our_div.innerHTML = our_text;
    }

Реализуется эта задача очень просто.

Для того чтобы просто отключить вывод сообщений об ошибках, достаточно написать одну строку  JavaScript кода:

window.onerror=null;

Либо мы можем назначить обработчиком ошибок пользовательскую функцию:

/* определим функцию обработки ошибок */
function onErrorHandler(msg, url, lno)  {
    /* тут тело обработчика */
   return true;
}

/* теперь  назначаем наш обработчик для события onError   */
window.onerror = onErrorHandler;

Стилизация выпадающих списков основывается на замене стандартного элемента html <select>  на маркированный список<ul>, оформленный с помощью CSS необходимым нам образом.

JavaScript перехватывает все события onClick на странице и проверяет не “нажал” ли пользователь на ту или иную область выпадающего списка. Если произошло необходимое событие, и необходимо раскрыть, свернуть или выбрать необходимый элемент, скрипт применяет к элементам маркированного списка соответствующие стили и изменяет выбранное значение исходного выпадающего списка <select> (который был скрыт при загрузке страницы).

Ниже привожу результат стилизации (взят с реального проекта):

Чтобы не загромождать страницу кодом размещаю ссылку на архив с рабочим примером.

Для начала необходимо выделить в блок сам текст:

<div class="frame"><div id="animation_div"><div id="animate_div">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec vestibulum metus et nulla. Etiam at elit.
Nullam id mi eget lorem hendrerit viverra.
Fusce mi pede, tempor vitae, tristique tempus, molestie id, sem.
Cras mauris dolor, accumsan vitae, gravida a, blandit nec, massa.
<br />
Morbi metus libero, pellentesque sed, tristique et, ultrices quis, nunc.
Nunc interdum vulputate sem. Donec laoreet sagittis sapien.
In interdum. Nunc tempus purus faucibus lorem.
Proin fermentum tristique nisi. Proin sed nibh ut purus sollicitudin facilisis.
Fusce imperdiet tincidunt metus. Etiam tempor ante a eros.
Curabitur blandit erat a nisl. Sed elit.
</div></div></div>

Затем оформим соответствующим образом с помощью каскадных таблиц стилей (CSS):

div.frame {
padding: 0px;
margin: 0px;
width: 250px;     /* ширина блока */
border: 1px solid #fcc; /* рамка вокруг блока */
}

#animation_div {
position: relative;
padding: 0px;
margin: 0px;
height: 150px;    /* высота блока */
overflow: hidden;
}

#animate_div {
position: relative;
overflow: hidden;
margin:0px;
padding:3px;
/* стиль для текста внутри блока */
color: #000;
text-align: justify;
font: 10px Arial;
}

После блока в HTML коде необходимо вставить следующий JavaScript:

var oText = document.getElementById("animate_div");
var oContainer = document.getElementById("animation_div");

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

var bScrolling = true;

function OnScrollerMouseOver() {
bScrolling = false;
}

function OnScrollerMouseOut()  {
bScrolling = true;
}

function OnTimer() {
if(!bScrolling)
return;

oText.style.top = nPos.toString() + "px";
if(--nPos < -nHeight)
nPos = oContainer.offsetHeight;
}

OnTimer();

oContainer.onmouseover = OnScrollerMouseOver;
oContainer.onmouseout  = OnScrollerMouseOut;

window.setInterval(OnTimer, 50); /* задержка перед каждым сдвигом */

Суть работы скрипта заключается в том, что он через заданный интервал времени сдвигает текст на 1 пиксель, потому чем больше значение задержки, тем медленнее будет прокручиваться текст.

foreach ($some_array as $key=>$val) {
    echo $key,' = ',$val,'';
}

Опять таки по велению случая, мне было необходимо использовать ее аналог в JavaScript. Соответствующий вариант использования аналогичной конструкции в JavaScript`е представлен ниже:

for (var key in some_array) {
    var val = some_array [key];
    alert (key+' = '+val);
}

Затем пишем в таблице стилей следующий код, отвечающий за оформление чекбоксов:

.f_checkbox {
background-repeat:no-repeat;
background-position:0px center;
height:16px;display:block;
cursor:pointer;
cursor:hand;
width:20px;
height:20px;
}

.checked,.selected{
color:#ddd;
}

.f_checkbox{
padding:0px;
background-color:#ccc;
}

.unchecked{
background-image:url('img/checkbox_off.gif');
}

.checked{
background-image:url('img/checkbox_on.gif');
}

В коде страницы делаем следующую запись:

<!-- один из оформляемых чекбоксов -->
<label class="f_checkbox"><input type="checkbox" /></label>;
<!-- подключаем скачанные java-скрипты -->
<script type='text/javascript' src='mootools.js'></script>
<script type='text/javascript' src='demo-moo.js'></script>;

checkbox_on.gif и checkbox_off.gif изображения выбранного и не выбранного checkbox`а.

Теперь остается только экспериментировать =)