Resizable frame emulation

Question

I understand that <frameset> and <frame> tag are becoming deprecated. Is there a way to emulate resizable frames? What I want is a narrow separator separating the area either horizontally or vertically, which is movable by the user so that when one side of it becomes smaller, the other side becomes larger, and vice versa. I do not want to fill in each frame with an html page like the conventional frame, but instead with some DOM materials.

I know that CSS3 has resize attribute, but that controls only the size of itself. I am not sure if this is to be used for the solution.

I don't particularly prefer using JavaScript, but I am not excluding the possibility of using it if necessary.

[This is the best I could come up with](http://jsfiddle.net/ysangkok/2YBWb/1/). JavaScript and no vertical bar (relies on CSS3's resize). Should be easily portable to vanilla JS. — Janus Troelsen, Sep 23 '12 at 02:41
No, `frames` aren't becoming deprecated **IF** you use the correct HTML4.01 doctype (same for `acronym` element in HTML4.01 / XHTML1.0 vs. HTML5 btw). Now I obviously won't use that for a client's project but maybe still for a technical documentation (or maybe not, as I wouldn't care about IE6/7 in this case and IE8 has *OK* support of things like `position:fixed` for a sidebar) — FelipeAls, Sep 23 '12 at 08:47
@Champ: yes. If you make an answer with that code isolated, you'll get the bounty. — Janus Troelsen, Sep 28 '12 at 23:16
[Frames are being *obsoleted* in HTML5](http://www.w3.org/TR/html5-diff/#obsolete-elements), not deprecated. That is, they've been removed completely. — Roddy of the Frozen Peas, Sep 29 '12 at 20:50

score 16 · Accepted Answer · answered Sep 29 '12 at 20:42

16

Do not use frameset, please. I don't think jQuery resize will help you much, either.

The best way to do this is by using a "splitter". There are several plugins for jquery that will do this in many different way and they all are actually quite simple.

I have previously used this one: http://methvin.com/splitter/

You can find a nice demo here: http://methvin.com/splitter/3psplitter.html

answered Sep 29 '12 at 20:42

Carlos Martinez T

6,458
1
34
40

This is great. I finally got what I want. Thanks. – sawa Sep 30 '12 at 05:07
Apparently this plugin is no longer maintained (2017) all the samples do not work on Chrome Version 60.0.3112.113, At least they do not show frame type views or resize capabilities. – raphie Aug 31 '17 at 20:02
1

@raphie is right about the demos not working. The problem is that jQuery isn't loading (404). However, you can still copy/paste/run the code in jsbin [like this](https://jsbin.com/catuyax/edit?html,css,js,output) – jacobq Oct 31 '18 at 21:55

score 4 · Answer 2 · answered May 28 '12 at 04:10

From my point of view jQuery Resizable or such js things is your solution. Go for it's demos.
In case of using jQuery you'll have extra possibilities:

Maximum / minimum size
Constrain resize area
Delay start
Snap to grid

Here is a sample code for jQuery Resizable default functionality:

<style>
    #resizable {
        width: 150px;
        height: 150px;
        display: block;
        border: 1px solid gray;
        text-align: center;
    }
</style>

<script>
    $(function() {
        $("#resizable").resizable();
    });
</script>

<div id="resizable">
    <h3>Resizable</h3>
</div>

score 2 · Answer 3 · answered Jun 01 '11 at 03:28

2

You may like this link for YUI http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html

Example: http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html

answered Jun 01 '11 at 03:28

mathijsbrand

413
2
16

score 1 · Answer 4 · edited May 23 '17 at 12:17

1

Janus Troelsen's solution above is great if you don't mind tables. I also found this solution by SoonDead without tables, which worked great with Chrome and FF, but had to spend a nasty amount of time for IE8. It's on StackOverflow as "Emulate Frameset Separator Behavior"

edited May 23 '17 at 12:17

Community

1
1

answered Mar 16 '14 at 09:47

user3236820

83
1
8

score 0 · Answer 5 · answered May 30 '11 at 08:12

I would look into Javascript and drag and drop support.

In fact, an emulated frameset could be just two divs and a handle between them which can be grabbed to resize. JQuery has samples to demonstrate how to resize an element: http://jqueryui.com/demos/resizable/ I don't think it would be very difficult to expand that concept to fit.

Then I would load the documents via AJAX, and this could probably replace frames completely.

Resizable frame emulation

5 Answers5

Linked