Рубрика: Полезности

Анимация AJAX загрузки. Эффект размытия.

JavaScript, Без рубрики, Полезности

Давно хотел сделать так, чтобы при загрузке информации в какой-либо блок (к примеру, AJAX-ом) помимо обычного прелоадера сам блок бы еще размывался.

Собственно пример можно посмотреть здесь: https://jsfiddle.net/va61mk5t/1/

Читать далее

Интересный способ выравнивания по центру экрана модального окна

Без рубрики, Полезности

Сразу предупреждаю: способ хорош в случае, если высота модального окна < высоты экрана. Если высота модального окна > высоты экрана и сам контент страницы порождает скроллинг, то может вылезти 2 скроллинга. Этот момент можно пофиксить выставив overflow-y: hidden; у body в момент отображения модального окна.

Взято с хабра из комментов

Принцип такой:

  • создаем заголовочный блок и ставим ему следующие стили:
.modal_overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    z-index: 9;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: auto;
}
  • в этом блоке будет находится оверлей и устанавливаются правила позиционирования дочерних элементов — в данном случае самого модального окна
Читать далее

Three js — заготовка класса для разработки 3d приложения

JavaScript, Без рубрики, Полезности

На коленке набросал небольшую заготовку класса для будущих разработок 3d приложений на Three JS. М.б. кому пригодится.
Поддерживается изменение размеров окна браузера (вьюшка резировая с динамическим перерисовыванием сцены)
В примере ниже рисуется кубик с осями ординат. Поддерживается изменение положения камеры с помощью мышки.

Читать далее

HTML в PDF средствами Dompdf

PHP, Полезности

Давненько я тут не писал.

Сразу к делу: недавно столкнулся с задачей реализовать простенькую печатную форму.

На голом HTML её делать бесполезняк — можно легко столкнуться с «особенностями» браузера из которого производится печать. Собственно решил перегнать html в PDF и уже этот формат использовать в качестве печатного.

В качестве библиотеки выбрал Dompdf — она понимает стили вроде max-width и max-height и умеет работать с картинками.

Порядок действий:

  1. Собственно качаем dompdf: тык
  2. Заливаем содержимое на свой сервак.
  3. Формируем сниппет кода. Принцип прост: html-ку запихиваем в буфер вывода, а уже потом её используем в качестве содержимого PDF-ки:
Читать далее