65 Comment(s)

1. Steve on Jun 27, 2008 | Reply

   Very cool! Very clever! Very useful!

   I like this very much, Thankyou Fabrizio - what a great idea!

2. Andreas on Jul 1, 2008 | Reply

   This is a great plugin!
   Would be wonderful to have features like show/hide panels and resizable. Thanks!

3. Fabrizio Balliano on Jul 1, 2008 | Reply

   @Andreas: i’ll work on that asap :-)

4. 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!

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

6. 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 :-\

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

8. Fabrizio Balliano on Jul 23, 2008 | Reply

   @Pedro Costa: I’ll try find out why, thank you for the report!

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

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

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

12. 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 :-\

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

14. 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%; }

15. Fabrizio Balliano on Aug 5, 2008 | Reply

    @addwin: thank you very much for your suggestion, I’m trying it!

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

17. Stu on Aug 15, 2008 | Reply

    center that is, sorry for double post!

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

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

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

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

22. 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 :-(((

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

24. Menno on Oct 8, 2008 | Reply

    @ ASP.NET Developer: Same here, layout works fine until used in page with form tags.

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

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

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

28. 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”

29. Fabrizio Balliano on Oct 9, 2008 | Reply

    @Asp.Net Developer: it clearly was to make people understand what a border layout is

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

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

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

33. 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!

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

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

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

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

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

39. 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 ;-)

40. Kevin on Oct 12, 2008 | Reply

    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.

41. Kevin on Oct 13, 2008 | Reply

    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

42. John on Oct 17, 2008 | Reply

    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

43. Fabrizio Balliano on Oct 17, 2008 | Reply

    @John: answered by mail ;-)

44. Ryan on Oct 17, 2008 | Reply

    @ 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

45. Ryan on Oct 17, 2008 | Reply

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

46. Developer on Oct 20, 2008 | Reply

    Kevin and Fabrizio,

    How do I can I start a panel, “collapsed” or “expanded” ? For example, I want the west collapsed when starting and the east expanded. Can this be done?

47. Fabrizio Balliano on Oct 20, 2008 | Reply

    @Developer: in my implementation you can’t start a pane collapsed, you could run the fbborderlayout() and than try to collapse a pane using a javascript call anyway.

    @Ryan: I saved your issues on our new tracker so we won’t forget about those, we’re working on a great new thing :-))

48. Developer on Oct 20, 2008 | Reply

    One needs the ability to start a pane collapsed or expanded.

49. Fabrizio Balliano on Oct 20, 2008 | Reply

    @Developer: if so you can do it with javascript otherwise please wait a new release

50. Ryan on Oct 29, 2008 | Reply

    I’ve found a solution for the issue I was having with “sliding” content going behind the other pane. While trying Dojo’s border layout the same thing happened. You have to change the CSS overflow to visible. However, with your layout I had to specify that option in the JS options for the north region. css: {overflow: ‘visible’} Odd that you can’t specify that in normal CSS. Do you create another container that is actually the north region and has a different class name?

    Also, yet one more issue. I set the north region size to ‘auto’. However, this causes east/west issues when they are collapsed. I’m thinking you calculate the top-margin or something for the collapsed container by the size setting and since it’s auto it can’t do that. So, the collapsed container shifts all the way to the top, on top of the north region.

    Thanks for your great work, this is turning out good so far.

51. Matteo on Oct 30, 2008 | Reply

    Where do you get the “ui-1.5.2.all.packed.js” file? I can’t recreate your layout without it.

    BTW, grazie per questo layout. Ho cercato l’Internet per un mese prima di aver trovato il tuo sito. Bravo per aver fato quello che gli altri non potrevano fato.

    (E scuzi il mio Italiano, e stato un bel puo di tempo di quando ero in Italia… :P)

52. Timothee on Oct 31, 2008 | Reply

    I don’t quite understand how the work is being managed. Fabrizio: are yourself, Kevin and John working together and merging code to build an authoritative plugin, or are you guys all working on your own separate forks? Which is (and where to get) the latest most feature-full version?

53. Fabrizio Balliano on Oct 31, 2008 | Reply

    @Timothee: ok you ask it, I answer :-) kevin and i (actually most of the work is done by kevin, I’ve to admin that I’ve been locked down by flu and work in these weeks) are working on a new project and we’ll annouce it very very soon…

