jQuery ajax loader

Да-с, такая банальная вещь, как необходимость показать сообщение «Идет загрузка» во время ajax-запроса, привела меня к созданию своей «легкой версии» без картинки. Работает он глобально на всей странице, закрывая все элементы полупрозрачным слоем. Лоадер работает на jQuery, состоит из трех частей: HTML, CSS, и JS-кода.

ajax loader example

Итак,
html:
<div id="loader"><span>Загрузка...</span></div>

javascript:
<script>
  // вешаем колбэки для всех jQuery.ajax-запросов
  $('#loader').ajaxSend(function(){$(this).show()})
  .ajaxStop(function(){$(this).hide()});
</script>

css:
#loader {
  position:fixed; display:none;
  top:0; left:0;
  height:100%; width:100%;
  background:#ccc; opacity:.9;
}
#loader span {
  display:block; position:absolute; right:4px; top:4px;
  color:#fff; background:#C71D72;
  padding:5px 10px;
  -webkit-border-radius: 5px; -moz-border-radius: 5px;
  border-radius: 5px; cursor:default;
}

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

Сделал новый сайт

dskrestov

С пылу, с жару, налетай! Запрограммировал новый сайт — портфолио дизайнера Дмитрия Крестова!

Обильно использованы эффекты из jQuery, даже подумываю, как бы их сократить. В интерфейсе флеш использован НЕ БЫЛ, только javascript!

В эксплодере подтормаживает анимация, но в остальном, для первого проекта на jQuery, сойдет.

ini.js

Есть такой броузерный редактор с подсветкой кода — editArea.

editArea INI syntax highlight

Вот список языков, которые поддерживаются, но можно добавлять и свои:
basic, brainfuck, c, coldfusion, cpp, css, html, js, pas, perl, php, python, robotstxt, ruby, sql, tsql, vb, xml.

Мне приспичило подсветить INI-файлы, и я создал свою настройку ini.js.

Установка: скопировать файл ini.js в папку edit_area/reg_syntax/.

Javascript: метод класса как обработчик события

Задача: сохранить доступ к переменным класса через this при запуске из какого-нибудь события (event).
В данном примере назначаем метод m класса www для события window.onresize.
(далее…)

Javascript class

Классы на JS. Миф или реальность? 😉

Чтобы самому не забыть как устроен prototype в JavaScript, приведу небольшой пример.
(далее…)

Javascript: window.onError или как убрать отображение ошибок

Есть такой замечательный прием, который позволяет вообще не отображать ошибки JaveScript на странице. Я его позабыл :-). Начал искать и ни одного приличного результата не нашел. Лишь какой-то итальянский сайт помог в этом вопросе. Это чтобы легче находить (далее…)