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

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

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

Сразу предупреждаю: способ хорош в случае, если высота модального окна < высоты экрана. Если высота модального окна > высоты экрана и сам контент страницы порождает скроллинг, то может вылезти 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-ки:
Читать далее

Элементарные социальные share-кнопки

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

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

HTML

<a onclick="Share.vkontakte('URL','TITLE','IMG_PATH','DESC')"> {шарь меня полностью}</a>
<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {шарь меня полностью}</a>
<a onclick="Share.mailru('URL','TITLE','IMG_PATH','DESC')"> {шарь меня полностью}</a>
<a onclick="Share.odnoklassniki('URL','DESC')"> {шарь меня полностью}</a>
<a onclick="Share.twitter('URL','TITLE')"> {шарь меня полностью}</a>

JS

Читать далее