Javascript

Янв
4th

Сайт + Плагин — калькулятор стоимости услуг, CMS WordPress

Посетитель сайта может самостоятельно рассчитать стоимость услуг, вводя объём работ в соответствующие поля таблицы.

Таблиц — пять. Каждую секунду рассчитывается объём работ по каждой таблице и по всем таблицам. Результат расчёта выводится внизу, там же кнопка «Заказать», по нажатию на которую хозяин сайта получает на почту перечень работ и координаты клиента.

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

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

Хранятся данные в формате «Таблица xml Excel 2003», что позволяет экспортировать её на локальный компьютер, изменить в программе MS Excel и загрузить обратно(экспорт и импорт так же производится через админку сайта).

Как калькулятор, так и весь сайт имеет 2 оптимальных разрешения экрана — это телефон и 1000 пикселей в ширину. К сожалению, обилие графических материалов не позволило красиво растягивать содержимое на любую ширину.



Вид странички конфигурации в админке:

Сен
5th

СДЕЛАНЫ: ВОПРОСЫ ДЛЯ ШКОЛЬНОЙ ОЛИМПИАДЫ

qq_question5
qq_question2

  вопросы для школьной олимпиады с применением технологии перетаскивания на JS;

    Сделано:



  • Перетаскивание только по горизонтали — солнца(смотреть) или слов (смотреть);

  • Перетаскивание по горизонтали и вертикали — картинок-табличек(смотреть);

  • Язык — английский и арабский;


Ещё простые примеры (в последней версии не используются):

Сен
5th

Сделано: Меню из шариков

round_menu_220x360

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


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

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

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

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

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

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


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

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

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


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

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

Сен
5th

Сделан: Слайдер для магазина

giftsofsiberia_slider
Смотреть

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

Сен
5th

Сделана: Фотогалерея для UCOZ без рекламы

Sergeev_slideshou
смотреть

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



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

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

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

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

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

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

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

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