Border layout with inner border layout in the center

[Darío Javier Cravero]

Hi all,

First let me tell you this is a great solution, since it's really
lightweight, which is very important when talking about the web &
layouts.

I'm coming into a situation where I need to define a border layout
inside an outer border layout.
Following this http://www.bramstein.com/projects/jlayout/borderlayout-resize.html
and the nested layout example at http://www.bramstein.com/projects/jlayout/examples.html
I've been trying to build the proposed layout but just couldn't.

Here I attach you the code I'm currently using for building it, if
someone has an example it would be great. Any hint is appreciated.

<script type="text/javascript">
jQuery(function($) {
var containerCenter = $(".layout-center");
containerCenter.layout({ resize: false });
var containerOuter = $('.layout-outer');

function relayout() {
containerOuter.layout({ resize: false });
}
relayout();

$(window).resize(relayout);

$('.layout-outer .east').resizable({
handles: 'w',
stop: relayout
});

$('.layout-outer .west').resizable({
handles: 'e',
stop: relayout
});
});
</script>
<style>
html, body, form {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}

.layout-outer, .layout-center {
height: 100%;
}

.layout-center
{
display: inline-block;
}

.c {
background-color: rgb(220,220,220);
border: 1px solid rgb(200,200,200);
text-align: center;
width: 100px;
height: 100px;
display: inline-block;
}

.layout-outer .west, .layout-outer .east {
width: 8%;
}

.layout-outer .north, .layout-outer .south {
height: 10%;
}

.layout-center .west, .layout-center .east
{
width: 4%;
}

.layout-center .north, .layout-center .south
{
height: 4%;
}
</style>

<div class="layout-outer {layout: {type: 'border', hgap: 3, vgap:
3}}">
<div class="center layout-center {layout: {type: 'border',
hgap: 3, vgap: 3}}">
<div class="c center">
inner center
</div>
<div class="c east">
inner East
</div>
<div class="c west">
inner West
</div>
<div class="c north">
inner North
</div>
<div class="c south">
inner South
</div>
</div>
<div class="c east">
East
</div>
<div class="c west">
West
</div>
<div class="c north">
North
</div>
<div class="c south">
South
</div>
</div>

[Bram Stein]

Hello,

Thanks for the feedback. It seems you have found a small bug in the
jLayout plugin when using nested border layouts. The plugin
incorrectly selected the first descendant of the outer layout, instead
of the first child. I have corrected this bug and you can download the
new release at: http://www.bramstein.com/projects/jlayout/jquery.jlayout.js

I had a look at your desired layout, and came up with the following
example:

http://www.bramstein.com/projects/jlayout/borderlayout-resize-nested.html

I hope that is what you wanted to accomplish. Let me know if you need
more help with this particular example.

On a related note, I've also uploaded two new examples showing
customized resize bars, one with smooth resizing and the other with
resize guides.

http://www.bramstein.com/projects/jlayout/borderlayout-resize-ghost.html
http://www.bramstein.com/projects/jlayout/borderlayout-resize-smooth.html

Best regards,

Bram Stein

On Jul 14, 11:29 pm, Darío Javier Cravero <dario.crav...@gmail.com>
wrote:

> Hi all,
>
> First let me tell you this is a great solution, since it's really
> lightweight, which is very important when talking about the web &
> layouts.
>
> I'm coming into a situation where I need to define a border layout
> inside an outer border layout.

> Following thishttp://www.bramstein.com/projects/jlayout/borderlayout-resize.html
> and the nested layout example athttp://www.bramstein.com/projects/jlayout/examples.html