FBBorderLayout: a jQuery “border layout”
If you’re here probably you know the extjs border layout, and probably you also imagine that this page describes the project of recreating those functionalities with jQuery :-)
FEATURES:
- border layout engine, with 5 available regions, customizable using CSS, no predefined graphic so you’re not constrained into predefined structures
- collapsable: every panel can be collapsed clicking on a collapsing trigger, collapsing can also be animated
- resizable: evey panel can be resized dragging its border (disabled by default)
- border layouts can be nested
DEMOS:
- simple but nice layout, complete and similar to the classical GUIs.
- A bit more complex demo, making heavy use of different paddings and borders on every zone of the layout. It renders perfectly on every browsers.
- nested layouts.
USAGE:
- Create an HTML file
- Include both jQuery and FBBorderLayout javascript files in the HEAD section
- Directly inside the BODY (it means without container divs), create the 5 divs that compose the border layout (north, south, east, west and center)
- Use the jQuery onDOMReady feature to call “$(”body”).FBBorderLayout()”, this method accept a configuration object as a param, check the demos for the usage
DEFAULT CONFIGURATIONS:
- 5px spacing between regions
- 200px wide east region (if present in the HTML)
- 200px wide west region (if present in the HTML)
- all regions can be collapsed
SUPPORTED BROWSERS:
- Firefox 2.0, 3.0
- Internet Explorer 6.0, 7.0
- Safari 3.1
- Opera 9.50
- Google Chrome
- The only must-have region is the center one, all other regions are optional, you can safely remove them to create the border layout exactly as you want.
- Do not apply “margins” to the regions, they’re not supported and will break the layout.
- There are some issues with ie6/7 since 0.9.x, if you need to work with those browsers please use 0.3 or wait for a stable release
- 0.9.2 (12th October 2008): minHeight/maxHeight/minWidth/maxWidth options were added for resizables
- 0.9.1 (11th October 2008): animations were added and a few bugs were fixed
- 0.9 (29th September 2008): a few bugs were fixed (thanks to Matteo Ligabue), nested layouts support was added. The syntax to start the borderlayout was changed thus please check the new samples. This release has some issue with Internet Explorer, if you don’t need nested layouts or you’re not using Internet Explorer please wait for 1.0 before update.
- 0.3 (18th August 2008): XHTML strict doctype is now working (thanks to addwin for the suggestion), border regions can now be resized
- 0.2 (18th July 2008): regions can be collapsed
- 0.1 (25th June 2008): initial release
NOTES/KNOWN ISSUES:
LICENSE:
FBBorderLayout is dual licensed under the GPL and MIT licenses.
DOWNLOAD:
FBBorderLayout 0.9.2
CHANGELOG:
Steve on Jun 27, 2008 | Reply
Very cool! Very clever! Very useful!
I like this very much, Thankyou Fabrizio - what a great idea!
Andreas on Jul 1, 2008 | Reply
This is a great plugin!
Would be wonderful to have features like show/hide panels and resizable. Thanks!
Fabrizio Balliano on Jul 1, 2008 | Reply
@Andreas: i’ll work on that asap :-)
xwisdom - PHP, Javascript Tips & Tweaks on Jul 3, 2008 | Reply
Hi,
This is a wonderful plugin indeed.
I’m also in agreement with Andreas. It would be good to have dynamic resize-able borders with hide/show features.
Great plugin!
xwisdom - PHP, Javascript Tips & Tweaks on Jul 22, 2008 | Reply
Sweet! Glad to see that you have added collapsible features.
You only need to add the resize-able feature
Fabrizio Balliano on Jul 22, 2008 | Reply
@xwisdom: I’m working on it but there are a few problems with jQuery UI’s resizable thus I’ve to think to something else and it’s not so easy :-\
Pedro Costa on Jul 23, 2008 | Reply
Fabrizio,
This is very nice, but…
It doesnt work with:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
Fabrizio Balliano on Jul 23, 2008 | Reply
@Pedro Costa: I’ll try find out why, thank you for the report!
Benjamin Goldenberg on Jul 23, 2008 | Reply
FBBorderLayout looks very slick. However, I was hoping to be able to have the left pane divided into two panes. For an idea of the layout I’m trying to achieve, take a look at iTunes with the source and preview on the left and a big content pane on the right. Is this possible with FBBorderLayout?
Thanks,
Ben
Fabrizio Balliano on Jul 23, 2008 | Reply
@Benjamin Goldenberg: this can’t be done, I mean… we should be able to put a “split pane widget” inside the west region but I don’t know any widget like this. anyway do you have a screenshot of itunes? i haven’t that application on my linux box :-)
Istvan Pato on Jul 27, 2008 | Reply
I test “XHTML bug”, and I found that the program handle height calculation of msie and opera, but does not handle height of firefox:
if ($.browser.msie) {
$west.width(config.west_width).height($window.height() - center_top - center_bottom);
} else if ($.browser.opera) {
$west.height($window.height() - center_top - center_bottom - numCurCSS($west, ‘borderTopWidth’) - numCurCSS($west, ‘borderBottomWidth’) - numCurCSS($west, ‘paddingTop’) - numCurCSS($west, ‘paddingBottom’));
}
if your change “else if ($.browser.opera)” to “else” it will be works on firefox: east and west height. It works in XHTML and not XHTML mode both.
Fabrizio Balliano on Jul 28, 2008 | Reply
@Istvan Pato: hi and thank you for the debugging, the fact is that changing that elseif causes a lack of performance in firefox, hummm, i’ve to think if there could be a better solution :-\
Pedro Costa on Jul 28, 2008 | Reply
I use Safari (on windows) and have the same problem.. the height calculation is not considered. The generic ‘else’ handles it.
addwin on Aug 5, 2008 | Reply
@pedro
Just add the following code to your stylesheet to let it work with xhtml strict:
html { height: 100%; }
Fabrizio Balliano on Aug 5, 2008 | Reply
@addwin: thank you very much for your suggestion, I’m trying it!
Stu on Aug 15, 2008 | Reply
Hey this is the greatest tool i have recently found but I can’t seam to align any div’s inside of the frames ;/ which is no good maybe a fix for that would be good.
Stu on Aug 15, 2008 | Reply
center that is, sorry for double post!
Stu on Aug 15, 2008 | Reply
margin-left: auto; margin-right: auto; width: 900px; seams to work to fix center align for divs inside of the frames
Stu on Aug 15, 2008 | Reply
sorry to keep posting i assume you will read this and just delete it now. so these are some suggestions
how about 100% width on west and east or even center
the page looks great but when some one has small monitor resolution some of the page will be cut off because the east and the west are at a hard solid width and not a %, hope i explain my self :)
Adam on Sep 24, 2008 | Reply
Amazing script. Can’t wait till you add the resizables. Split columns would be great. I have a web app that I’m designing that I’d like to put into an Outlook style layout.
maxb on Oct 1, 2008 | Reply
spettacolo fabrizio!
ci vorrebbe solo un drag sulle maniglie.
ma forse l’hai evitato per qualche buona ragione.
cmq taggo subito
Fabrizio Balliano on Oct 1, 2008 | Reply
@maxb: grazie max! effettivamente forse il drag sulle maniglie sarebbe meglio, pero’ ci vorrebbe almeno una linea “proxy” che ti faccia vedere che si sta muovendo tutta l’altezza o la larghezza… insomma più che altro mi servirebbe tanto tempo che purtroppo non ho :-(((
ASP.NET Developer on Oct 6, 2008 | Reply
if you try to use this is in asp.net application, that has a form tag, one of the samples work. How you make it work with a .NET web form?
Menno on Oct 8, 2008 | Reply
@ ASP.NET Developer: Same here, layout works fine until used in page with form tags.
ASP.NET Developer on Oct 8, 2008 | Reply
Ok, this is not working when there is a form in the html page. Also I don’t know how you can compare this to the extjs layout manager, maybe the “functionality” is there, but the look is not as good as the extjs. Is this thing skinable?
extjs, I think not. on Oct 8, 2008 | Reply
Far from extjs layout manager. The effects are missing, the look and feel is missing, it’s a very crude attempt at getting what extjs has. The two just don’t really compare at all.
Fabrizio Balliano on Oct 9, 2008 | Reply
@ASP.NET Developer: I never told I create an extjs clone, this is only the borderlayout engine, nothing more. Skinnable? use CSS, they can do everything, and you are not constrained by predefined graphic like other tools do.
Asp.Net Developer on Oct 9, 2008 | Reply
Ok, well I was just reading your first statement at the top of this page: “If you’re here probably you know the extjs border layout, and probably you also imagine that this page describes the project of recreating those”
Fabrizio Balliano on Oct 9, 2008 | Reply
@Asp.Net Developer: it clearly was to make people understand what a border layout is
Fabrizio Balliano on Oct 9, 2008 | Reply
@ASP.NET Developer: tried with forms in the page and it seems to me that everything works fine, if you’ve a form directly inside the body tag, obviously you’ll have to $(”form”).FBBorderLayout() instead of $(”body”).FBBorderLayout().
Kevin on Oct 10, 2008 | Reply
Hello Fabrizio. Thanks for the script - I was looking for something exactly like this. However, this is missing a lot of functionality I need, SO I HAVE COMPLETELY REWRITTEN IT FROM SCRATCH. I am going to email you this with a demo page, but I’ll mention a few features here…
Most code duplication has been removed and replaced with generic methods.
Almost all settings are customizable ‘by side/pane’ now, and the config options are far more extensive. For example, each side can have different spacing, different styles, etc.
Fully functional resizing with the ability to overlay ‘collapse’ buttons over the resize bar.
Collapsers can have different sizes when open or closed. They also auto-size to full-height, and/or shrink so they are never larger than the pane they are attached to.
Panes will auto-hide if there is not enough room to display them.
Callbacks for each pane for onResize, onOpen and onClose
Ability to auto-resize inner-layouts when the window resizes - or any other element inside a pane.
A selection of customizable animations for open/close.
I haven’t yet tested it fully in Firefox and Opera, but all CSS size calculations are encapsulated in two helper functions, so refining this is very easy.
Oh, and it works with HTML 4.01 STRICT doctype, which it didn’t before - this is what first got me looking at the code to see if I could fix it, and one thing led to another…
I’ll email you what I have and you can decide how you’d like to use it. I created this for my own use, so I’m giving it to you since I used your work as a starting point - though there is not a single line of your code left!)
Kevin on Oct 10, 2008 | Reply
I thought I saw an email address on your website, but I guess not! So…
I’ve put the demo on an old website:
http://allpro.net/borderLayout/demo.htm
You can download it as a zip-file:
http://allpro.net/borderLayout/borderLayout.zip
There are plenty of tweaks needed to make this perfect, but it’s not bad so far.
I’m hoping someone else will take over and take it to the next level.
Cheers
Fabrizio Balliano on Oct 10, 2008 | Reply
@Kevin: just adding my mail on the top-right corner, thank you for the tip! I’m also looking at your project, I was already adding animations but I’ll take a look at your ideas, thanks for sharing!
José Carlos on Oct 10, 2008 | Reply
I have a problem with IE6 and IE7, the dimension of the .fbbl_south_collapser and .fbbl_south_east are differents, not equal tha .fbbl_south_north and .fbbl_south_wast. How i do for finish with this problem???
Kevin on Oct 10, 2008 | Reply
Hey Fabrizio, here is a tweak to my resizable method… When resizing a pane, this will HIDE the collapser until finished resizing. (demo has this change)
function initResizable
start: function (e, ui) {
$panes[side].css({ zIndex: 1000 });
if ($collapsers[side]) $collapsers[side].hide();
}
stop: function (e, ui) {
$panes[side].css({ zIndex: 1 });
onPaneResize(side);
if ($collapsers[side]) $collapsers[side].show();
}
Kevin on Oct 10, 2008 | Reply
Another patch…
ui.resizable ‘detaches’ panes from the bottom and right edges, preventing the panes from moving/sizing correctly if the container is subsequently resized.
I’ve updated onPaneResize() to ‘reattach’ the pane to the correct edges after resizing.
The updated file can be downloaded at: http://allpro.net/borderLayout/js/jquery.borderlayout.js
Kevin on Oct 11, 2008 | Reply
Update to my demo…
Panes can now ‘auto-size’. Setting size=’auto’ (or anything not >0) set the initial size of the pane to fit the pane’s contents.
I added this because I use the North pane for a toolbar, and needed the pane to fit the toolbar height perfectly.
Auto-sizing is most suitable for north/south panes, but also works for east/west panes.
Also added minSize valiation to avoid errors when trying resize a pane.
Download: http://allpro.net/borderLayout/js/jquery.borderlayout.js
This ‘inner layout’ is auto-sized: http://allpro.net/borderLayout/demo.htm
Kevin on Oct 11, 2008 | Reply
Sorry to keep posting here Fabrizio, but I want to let you know about updates in case you are reviewing or testing my version. I’m using borderLayout on a project right now, so as I find issues or new requirements, I’m updating the script.
If you prefer I email the info instead of posting it here, just let me know.
Fabrizio Balliano on Oct 12, 2008 | Reply
@Kevin: you’re doing a great job, thank you for keeping me up-to-date, I was just thinking, north/south pane should be autosized in my implementation too (but i could add this feature for the east/west too). I should also add the minsize/maxsize and the callbacks!
@José Carlos: that’s the bug I can’t fix since 0.9 (wasn’t in 0.3…), I’m working on it, suggestions are welcome and really appreciated ;-)