Теперь должно быть все просто, мы задаем родительскому блоку фиксированную ширину, 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.

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

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

.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`а.

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

Для начала создадим тело меню средствами HTML:

<div id="v_menu">
<ul>
	<li><a href="#">Menu item 1</a></li>
	<li><a href="#">Menu item 2/a></li>
	<li><a href="#">Menu item 3/a></li>
	<li><a href="#">Menu item 4/a></li>
</ul>
</div>

Следующим шагом определим размер всего блока меню, границы, внутренние и внешние отступы, тип шрифта, цвет фона и цвет текста.

#v_menu  {
    width: 200px;
    border: 1px solid #000;
    padding: 0 0 0 0;
    margin: 10px 0 0 0;
    font:14px Arial;
    background-color: #90bade;
    color: #333;
}

Теперь определим стили самых списков меню, которые являются элементами списка.

Для всего списка зададим нулевые отступы, уберем границу и маркеры списка.

#v_menu ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}

Для каждого из пунктов меню (элементов списка) зададим размер, тип и цвет нижней границы и нулевой отступ.

#v_menu li {
    border-bottom: 1px solid #90bade;
    margin: 0 0 0 0; }

Следующим шагом оформим сами ссылки. Зададим блочный стиль отображения ссылок (для того чтобы блок самой ссылки растянулся по ширине и высоте пункта списка), внутренние отступы, нулевую границу, цвета фона и самих ссылок, уберем подчеркивание ссылок.

#v_menu li a {
    display: block;
    padding: 5px 5px 5px 5px;
    border: 0px;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

Следующий стиль существует исключительно потому, что свойство display: block не срабатывает для браузера IE под Windows.

html>body #v_menu li a {
    width: auto;
}

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

#v_menu li a:hover {
    border:0px;
    background-color: #2586d7;
    color: #fff;
}

Зачастую, при выборе инструмента для создания on-line калькулятора выбирают JavaScript. Естественно, используют совместно с CSS, HTML, иногда для генерации некоторых частей кода калькулятора используют PHP (или же другие языки, выполняющиеся на стороне сервера), а также технологию AJAX.

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

Для выбора значений из фиксированного списка используем конструкцию:

<select size="1" name="list_id" id="list_id">

   <option value="1"> Param 1 </option>

       ...

   <option value="N"> Param N </option>

</select>

Для ввода/вывода числовых значений, очевидно:

<input type="text" name="param_id" id="param_id" />

Естественно, должен быть элемент при нажатии на который будет производиться расчет. Предлагаю использовать:

<input type="button" onClick="calculate()" value="CALCULATE" />

Атрибут тега input – onClick вызывает функцию calculate (); описанную на языке JavaScript. Далее эта функция производит расчет всех необходимых параметров и вывод данных в соответствующие поля.

Теперь опишем основные задачи, с решением которых придется столкнуться при разработке данного программного продукта.

1. Извлечение данных из форм.

из полей <input type=”text” id=”element_id” … />, <input type=”password” id=”element_id” … />, или <select id=”element_id” …> … </select>

var element_value = document.getElementById('element_id').value;

// в переменную возвращается текстовое или числовое значение

из <input type=“checkbox” id=”checkbox_id” … />

var checkbox_value = document.getElementById('checkbox_id').checked;

// в переменную возвращается значение true либо false

2. Обработка данных.

В рамках данной статьи считаю излишним описывать математические, строковые и другие операции допустимые в рамках JavaScript.

Возможно, возникнет сложность с преобразованием типов данных. Ниже приведу несколько полезных примеров.

// Преобразование строкового типа в ...

int_ = parseInt(str_);      // ... целочисленный

float_ = parseFloat(str_)   // ... с плавающей точкой

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

var element_value = document.getElementById('element_id').value;

element_value = parseFloat(element_value.replace(',','.'));

Задача, с которой столкнулся автор. Имеем список материалов, для каждого типа материалов есть список допустимых разрешений печати. Для каждого разрешения печати и материала существует определенная стоимость.

Решение. Создаем список материалов с помощью <select …>. Каждому материалу присваиваем уникальный номер (далее ID). Создаем массив, в котором каждому ID материала соответствует список доступных разрешений печати. В последнем списке, ID присваиваем каждому доступному разрешению начиная с нуля.

Далее необходимо организовать динамическое изменение списка допустимых разрешений печати при выборе конкретного материала. Пишем функцию ( print_dpi_list (); ), которая в зависимости от выбранного ID материала вставляет в блок на странице отмеченный <div id=”dpi_list”></div> код списка допустимых разрешений. Динамический импорт кода HTML в страницу производится следующим способом:

document.all.dpi_list.innerHTML = list_arr[list_num];

// list_num - ID материала

// list_arr - массив списков допустимых разрешений печати

// dpi_list - имя блока, в который вставляем список.

Также необходимо организовать вызов функции изменения списка допустимых разрешений печати. Используем атрибут onChange:

<select size="1" name="mat" id="mat" onChange="print_dpi_list();">

Теперь необходимо поставить в соответствие каждому материалу и разрешению цену за печать. Для этого создадим двумерный массив. 1е измерение ID материала, 2е – ID разрешения печати. Массив будет выглядеть примерно так:

	var price;
	price = new Array ();
	price[0] = new Array ();
	price[1] = new Array ();
   ...

	price[0][0] = 300;
	price[0][1] = 350;
	price[0][2] = 400;
	price[0][3] = 450;
	price[0][4] = 500;

	price[1][0] = 480;
	price[1][1] = 680;
	price[1][2] = 680;
	price[1][3] = 1200;

   ...

Теперь для расчета цены необходимо всего лишь извлечь из списков ID выбранных значений и подставить в координаты элемента массива:

var out_price = price[list_num][dpi_num];

3. Вывод результатов.

Самый простой способ вывести результат с помощью сообщения alert (‘текст сообщения’);. Я лично нахожу его неприемлемым. Этот метод допустим лишь в том случае, если необходимо возвратить пользователю одно значение. Как правило итоговых расчетных значений и промежуточных 2 или более… Поэтому необходимо создать поля, в которых будут выводиться значения.

Для текстовых полей формы, например: <input type=”text” id=”out_price_inp” />

document.getElementById('out_price_inp').value = out_price;

Либо в текстовый блок, например обозначенный как <div id=”out_price_div”></div>

	// результат, который содержит код HTML

document.all.out_price_div.innerHTML = out_price;

	// результат, который содержит только текст без кода HTML

document.all.out_price_div.innerTEXT = out_price;

Так же можно реализовать возможность пересчета данных при изменении параметров в каком либо поле (полях) ввода данных. Для этого добавляем в необходимые теги атрибут onChange=”calculate ();“ (который вызывают функцию расчета при изменении заданного поля) либо onClick=”calculate ();“ (функция будет вызвана после одиночного клика левой кнопки мыши на объект с данным атрибутом)

Еще совет. Скорее всего будут иметь место постоянные величины (например, цена резки баннера за метр и т.д.), которые могут меняться раз в месяц или более … Для удобства администратора сайта их следует сохранить в базу и управление величиной этих параметров сделать доступным из административной части сайта. А в месте генерации JavaScript кода калькулятора при определении переменных написать код примерно такого содержания:

<?php

  ...

	echo 'var price_porezka = '.$price_1.';';  // цена за порезку
	echo 'ar price_luvers = '.$price_2.';';    // цена за люверс
	echo 'ar karman_price = '.$price_3.';';    // цена за метр кармана

  ...

?>

Где $price_1, $price_2, $price_3 – переменные заранее выбранные из базы.

Данная статья написана по мотивам разработки реального проекта =)

#div_container {
    padding: 5px;
    border: 1px solid #000;
    margin-bottom: 25px;
}

Теперь создадим стиль для списка.

#div_container ul {
    margin-left: 0;
    padding-left: 0;
        /* задаем отображение списка в строку */
    display: inline;
}

Создаем стиль отображения каждого элемента списка:

#div_container ul li {
    margin-left: 0;
    padding: 2px 10px 0 0 ;
        /* задаем разделитель между пунктами меню */
    border-left: 1px solid #000;
        /* запрещаем отображение маркеров списка */
    list-style: none;
    display: inline;
}

Следующий стиль создан для первого элемента списка, в котором не должно быть вертикального разделителя слева:

#div_container ul li.first {
    margin-left: 0;
    border-left: none;
    list-style: none;
    display: inline;
}

Теперь приведем пример кода меню:

<div id="div_container">
    <ul>
    <li><a htef="#">Link 1</a></li>
    <li><a htef="#">Link 2</a></li>
    <li><a htef="#">Link 3</a></li>
    <li><a htef="#">Link 4</a></li>
    </ul>

</div>

В заключение следует создать стиль для ссылок. Например:

#div_container ul li a, a:hover, a:link {
    text-decoration: none;
    font: 12px Tahoma;
}