54. Timothee on Nov 3, 2008 | Reply

    Hi Fabrizio, thanks for the clarification. I really look forward to see what you guys are coming up with. I do however have a project that require me to use a good and complete layout manager *right now*. From the posts above, I think I will use Kevin’s latest version. I hope your official update will be easy to upgrade to from that version. Thank you guys for your work!

55. Ryan on Nov 5, 2008 | Reply

    Hi, one more thing, I would like to style the open spacing. However, when the region is not resizable nor collapsable but a open-spacing is set (to make a gutter) there isn’t a div/container to style. It must just be a region margin instead? Is there good way to style that open space? Thanks

56. Kevin on Nov 5, 2008 | Reply

    I happened to look at this blog today, so here is some feedback…

    @Ryan: The current version puts a ‘resizing div’ in the spacing between borders even when resizing is not enabled, so this provides an element to used for styling.

    @Timothee: The new version will *probably* be released very soon - within days hopefully. It will be easy to update an existing layout to the new code - just by updating your options.

    FYI, the new version addresses ALL the features requested in this blog and quite a few more. Most cross-browser bugs have also been fixed. So hang in a little while longer ;)

57. Ryan on Nov 11, 2008 | Reply

    Darn, I was hopeing for some news over the weekend. Should we be watching this page for updates? Just as a new version? Thanks

58. Fabrizio Balliano on Nov 11, 2008 | Reply

    new version is coming really soon! kevin and i are totally busy in these days :-(

59. Ryan on Nov 11, 2008 | Reply

    Another one to add to your list. I’d like to style the resizer based on both region and open/closed. However, that type of CSS class is not applied to the resizer. You have resizer-west and resizer-open/closed but no resizer-west-open/closed.

    Also, should I start using the jQuery support system? http://plugins.jquery.com/project/fbborderlayout Or just keep posting things here? Thanks!

60. buzz on Nov 13, 2008 | Reply

    Hey!

    Just came over this.

    Fabrizios version works fine for me except resizing of panes. I really like it.

    But I’d like to use Kevin’s version because it’s got more features and options. The center pane gets resized when I fire up .borderlayout({…}). After that only the other north, south,… panes are updated when I resize the window. Very strange…

    I’m also hoping for a fresh release soon!

61. AJ on Nov 13, 2008 | Reply

    Great work Fabrizio and Kevin (and John)!!

    Keep up the good work fellas, as this post has proved an excellent resource for A LOT of developers, coders, part-timers and creatives who are all using, abusing, breaking and playing but ultimately supporting the JQuery library!!

62. Kevin on Nov 13, 2008 | Reply

    @Ryan: Yes, the new version has a complete set of classes on EVERYTHING - panes, resizers, togglers, etc. - providing unlimited styling options. For example:

    ui-layout-resizer
    ui-layout-resizer-west
    ui-layout-resizer-open
    ui-layout-resizer-west-open

    OR if closed:

    ui-layout-resizer-closed
    ui-layout-resizer-west-closed

    Just another day…

63. Fabrizio Balliano on Nov 16, 2008 | Reply

    go go go the new project is out and shining :-)))

64. max on Nov 20, 2008 | Reply

    Ciao Fabrizio,
    al posto degli span per gli handlers perchè non usare degli <a>?

    $T = $Ts[pane] = $(’<a href=”#” rel=”nofollow”>close</a>’);

    io ho provato e funziona anche da tastiera.

65. Fabrizio Balliano on Nov 20, 2008 | Reply

    @max: ho girato la cosa a Kevin, aspetto un suo parere. ciao grazie!

6 Trackback(s)

1. Jun 26, 2008: from FBBorderLayout 0.1: jQuery border layout released @ Fabrizio Balliano's blog
2. Jun 26, 2008: from jQuery borderlayout @ Fabrizio Balliano's blog
3. Jul 18, 2008: from jQuery border layout 0.2: collapsable regions @ Fabrizio Balliano's blog
4. Jul 27, 2008: from kleines AjaxCMS - Seite 4 - AJAX (Asynchronous JavaScripting and XML) Forum
5. Sep 29, 2008: from FBBorderLayout 0.9 | Fabrizio Balliano
6. Nov 20, 2008: from jQuery UI Layout 1.0 | Fabrizio Balliano

Post a Comment

Name (required)

E-mail (will not be published) (required)

Website