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

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 2

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>

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