Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design resizeable DIVs, like CodePen's homepage

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #262131
    Bob Yunkel
    Participant

    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.

    #262132
    Paulie_D
    Member

    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

    #262134
    Shikkediel
    Participant

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

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

    #262157
    Shikkediel
    Participant

    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

    #262176
    Bob Yunkel
    Participant

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

    #262180
    Shikkediel
    Participant

    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.

    #262184
    Shikkediel
    Participant

    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.

    #262243
    Shikkediel
    Participant

    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

    #262454
    Shikkediel
    Participant

    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.

    #262481
    Shikkediel
    Participant

    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.

    #295014
    stegothedump
    Participant

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

    #295112
    Shikkediel
    Participant

    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.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Design’ is closed to new topics and replies.