Stickjaw.js by Xakplant

Stickjaw — это маленькая JS библиотека для управления пропорциями блоков относительно друг-друга. Благодаря the Stickjaw вы можете делать ширину блока равную высоте и обратно, задавать пропорции или делать размер относительно другого блока. Если вы хоть раз задавались целью сделать какой-то html-блок по высоте или ширине другого или сделать высоту и ширину блока одинаковой то вы знаете что не всегда это удаётся и приходиться потратить много времени на это.

v0.4.0

Подключить свежую версию

<script src="https://sourse.xakplant.ru/lib/stickjaw/0.3.0/stickjaw.min.js"></script>

Высота равна ширине или пропорционально ней

Атрибуты

data-proportion-h="1" //Высота равна ширине 
data-proportion-h="2" //Высота в 2 раза больше ширины 
data-proportion-h="0.5" //Высота в 2 раза меньше ширины

Пример

1:1

1:2

1:0.5

Ширина равна высоте или пропорционально ней

Атрибуты

data-proportion-w="1" //Ширина равна высоте 
data-proportion-w="2" //Ширина в 2 раза больше высоты 
data-proportion-w="0.5" //Ширина в 2 раза меньше высоты

Пример

1:1

2:1

0.5:1

Высота блока равна выстоте другого блока

data-proportion-targer-h="1" data-proportion-target="target"

Пояснение

data-proportion-target=»target» — задаёт id блока пропрорционально которому нужно сделать высоту текущего блока

Пример

h:h

Текст

Ширина равна ширине блока

data-proportion-targer-w="1" data-proportion-target="target

Пояснение

data-proportion-target=»target» — задаёт id блока пропрорционально которому нужно сделать высоту текущего блока

Пример

w:w

Текст

Высота у всех блоков одинакова

Чтобы сделать одинаковую высоту у всех блоков, которые имеют общего родителя родителя, нужно добавить для родительского блока атрибут:

// Атрибут для родительского блока 
data-parent-alo="default"

Высота в этом случае будет равна высоте самого высокого блока.

Если ваши блоки имеют многоуровневую вложенность то в атрибуте нужно прописать строку селекторов как в css. Пример:

/** Атрибут для родительского блока если потомки к которым нужно применить Stickjew имеют * вложенность с многими уровнями */ 
data-parent-alo=".col-md-12 .row .col-md-4"

Как использовать использовать?!

Скачайте с github

https://github.com/xakplant/stickjaw

Подключите в футере

Пример:

<script type='text/javascript' src='https://sourse.xakplant.ru/lib/js/stickjaw.min.js'></script>

Инициализация

Создать скрипт после подключенного Stikjaw.

<script> var sj = new SJ(); </script>

Для более тонкой настройки вы можете воспользоваться документацией на github