jQuery (mb)Containers 1.2
This is a useful plug in to build full featured and fully skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.
This plugin has been deprecated. If you are looking for a container plugin get this one: mb.containerPlus
1.2.0 (New!)
Major issue released:
- added “iconized” or “minimized” at start up.
Just add the attribute “iconized=’true'” or “minimized=’true'” to the container. - added a pram: elementsPath: [path to images].
used to define where to finde images like buttons and icons.
dependencies:
ui.core.js
ui.draggable.js
ui.resizable.js
How does it work:
here is the js call:
1 2 3 | $(function(){ $(".container").buildContainers(); }); |
here is the code for each container:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="container stikynote draggable resizable" style="width:400px; top:270px;left:170px" buttons="i,m,c"> <table cellpadding="0" cellspacing="0" class="containerTable"> <tr class="top"> <td class="no"> </td> <td class="n"><a href="">Stiky note</a></td> <td class="ne">&nbsp;</td> </tr> <tr class="middle"> <td class="o"> </td> <td class="c" > [your content goes here...] </td> <td class="e"> </td> </tr> <tr class="bottom"> <td class="so"> </td> <td class="s"></td> <td class="se"> </td> </tr> </table> </div> |
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!
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
Marcus
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:
http://www.web-ctec.org
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,
Matteo
P.S.: great work with mb.containerPlus on your site 🙂
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.
Sorry for my english, i’m french 🙁 😉
Thanks, Guillaume
Hi Guillaume,
Which version of mb.containerPlus are you using?
As I can see you are posting on mbContainers 1.2 and this is a closed project; the mb.containerPlus is the active project: http://pupunzi.open-lab.com/mb-jquery-components/mb-containerplus/
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
ok thanks !
actually, i’m using 2.3.2 version …
Strange… did you change the “containment” parameter of the function?
ok i found an issue for the datePicker bug, and i want to share it with you:
the solution is given at the page:
http://www.west-wind.com/weblog/posts/891992.aspx
Good luck !
Guillaume
Hi Guillaume,
that’s good!
if you have the beforeShow callback function than you can use my builtin function to bring to front:
This is the same function I use for the containers…
Bye,
Matteo
Matteo:
Great, fun script. Some help though:
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. =(
Thanks for any help!
Jason
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.
Bye,
Matteo
Hello ..
I am Brazilian, I am learning programming ..
very good this script …
even more – hugs …
Hi Matteo,
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.
Shaun
q|”|p
Hi Shaun,
How did you implement your drag&drop behaviour?
try using UI.droppable plugin, it should work.
Bye,
Matteo
Hi Matteo,
Thanks for getting back, am using the ui.droppable.js plugin. I’ve made a DIV within an containerPlus element draggable and set a DIV within another containerPlus element droppable.
$(function() {
$(“#draggable”).draggable();
$(“#droppable”).droppable();
});
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.
Many many thanks,
Shaun
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.
I think you should build your own function to solve your issue…
the closest example in the UI demo page is: http://jqueryui.com/demos/droppable/#photo-manager
I think working with callbaks function you can solve your issue.
Anyway I’ll make some test to verify the problem.
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.
wwww.markware.gr
check this and tell me if you like it!!!
(It is only a demo-nothing is fully functional yet)
thanks for the best plugin ever!!
…. i indent to give full credits…. thanks Matteo