I have windows that pop up and are draggable and resizable. Everything works great except that I need the resizing window to also resize a div within it. That is easily accomplished by setting alsoResize: 'selector' however, each instance of this window has the same div within it with the same class name. If you resize one window, it resizes the inner divs of ALL open windows.
$(chatWindow).draggable({ handle: '.dragHandle', containment: 'window', stack: '.chatWindow' })
.resizable({ resize: function (event, ui) {
api.reinitialise();
},
alsoResize: chatWindow + ' > .chatTerminal',
start: function (event, ui) {
var currentPosition = api.getContentPositionY();
api.scrollToBottom();
var maxPosition = api.getContentPositionY();
api.scrollToY(currentPosition);
var isAtBottom = (currentPosition == maxPosition);
$(chatWindow).data('isAtBottom', isAtBottom);
},
stop: function (event, ui) {
if ($(chatWindow).data('isAtBottom'))
api.scrollToBottom();
},
minHeight: 125,
minWidth: 250
});
alsoResize: chatWindow + ' > .chatTerminal', doesn’t work for selecting the child element. I can’t use .find because alsoResize only takes a selector. The obvious quick solution would be to append the window name (which is unique for each new window) to the inner div and then use an id selector on the inner div. I am just curious if there is a better way to pin down a child element only using the selector for alsoResize.
channelis the unique id of the main window, so I just appended that same unique id onto the child div when creating the window. Then I can just usechatTerminalto reference it from the alsoResize option. I am listing this answer in case nobody answers and I will accept it. However, if any of you have a better way to select a child from within a selector string, please tell me 🙂