I’d like to make a very simple webpage with 3 resizeable “windows”;
I like the way CodePen’s interface looks, with the three editor windows (“HTML”, “CSS”, “JS”) on the left. I don’t need an output window on the right side.
My TopWindow would just have text, the MiddleWindow would have a few Buttons, each of wich would cause the content in the BottomWindow to change; the Bottom Window would be displaying the pictures chosen by the buttons in the MiddleWindow.
There would be DragBars between the windows, so the user could hide most of the TopWindow & MiddleWindow when they’re not needed.
Can this be done with just CSS?
I’ve gone through CodePen’s source, making a reduced version without the extraneous stuff I don’t need, but I’v’e hit a wall. I’ve gone through some of the JS, but can’t find code for moving the dragbars and resizing the windows.
As a side note, it might seem to not be working flawlessly in all browsers when moving outside of the main window and then letting go of the handle bar but this should not be a problem when used in a regular environment. Depending on the platform, Codepen doesn’t consider the code panels as part of the same window (I think) so releasing the item there won’t always trigger the script as it usually would. One could notice Codepen itself has somewhat of a similar issue.
I left the most minimal version I could think of in the pen I linked to earlier. But thinking it was kinda fun to do, I elaborated on it to add custom scrollbars. They still need a finishing touch and are only indicators for now but should later on be fully functional when it comes to dragging and clicking.
Took a few lines of code and I’ll be checking up on the tiniest of details still but it now has all the scrollbar functionality one could expect. Slightly more advanced than Codepen itself even, lol.
They’re only shown when the page itself would show them (they’re hidden outside calculated overflow), otherwise it’s left to the device’s own interface. No JS interference with normal scrolling behaviour, really. Should even have a decent fallback.
The minimal version (without scrollbars) got an update too.