Gone were the days of framesets during the late 90s. Usability studies then showed that frames (not iframe) are detremental. The Web 2.0 platform has made the frames concept emerge once again in another form to simulate interfaces that are found in desktop software. As a frequent Yahoo! mail or even Live mail user, you probably have noticed that you can resize reading panels by dragging the sliders/helpers. In this era, we are now talking about divs not frames and making them behave does take quite a bit of effort in your CSS and JavaScripting.
I am approaching this problem from a JavaScript perspective, the CSS to make it work is still daunting if you don’t have a firm concept of it. Let’s look at a illustration of what the example layout will be.
To make #v-slide and #h-slide work as a slider/resizer, just simply do this.
$(“#v-slide”).jSize({ type: ‘left-right’, c1: ‘#left’, c2: ‘#right’, static: ‘#left’ });
$(“#h-slide”).jSize({ type: ‘top-bottom’, c1: ‘#top’, c2: ‘#bottom’, static: ‘#top’ });
Let us look at the code above and see what it means.
type: (left-right | top-bottom) those are the two choices for your slider c1: (jQuery css selectors) means the left container or the top container c2: (jQuery css selectors) means the right container or the bottom container static: (jQuery css selectors) the container that has min-width and max-width specified on their CSS (either c1 or c2).
Word of caution: min-width and max-width for your container plays an extremely important role to prevent the frames from breaking.
