- This topic is empty.
November 1, 2017 at 8:50 am #262131Bob YunkelParticipant
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.November 1, 2017 at 9:43 am #262132Paulie_DModerator
Can this be done with just CSS?
Not usually…there has to be some JS involved.
BUT There is the
resizeproperty but it’s not universally supportedNovember 1, 2017 at 10:24 am #262134
In case you decide to go with jQuery anyway, here’s an example:November 2, 2017 at 7:26 pm #262157
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:November 3, 2017 at 7:35 am #262176Bob YunkelParticipant
Wow. That’s great.
Thanks a lot.
BobNovember 3, 2017 at 11:02 am #262180
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.November 3, 2017 at 1:10 pm #262184
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.November 6, 2017 at 12:33 am #262243
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.November 11, 2017 at 4:25 am #262454
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.November 13, 2017 at 9:24 am #262481
Feature test and fallbacks for viewport units and
calc()capability added. For Android, mostly…
Note that if one is not using
height: 100vhfor the
#moduleparent, two occasions of these lines can be removed:
if (!craft) item.height(gate.height());
Finished for the rest, I would think. Last thing was to correct a comma messing up the
clearIntervalof clicking the scrollbar.
To any reader, lemme know if there is still a glitch or the interface is somehow feeling unnatural.August 27, 2019 at 9:47 am #295014stegothedumpParticipant
This is excellent…how simple would it be to work vertically, like 3 cols.August 28, 2019 at 1:03 pm #295112
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.
- The forum ‘Design’ is closed to new topics and replies.