Брат сделал сайт на wordpress, а меня попросил написать к нему калькулятор. Вроде бы ничего сложного — я с радостью согласилась — все-таки первая реальная работа с использованием php/sql, javascript. Калькулятор получился довольно быстро, вот только не получалось выводить результат без перезагрузки страницы. С ajax-ом помог Сергей Дегтярчук (выражаю благодарность) и наконец-то все заработало. А вторая проблема была — как из всего этого сделать плагин для wordpress — ведь просто вставить свой php файл не получится. Пришлось просмотреть все видеокурсы Андрея Морковина (спасибо ему за это — доходчиво умеет объяснять) и ура! плагин работает — калькулятор расчета тепловых потерь

Простое и элегантное решение парсинга URL на JavaScript. Ссылку подсмотрел в комментариях на хабре к тематической статье подобного решения. Параметры query (search) на выходе в виде объекта. Закинул сюда, чтобы не затерялось.

Countable.js, это небольшая библиотека, которая подсчитывает количество параграфов, вводимых слов, символов и символов с пробелами. По ссылке и демо и сама библиотека.

Настоятельно рекомендую библиотеку Formula.js. Работа с датами, с финансовыми параметрами, инженерные функции, логические операции, математические конструкции, статистические методы и работа с текстом.

Очень лёгкий, функциональный и легко настраиваемый нотификатор (не только событий) для Вашего сайта. Сообщения (несколько видов) не блокируют страницу, предусмотрен мультивывод. Notifier.success(text, title); Notifier.warning(text, title); Notifier.error(text, title); Notifier.info(text, title); Notifier.notify(text, title, imageUrl); Информацию о библиотеке получил по подписке на еженедельный журнал по Javascript (http://programilla.com/blog/siteconstruction/211.html#comments).

Google начала индексировать AJAX- и JavaScript-контент, что означает возможность для данного поисковика индексировать дополнительные виды веб-контента, например комментарии в социальных сетях. Ранее Google не индексировала комментарии, так как поисковик не умел переходить по AJAX- и JavaScript-приложениям, активно используемым в социальных сетях.

Разработчики серверных, клиентских или настольных приложений на JavaScript нередко сталкиваются с проблемами, связанными с объектами, функциями, наследованием и другими особенностями этого языка. Какие же приемы разработки приложений на JavaScript являются наиболее удачными? Данная книга дает ответ на этот вопрос, предлагая большое количество различных шаблонов программирования на JavaScript, таких как «единственный объект» (singleton), «фабрика» (factory), «декоратор» (decorator) и другие. Можно сказать, что они являются не только методами решения наиболее типичных задач разработки ПО, но и заготовками решений для целых категорий таких задач. Использование шаблонов при программировании на языке JavaScript имеет свои особенности. Некоторые из них, разработанные с позиций языков со строгим контролем типов, таких как C++ и Java, не могут непосредственно применяться в языках с динамической типизацией, таких как JavaScript. Для таких шаблонов в языке JavaScript имеются более простые альтернативы. Написанная экспертом по языку JavaScript Стояном Стефановым — ведущим специалистом компании Yahoo! и создателем инструмента оптимизации производительности веб-страниц YSlow 2.0, — книга включает практические советы по реализации каждого из рассматриваемых шаблонов с примерами программного кода. Автор также приводит антишаблоны — приемы программирования, которых следует но возможности избегать.



Скачать. Книга «JavaScript. Шаблоны»

Навеяно этим топиком по теме. Можно сказать, что это более усовершенсвованный способ, так как контентом могут выступать и изображения (картинки).
Три кита: код на JavaScript, разметка HTML, стили CSS.

1. JavaScript

function slideSwitch() {
    var $active = $('#slideshow DIV.active');
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // показываем картинки по-очереди, одна за другой
    var $next =  $active.next().length ? $active.next() : $('#slideshow DIV:first');

    // если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); });
};

$(function() {
    setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});

2. HTML

<div id="slideshow">
    <div class="active">контент 1</div>
    <div>контент 2</div>
    ..................................
    <div>контент n</div>
</div>

3. CSS

#slideshow { position:relative; height:400px; }
#slideshow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 400px; background-color: #FFF; }
#slideshow DIV.active { z-index:10; opacity:1.0; }
#slideshow DIV.last-active { z-index:9; }

Класс стиля class=«active» можно изначально назначать на желаемый div-контент. Параметр height:400px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Три кита: код на JavaScript, разметка HTML, стили CSS.

1. JavaScript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // показываем картинки по-очереди, одна за другой
    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');

    // если надо показывать картинки случайным образом, то можно использовать закомментированный код ниже
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
    $next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1000, function() {$active.removeClass('active last-active');});
};

$(function() {
    setInterval( "slideSwitch()", 5000 ); // задержка 5 секунд
});

2. HTML

<div id="slideshow">
    <img src="image_1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="image_2.jpg" alt="Slideshow Image 2" />
    ...............................................
    <img src="image_n.jpg" alt="Slideshow Image n" />
</div>

3. CSS

#slideshow { position:relative; height:350px; }
#slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; }
#slideshow IMG.active { z-index:10; opacity:1.0; }
#slideshow IMG.last-active { z-index:9; }

Класс стиля class=«active» можно изначально назначать на желаемую картинку. Параметр height:350px можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Итак, наше увлечение русским бильярдом приобретает всё более спортивные формы. Представляю на всеобщее обозрение турнирную таблицу текущего чемпионата (нашего маленького междусобойчика) по «Американке». Необходимо отметить, что игра ведётся не на вылет, но каждый с каждым. При штрафах шар не выставляется, но снимается противником, так как это логичнее выставления, ибо в противном случае партия может теоретически затянуться до бесконечности.

Учитывается:
— дата и время проведения партии;
— общее количество ударов;
— количество забитых шаров;
— результативность (процентная характеристика);
— количество свояков, чужих, дуплетов и дураков;
— штрафы (снятые шары противником).

Что касается самой верстки, то всё сделано без jQuery, написана всего одна серьёзная функция на JavaScript для реализации Drag & Drop блоков (окон) статистики по каждой партии отдельно, что приводит к удобству сравнения игр между собой. Кто имеет желание разобраться в коде, то достаточно просмотреть страницу в HTML исходнике, там всё просто и наглядно.

Таблица в данный момент находится в стадии наполнения, так как турнир ещё не окончен. Физкульт превед!