Как сделать плавающий CSS splitter (разделитель) блоков?

Question

[Игорь Пушкарский]

Приветствую!

В общем дело в том что по задумке в макете существует разделитель 2х блоков по горизонтали
сверстать его не составит проблем, проблема ка реализовать его работу?

Нашел в интернете плагин на JQuery, но не могу разобраться, то ли JS не дорабатывает то ли примеры какие то не полные.

Answer 1

[truekenny]

На этом сайте jQuery 1.3 – с ним работает.
Попробовал с 1.9.1 – не работает.
quorra.ru/#b3162b0cce19f73ad641e5c20dd6de65-7-0-11-66

Comments

[Игорь Пушкарский]

Такс, понятно, а что нет решение под JQuery 1.9? Просто не хотелось бы подключать еще 120кб

[truekenny]

github.com/jcubic/jquery.splitter работает на 1.8.3 и 1.9.1.

Answer 2

[leutsky]

алгоритм:

событие mouseup на разделителе:
— повесить обработчики событий mousemove и mouseleave на объект document

обработка события document.mousemove:
— вычислять величину перемещения мыши по вертикали и на эту величину менять высоту верхнего и нижнего блоков. Но при этом нужно учитывать допустимые границы.

обработка события document.mouseleave:
— снять с объекта document обработчики событий mousemove и mouseleave

вот и все. Все решение можно описать в пару десятков строк (+-) и без зависимости от версии jQuery
увы, с готовым решением не сталкивался и подсказать что-то конкретное трудно.

Comments

[leutsky]

судя по тому, какой Вам макет нужно сделать, лучше всего сделать свою реализацию, т.к. Вам еще нужно будет менять высоту области ввода сообщения. Хотя, с другой стороны, изменение высоты области ввода сообщения можно реализовать за счет css.

[Игорь Пушкарский]

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