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 :-)

PROJECT SUPERSEDED:
Many of you may already know Kevin and I were working on a new project joining our forces, well here you have the most powerful jQuery UI Layout, all info on the official website! This page will remain for historical reasons but the software will me unmaintained (download the new project instead).

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:

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:

79 thoughts on “FBBorderLayout: a jQuery “border layout”

  1. Pingback: FBBorderLayout 0.1: jQuery border layout released @ Fabrizio Balliano's blog

  2. Pingback: jQuery borderlayout @ Fabrizio Balliano's blog

  3. Pingback: jQuery border layout 0.2: collapsable regions @ Fabrizio Balliano's blog

  4. Fabrizio Balliano Post author

    @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 :-\

  5. Pedro Costa

    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”

  6. Benjamin Goldenberg

    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

  7. Fabrizio Balliano Post author

    @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 :-)

  8. Istvan Pato

    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.

  9. Pingback: kleines AjaxCMS - Seite 4 - AJAX (Asynchronous JavaScripting and XML) Forum

  10. Fabrizio Balliano Post author

    @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 :-\

  11. Pedro Costa

    I use Safari (on windows) and have the same problem.. the height calculation is not considered. The generic ‘else’ handles it.

  12. Stu

    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.

  13. Stu

    margin-left: auto; margin-right: auto; width: 900px; seams to work to fix center align for divs inside of the frames

  14. Stu

    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 :)

  15. Adam

    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.

  16. Pingback: FBBorderLayout 0.9 | Fabrizio Balliano

  17. maxb

    spettacolo fabrizio!
    ci vorrebbe solo un drag sulle maniglie.
    ma forse l’hai evitato per qualche buona ragione.
    cmq taggo subito

  18. Fabrizio Balliano Post author

    @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 :-(((

  19. ASP.NET Developer

    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?

  20. ASP.NET Developer

    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?

  21. extjs, I think not.

    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.

  22. Fabrizio Balliano Post author

    @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.

  23. Asp.Net Developer

    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”

  24. Fabrizio Balliano Post author

    @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().

  25. Kevin

    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!)

  26. Fabrizio Balliano Post author

    @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!

  27. José Carlos

    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???

  28. Kevin

    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();
    }

  29. Kevin

    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

  30. Kevin

    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.

  31. Fabrizio Balliano Post author

    @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 ;-)

  32. Kevin

    Resizing changed…

    I wasn’t happy with the resizing method. Overlaying the collspaser button using an offset was a hack. Because ui.resizable can only put the bar ‘inside’ the pane, it really complicated the HTML. So…

    I changed the resizing to use a ui.draggable ‘resize bar’ instead. This puts the bar ‘outside’ the pane in the ‘spacing’ area. The collspase ‘button’ (span) is centered inside this ‘bar’ (div). Everything can be styled in CSS.

    Later I’ll polish the code to minimize the CSS required for centering the ‘collapse button’ on the east/west panes. I won’t get to this for a day or two though, so I updated the demo with where I am now. It is fully functional: http://allpro.net/borderLayout/demo.htm

    Both demo.htm and jquery.borderlayout.js have changed – I made a new zip file.

  33. Kevin

    Much Much Better!

    I rewrote resizing – it works perfectly now. It even prevents one pane from ‘overlapping’ another (except when the container is resized – todo). Since the resizer bar is ‘outside’ the pane, this eliminates the nested divs I had to use before. It also provides unlimited design options for the resizer bar and the collapse button, with options and css classes to control absolutely everything.

    I streamlined ALL the code and options, and exposed the primary data and methods. The east pane in the demo shows how easy it is to control panes now. This means a ‘button’ could be used to show/hide a pane, instead of using a resizing-bar/collapser button. This provides even more design options.

    There is only minor testing and refinement left to be sure every combination of options works. Plus some tweaks may be needed for different browsers and doctypes. Other than this, it is pretty close to perfect – or at least good enough for my need.

    The demo and zip-file have been updated: http://allpro.net/borderLayout/demo.htm

  34. John

    Hi Kevin.

    I believe you missed putting in some accordion script. I noticed the demo you have up on your server isn’t working. I have been working with both yours and Fabrizio’s. Both are great work. I have added some functionality to yours and updated the demo. I needed the ability to completely remove/add regions dynamically and not just collapse them. I believe I have it all put together. I’m new to jquery and I’m sure it can be done better.

    If you care to take a look, you can access the demo at: http://innovativecsg.com/jqborderlayout/demo.htm

  35. Ryan

    @ Kevin and Fabrizio

    I need to hide the “spacing” between the north and south panels. They are set to no resizing and not collapsable but the “spacing” still shows up. Is there a way to hide that? I would need the “spacing” for east and west yet though. Thanks

  36. Ryan

    @ Kevin and Fabrizio

    Hi, scratch my first comment. Kevin’s version has the ability to do what I needed.

    However, I’ve run into a couple “quirks”. First, I’ve specified a min and max width for the sides. But the resize bar can be dragged beyond the min and max. It will only resize it to the min or max but I’d rather not even have the bar go beyond those limits.

    Also, I have a drop-down menu in the north panel. The “drop” part should (jquery.slideDown) appear above everything else on the layout. However, with the layout it seems to increase the north pane, making it look like an iframe. You would have to scroll down in the north pane to see the “drop” part. I have tried adjusting the z-index with no success.

Leave a Reply

Your email address will not be published. Required fields are marked *