Как сделать ползунок для изменения размера блока?

Question

[Space]

Есть два div. Один 70% шириной, второй 30%. Второй обтекает первый слева. Мне нужно, чтобы на границе этих блоков была кнопка захвата (или как назвать), и чтобы, хватая и двигая влево или вправо курсором мыши эту кнопку на границе, ширина этих двух блоков зависимо изменялась. Как такое реализовать?

Может есть что готовое, но не могу сформулировать запрос.

Answer 1

[Сергей ZSA]

Igor Belka вообще то человеку надо что-то вроде этого jqueryui.com/resizable

Comments

[Space]

Да, но как сделать два зависимых?

[Сергей ZSA]

Rusnire: особа такого нигде не встречал. Я так понял нужен функционал типа codepen, когда можно менять размеры окошек html css и/или js и "браузера". Рыть похоже только в эту сторону надо https://learn.javascript.ru/drag-and-drop скрипты придется переделывать самому.

[Space]

Сергей ZSA: а можно на js получить параметр у блока width, отнять его от 100 и отправить этот параметр ко второму блоку?

[Space]

Сергей ZSA: сделал так, работает:

var list = document.getElementsByClassName("right-column-dialog")[0];
            var list2 = document.getElementsByClassName("left-column-dialog")[0];
            list.style.width = "85" - list2.style.width;

Но выполняется только один раз. Как сделать, чтобы он работал постоянно?

[Сергей ZSA]

Rusnire: пример куда-нибудь залей

[Space]

Сергей ZSA: вообще спасибо за наводку. Нашел все-таки решение jsfiddle.net/3zLRJ/4

[Сергей ZSA]

Rusnire: Установи min-width чтоб не уменьшались окошки в хлам до такого состояния wallmaker.ru/epic/view/jJAS3dEpQlp5Pk1oWHZn2Eii

[Space]

Сергей ZSA: я понял про что вы, подскажите как его прописать или хотя бы доки?

[Сергей ZSA]

Rusnire: min-width: (количество пикселей, около 30 ставить лучше)px; в .square, а также max-width, равный реальной ширине (у вас 500px) минус минимальная ширина (30px например). Но опять же хочется делать так, чтоб работало без привязки значений конкретных, а в % всё устанавливать.

[Space]

Сергей ZSA: аа вы про css, да да понял :)