Самый простой jQuery-слайдшоу контента для сайта

Навеяно этим топиком по теме. Можно сказать, что это более усовершенсвованный способ, так как контентом могут выступать и изображения (картинки).
Три кита: код на 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 можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Самый простой jQuery-слайдшоу картинок для сайта

Три кита: код на 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 можно менять на собственное усмотрение. Алгоритм вывода случайным образом можно усложнить и усовершенствовать. Более того, можно изменить анимационный эффект на свой.

Проверка занятости (уникальности) персональных данных без перезагрузки страницы при регистрации

Есть несколько готовых библиотек, которые позволяют без перезагрузки страницы проверять уникальность вводимых данных без перезагрузки страницы по технологии AJAX (в статье речь не о них, но о простом «велосипеде» на jQuery). Это в подавляющих случаях используется в формах регистрации на сайтах. Наример, постановка задачи: необходимо ввести Ник (ФИО) и E-mail и автоматически в фоне проверить, есть ли такой же Ник и такой же электронный почтовый адрес уже в базе зарегистрированных пользователей.



( Читать дальше )

Связанные динамичные списки Select без перезагрузки страницы

Очень часто сталкиваюсь с вопросами реализации связанных динамичных выпадающих списков (select), очень много методов, самых различных, даже JSON в некоторых используется, что на мой скромный взгляд только дублирует данные из базы и создаёт банальную избыточность.

Однажды познакомился с $.ajax (JQuery), который может передавать данные методами GET или POST и понял, что связанные списки, это проще простого.

Ниже описан метод с использованием базы данных. Вся красота решения состоит в написании двух маленьких (похожих друг на друга) функций на JavaScript и одного исполняемого файла на PHP с кодом в 20 строк алгоритма переключения и генерации.

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



( Решение проблемы )

Самая простая капча на JavaScript

Предлагаю поставить жирную точку в капчах (я уже писал о самой простой капче, вот предлагаю более простой и усовершенствованный вариант). В этот раз необходимо человеку вписать сумму двух чисел, которые не изображены на картинке, но вставлены в блок посредством innerHTML и всё сделано только на JavaScript, без использования PHP. Суть капчи в том, что случайным образом генерируются два числа, а следовательно при просмотре страницы в исходном коде невозможно (ни явно, ни косвенно) определить выражение.

Самый главный вопрос в поиске аналога функции PHP и JavaScript для передачи контрольной суммы. Этот вопрос решается благодаря одному из самых распространённых в интернете алгоритмов шифрования MD5. Эта функция есть и в PHP, и написана на JavaScript, и! без труда находится по поиску в интернете.

( Читать дальше )

Самая простая капча

Всем зачастую приходится писать систему защиты от спамеров, когда занимаешься разработкой гостевой книги. Бывает так, что нет GD библиотеки для изображений на сервере. Поэтому не получается сформировать проверочные символы в виде имиджа. Предлагаю метод как сделать простую капчу используя только javascript, а в частности innerHTML.

Вид капчи будет в виде строки с арифметическим действием (в данном случае сложение) между двумя цифрами. Код на PHP следующий:

( Читать дальше )

Простой пример.

Я не хочу писать о том как установить Flex Builder и как его сконфигурировать. Причина не в моей лени, причина в том что если это человеку интересно он откроет гугл и получит тысячи ссылок как это сделать. Также писать пример использования какой либо компоненты просто скучно — есть TourDeFlex в котором подробно рассказано как пользоваться компонентами.

Мой коллега, архитектор и ведущий разработчик в крупнейшем проекте нашей компании как то попросил меня посмотреть материал который он подготовил для собеседования претендента на должность разработчика. Это был код и вопрос заключался в следующем — объясни мне пожалуйста что происходит в коде и чтобы ты изменил. Ответ подразумевал подробный анализ и, если это необходимо, рефакторинг кода. Пример приводить я не буду по двум причинам — я не могу выносить конкретные примеры из моей работы и само по себе задание достаточно сложное и подразумевает наличия не только знаний Flex, но и в общем практики программирования. Но сейчас вспомнив это задание я подумал что для человека который только начинает и которому это действительно интересно нужен совет. Как и что сделать. Не кусок кода, а обсуждение и выяснение причин и следствия.

( Давайте поиграем )
  • +3
  • 24 июля 2010, 09:39
  • cyril
  • 23

Класс для загрузки изображений на сервер. Часть 2

Продолжаю статью для совместного перевода. Пишите либо в комментах, либо в личку. Я по-ходу дела буду обновлять саму статью.

( Под катом установки для манипуляций с подключенной библиотекой GD2+. )

Webmoney предлагает заработать всем украинцам, у кого есть сайт

Цитирую с официального сайта:
Наша партнёрская программа позволит заработать на приёме платежей за мобильную связь, интернет, ТВ в Украине. Вам достаточно встроить Виджет в свой сайт, либо реализовать несложное программное взаимодействие между вашим сайтом и ukrbuy.com (скоро). Накопленное вознаграждение вы будете получать на свой U-кошелек, при этом требования о минимальных оборотах за день\месяц — отсутствуют!

В чём ваша выгода?
1) Вы предлагаете посетителям вашего сайта дополнительный сервис (оплата услуг операторов и провайдеров Украины).
2) Вы зарабатываете на оплате услуг.
3) Вам не нужно заключать договора ни с операторами\провайдерами, ни с нами.

Сколько вы зарабатываете?
Далее по ссылке большая таблица (около 50 позиций и список будет расширяться!).
Не забываем смотреть статистику:

Яндекс цитирования