The container can be set to draggable and resizable by adding “draggable” and/or “resizable” to the class attribute; ther’s a custom attribute called buttons that accept: i [iconize], m [minimize], c [close] as value to add buttons to the buttonbar. You can also add a left top corner icon by adding the attribute “icon” with the icon path as value.

I’m working to a div box model container with many new feature; hope soon here!

88 Responses

Hi Matteo, I’ve been working with your containers and I am a little new to js development and I was wondering if you could help me out. I have a table that I have created that is filled with information from a database, Upon clicking an item within the table I want to create a container that will load more information about the item selected within the container. The problem is that I want the possibility to have multiple containers open at one time. The way I’ve been trying so far is pre-creating the template containers then $(‘#’).hide(); them until the data is populated then .show();. I’ve looked into using js to create divs but have had little success. Thank you for your time

Hey Mateo first of all your mbcontainer is absolutely incredible. I just wanted to show you what we’ve done with it. I teach web development and my students and I created this website using your mbcontainer as the container for everything:

Now to my question. Everything works fine in firefox and chrome (no surprises there) but in IE 9 some of the functionality has died. The windows work but they aren’t draggable Is there something we could do to the javascript that would be a quick fix? Any help would be very appreciated thanks for your amazing work!

Hi Dave, All the demo files you find in the download package work fine on IE9; the difference I can see is that you are including an old version of jQuery UI library; you could try including the latest release of it and see if it works. Bye,

Ok I love you, not in a gay way but in the “you are the most amazing person in the world” way (: I used the new jquery ui and at first it didnt’ work. Then I used the same jquery file you’re using and BAM all is good. Thank you so much man, I almost was at the point of ditching it and making a new one even though I loved it. Also thanks for getting back to me so quickly as well. If you ever want to show my site to show what can be done with your plugin go for it. THANK YOU SO MUCH!!!

I have question about “how to” I have default container with data that will be loaded form php file, so I can give in param content:’test.php’. But i want to create link so container show up when user click on it like that:link and as you see i will need to pass param to a php file that will load content depend on that param. In that container there will be form. also after click submit there will be response like content updated or failed. Is it possible to create such a creating box function ?

Hello, i would want to congratulate you for your job, it’s very nice. I’ve some problems using mbContainersplus: – how can i block the container in the area of the screen(like in the demo page), because my containers can be dragged at the right and at the bottom, outside the page (browser adds scrollbars) – i use containers to display a , and i use the datePicker function from jquery UI, but the date picker appears under the containers, instead of beeing on it.

Using this you should not have the problem… for the datepicker UI issue, my containers get the higher zIndex in the page; so you should find a method to bring to front your datepicker component… I don’t know if datepicker.UI has its own method… I’ll give a look. Bye, Matteo

1. I’m using v 1.2 and I’d like to convert to Plus. How do I do that? 2. Can I call a container from a text link with dynamic contents? I’ve got a list of computer users and I’d like to pull up info about each one from a DB – not really an option to include a container for each one as page starts up. =(

Hi Jason, 1. The 1.2 version uses a TABLE box model to draw containers and the Plus version use a DIV box model; so you should change your container code on the page as shown in the examples file; than you have to replace all the js and css used before with the one included with the PLUS one. 2. That feature is implemented in mbContainerPlus component; you can draw just one container and change its content via ajax dynamically with a specific method: jQuery.fn.mb_changeContainerContent(url, data); Read all the documentation at: http://code.google.com/p/mbideasproject/wiki/mbContainerPlus to find out how does it works.

This is a great plugin and have had lots of fun using it for a web site I’m playing with. Getting some problems through attempting to drag an element from one container and dropping it onto another. Using the JQUERY draggable library even setting the containment for the draggable element to ‘document’ the browser still contains the element to it’s parent container. Hope makes sense, still on a learning curve with JQUERY so please excuse if I’ve overlooked an obvious answer. Any help very much appreciated.

Am able to pick up the draggable div content with the mouse, just unable to move it out of it’s parent containerPlus container. Can drop it anywhere inside it’s container and get scroll bars as the content is adjusted. Driving me a little crazy and have tried various combinations with no success. Hopefully my description of the problem makes sense. Simply would like to drag div elements between containers.

Hi Shaun, A. Is your draggable element’s position absolute? B. Seeng the ui.droppable behavior the element dropped into the droppable area is not set as child of the area itself, so in the DOM structure the element dropped is outside and it doesn’t became part of the structure; In our case, once you’ll try to move the droppable container, the element’ll remain fixed in its position.

p.s.: did you try in a more simple environment? write a siple page with two DIVs draggable; in the first put a SPAN draggable and set the second div to droppable; try to drop the span into the droppable div end than drag it… if it works than it should work also in the containerPlus environment.

✎ Pupunzi's newsletter

Subscribing the "Pupunzi newsletter" you'll be staying on top of the most recent Pupunzi's developments. More or less one email per month that informs you about latest updates, works in progress, new releases.

So, keep in touch!

Email address:

Enter your email address to subscribe to this blog and receive notifications of new posts by email.