resizeable DIVs, like CodePen's homepage

[Bob Yunkel]

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.

Any help appreciated.
Bob.

[Paulie_D]

Can this be done with just CSS?

Not usually…there has to be some JS involved.

BUT There is the resize property but it’s not universally supported

http://caniuse.com/#feat=css-resize

https://stackoverflow.com/questions/11163981/div-resizable-like-text-area

[Shikkediel]

In case you decide to go with jQuery anyway, here’s an example:

https://codepen.io/Shikkediel/pen/GgPrPK

[Shikkediel]

That was a lot more complicated than I thought with three separate windows…

It’ll likely be up for revision but here’s a JS based imitation:

https://codepen.io/anon/pen/JOKgmK

[Bob Yunkel]

Wow. That’s great.
Thanks a lot.
Bob

[Shikkediel]

No problem, looked kinda interesting to do. I also added a little resize function so the windows will get proportionally larger or smaller when changing the screen.

[Shikkediel]

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.

Update – I think I fixed that as well.

[Shikkediel]

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.

https://codepen.io/Shikkediel/pen/vWxQjr

[Shikkediel]

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.

[Shikkediel]

Feature test and fallbacks for viewport units and calc() capability added. For Android, mostly…

Note that if one is not using height: 100vh for the #module parent, two occasions of these lines can be removed:

if (!craft[0]) item.height(gate.height());

Finished for the rest, I would think. Last thing was to correct a comma messing up the clearInterval of clicking the scrollbar.

To any reader, lemme know if there is still a glitch or the interface is somehow feeling unnatural.

[stegothedump]

This is excellent…how simple would it be to work vertically, like 3 cols.

[Shikkediel]

Cheers. It would be quite a bit of work to go over all the code to convert it, more than I would currently be inclined to spend.

[Author]

Posts