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.

Answer 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"

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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>