Привет, мир!

Личный блог Бориса Черепанова


когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...

Перейти в блог

Stickjaw.js by Xakplant

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

v0.3.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 блока пропрорционально которому нужно сделать высоту текущего блока

Пример

Текст

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

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

// Атрибут для родительского блока
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