Forums

Give help. Get help.

  • # November 1, 2017 at 8:50 am

    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

    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

    # November 1, 2017 at 10:24 am

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

    # November 2, 2017 at 7:26 pm

    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

    # November 3, 2017 at 7:35 am

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

    # November 3, 2017 at 11:02 am

    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

    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

    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

    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

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag