Привет, мир!

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


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

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

Stickjaw.js by Xakplant

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

v0.3.0

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

 

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

Атрибуты

Пример

1:1
1:2
1:0.5

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

Атрибуты

Пример

1:1
2:1
0.5:1

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

 

Пояснение

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

Пример

h:h
Текст

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

 

Пояснение

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

Пример

Текст

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

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

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

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

 

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

Скачайте с github

https://github.com/xakplant/stickjaw

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

Пример:

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

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

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