Javascript

Jan
8th

Site + WP plugin – price calqulator, CMS WordPress

Visitor can easy calqulate price of needed job amount and order it by pressing “order” button.

Site owner receive this order by e-mail with visitor’s contacts data and jobs list.

On calqulator’s page we have 5 tables. Every second JS calqulates price on each table and total price (look at bottom of this page)

Site administrator can change any field of table on corresponding administrative page.

Every time administrator changes values – plugin makes a cashe of page(calqulator’s tables) output. This cashe allow page to be downloaded fast, without server’s processor loading every time visitor comes to page.

Table values are stored in “table xml Excel 2003″, so we can download it’s content to home PC. And change it in MS Excel program. Downloading and uploading can be performed on administrative calqulator page.

This site has two optimal width resolution: for 1000px width monitor and for mobile phone because of complex graphic of fedback form.

Sep
5th

(Made) Sсhool quiz in WWW

qq_question5
qq_question2

  School quiz questions with drag-and-rrop in JS and HTML;

    Done:



  • Drag-and-drop in one axis – Sun(Look) or words (смотреть);

  • Drag-and-drop on all the screen – pictures(Look);

  • Language – english and arabic;


Some more simple questions(not used in last version):

Sep
5th

(Made) Round menu

round_menu_220x360

    Оригинальное 2-х уровневое меню из шариков


Требовалось:

  • Исходное состояние – левый столбик(главное меню) развёрнут, правый – подменю скрыт;

  • По наведению курсора мыши на шарик из левого столбика – шарик увеличивается в размере, показывается меню уровня 2, относящееся к этому шарику;

  • Конечное состояние: по нажатию левой кнопкой мыши на шарик-пункт меню или подменю – переход по ссылке на соответствующий раздел сайта.

  • После этого: в подменю шарик пункта меню в котором вы находитесь закрашивается;

  • Шарики должны быть прозрачные.


  Наиболее сложным оказалось плавно увеличивать размер кольца – шарика.

Это можно реализовать тремя способами:

  • Математически – рисовать окружности заданного радиуса;
  • на СSS3 – растягивать рисунок-фон блока при увеличении его размера;
  • Вставить картинку, поверх неё вставить текст и растягивать её по ширине растущего блока. Однако это решение противоречит спецификации CSS, требующей фиксированный размер картинок.


Первый способ не работает в IE, второй не работает в старых броузерах(не понимающих CSS3), поэтому был реализован третий вариант. Он работает во всех броузерах.

Ещё можно было бы комбинировать первые два, подставляя для IE другую таблицу стилей. Но Microsoft отменяет условные комментарии “if IE” начиная с IE 10. При этом заявляет о том, что теперь не будет способа идентифицировать новые версии IE.

Sep
5th

Made: slider for E-shop

giftsofsiberia_slider
Смотреть

Слайдер связан с xml-файлом, в котором хранятся данные: наименование, цена, описание товара. Эти данные выводятся при выборе какого-либо товара из слайдера внизу страницы.

Sep
5th

(Made): slider for photographer site (mootools)

Sergeev_slideshou
смотреть

    Достоинства:



  • Фотогалерея для UCOZ без рекламы – бесплатно! , не требует MySQL и PHP

  • Фотограф(не специалист по HTML) может легко добавлять и удалять фотографии, менять количество фотографий;

  • При запуске страницы автоматически рассчитывается количество страниц в фотоальбоме, номера всех страниц вставляются в страницу в нижнем левом углу. При нажатии на номер страницы – она появляется на экране;

  • Каждые 10 секунд появляется новый большой слайд на экране, соответствующий маленький слайд в левом “меню навигации” подсвечивается;

  • При нажатии на кнопки вперёд-назад появляется следующий или предыдущий слайд;

  • При переходе на другую страницу её номер выделяется

  • На последней странице для красоты левое меню навигации дополняется картинками с первой страницы фотоальбома;

  • Реализовано на Mootools.js – это более сложный аналог jquerry. Может быть доработан желаемыми эффектами;