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 :-)
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.
- I’ve uploaded 2 videos of FBBorderLayout in action (before 0.1 was released), you can watch the old one or the newest one.
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 “jQuery.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.25, 9.50
- 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.
- 0.3 (18th August 2008): XHTML strict doctype is now working (thanks to addwin for the suggestion)
- 0.2 (18th July 2008): regions can be collapsed
- 0.1 (25th June 2008): initial release
NOTES:
LICENSE:
FBBorderLayout is dual licensed under the GPL and MIT licenses.
DOWNLOAD:
FBBorderLayout 0.3
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 :)