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
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!!!
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 🙂
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!
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 ?
Strange… did you change the “containment” parameter of the function?
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
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
actually, i’m using 2.3.2 version …
ok thanks !
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
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 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
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
Hello ..
I am Brazilian, I am learning programming ..
very good this script …
even more – hugs …
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.
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,
How did you implement your drag&drop behaviour?
try using UI.droppable plugin, it should work.
Bye,
Matteo
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
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
Thanks for the reply Matteo! Thats what I was looking for.
I will give you the credits on my web application. And one more time: congratulations for the really nice job.
Best wishes,
Fabricio Braga
Hi Fabricio,
first I suggest you to use mbContainerPlus instead of this;
you can find documentation at: http://code.google.com/p/mbideasproject/wiki/mbContainerPlus.
In the constructor it has a param called elementsPath that is the path where the container looks for icons.
Bye,
Matteo
Hello Matteo!
First I would like to thank you very much, my congratulations for your very nice plugin!
I have little doubt here. I’m developing a dynamic web application (using JEE), and I need to change paths of the plugin images and “elements” dir. How can I do it without need to edit mbContainer.js file?
Regards,
Fabricio Braga
(mb)Containers 1.2 is anymore supported, but the (mb)ContainerPlus component does work on IE7 and IE8;
and which problem did you get on (mb)ImgNavigator and IE7? I tested it and it works…
Bye,
Matteo
This and (mb)ImgNavigator really fall apart in Internet Explorer 7. Only the basic function and styles load. Great concepts but clearly (and unfortunately) not cross-browser.
Yes, my server is actually down… hope it’ll be back soon…
Looks like your demo site is no more….
Hi Matteo,
First and foremost – this is an excellent script. I was looking for a good Jquery plugin and this fits the bill.
However, while trying out various options – I could not figure out a way to get the DIVs to get scroll bars dynamically based on the content.
To explain my scenario – Most of the DIVs I’d use would have IFARME in it – as they’d need to have their own JS code. These JS Code would fetch data from the server and show it in the IFRAME. My DIV would be a fixed size – but would want the vertical scroll bar to come depending upon the size of the data.
Not sure how to achieve this. I do not want the IFRAME to have scroll bars – but I want the DIV to have scroll bars depending upon the size of the data. Any ideas that you can give me to try out?
Thanks in advance for your help and for this excellent script.
Kumar
Hi Alvaro,
of course you can, via CSS…
for example:
2
3
padding: 10px;
}
bye,
Matteo
Hi Matteo.
Can I give some space between icons when the are iconized? some like padding.
i try, but I can not find the right place
thanks
Hi Mike,
which version of IE?
I tsted it in IE 7 and it works fine!!
Bye,
Matteo
This is a great plugin and I love everything about it.
The only problem I have noticed is that in IE when you minimize a container, you can’t maximize it again.
Does anyone know why this might be or how to fix it? The problem doesn’t occur in FF or Chrome.
Hi Dirk,
Are you using the (mb)container or the (mb)ContainerPlus component?
I’m not supporting the (mb)container 1.2 anymore, download this instead: http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/
bye,
Matteo
Hi,
This is an amaizingly fun script.
I need help with 3 things please:
1) I need to change the icon dynamically. How do I do this?
2) How do I enabled/disabled the icons(closing, minimizing and collapsing) dynamically?
3) I am struggeling to get the containers to resize. I include all the needed js files, but nothing happens.
Regards
Dirk
I’m looking for someone to create a page for people to come to that has containers like this that has news and weather and stuff on it. Anyone willing to do something like this?
Hi Sergio,
as I can understand you would start your page with any containers shown in your page and you would like to open it from a link…
You can either close your container just after initialize it by the $(‘#your container ID’).mb_close() method, or you can call it via Ajax where, in the ajax page you define the container html with its properties and the js code to initialize it.
Bye,
Matteo
Hello,
Your script is fun! but I want just using it from a simple link. How do?
Regards
Sergio
No Avin,
I’ve no time!
Try yourself.
bye,
Matteo
Is that for the mb+?
can u give me the code?
Hi Avin,
you can use the onminimize function callback to fade the content.
to fix your request I should add another container to wrap the content and I don’t want to do that; so you can do it by wrapping your content in a div and fade it onminimize.
bye
Matteo
hmmmm…..?
Is it easy/possible to fade in the text and slide down the container in mbcontainer+?
maybe is due to the fact that the jquery.js included is on their server and maybe it was down.
The demo loads very slow, can’t test it.
In the truth,
the Div box model one (mbContainerPlus) has less code to write, skins are customizable as the old one, the features are the same as the old one (and maybe more) … it’s W3C compliant…
and has been downloaded almost twice the old one…
I think there’s nothing to fix, you can choose which one you prefer and use it as you want, you can change the code to fix bugs or to feet your needs… and if you do fix please send me the code!
bye,
Matteo
A few things makes the older version better:
1.The different skins.
2. It’s smoothness.
3. Ease of access and customization.
4. User friendliness
If all these things are fixed, no one would use the old mbcontainers…
Is it possible to fade in the text(only the text) in mbplus?
But i like the fade effect more than slide.
And mbcont..plus is not so smooth…
mbContainerPlus use a slideDown/Up effect… You can have the same aspect of the mbContainers and are W3C compliant… Why don’t you like this?
The table box model of mbContainer is not W3C compliant, I suggest you to change.
Bye,
matteo
NO real hope that way, I am not even a javascript beginner.
And does this happen in mbcontainer plus?
Slide a TR tag is not supported by jquery.
But you can make your own test changing my code; if you find a solution you are welcome!
bye,
Matteo
Yeah but dint like it much…
I saw in the js file that you use fade a couple of times..
Is it possible to slidedown the image and fade in the text?
The problem occurs only while maximising.
No way, I’m sorry.
Did you try (mb)ContainerPlus?
so there’s no way…….!!!?
Hi Avin,
now I understand, but this happens because thst is the part that is fading…
You could try to change the way it minimize the container (for example you could slideUp and slideDown instad of fadeIn and fadeOut), or set it faster…
bye,
Matteo
“Hi Avin,
I’m sorry, it doesn’t happen to me…
Tried with Firefox 3.0.7, Safari latest 4 beta, Opera 9.64 and the left corner image was ok.”
Perhaps I will give you a screen shot…
rapidshare.com/files/207499751/untitled.JPG.html
You can Use (mb)ContainerPlus build on DIV box model and W3C compliant: http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/
This is a really lovely looking script, unfortunately we can’t use it at our institution since we are federally mandated to follow accessibility guidelines – and the containers use tables for layout 🙁
Hi Avin,
I’m sorry, it doesn’t happen to me…
Tried with Firefox 3.0.7, Safari latest 4 beta, Opera 9.64 and the left corner image was ok.
“D) I can’t see this effect on icons on (mb)Container… sorry. In (mb)ContainerPlus the image disappear when slideUp and reappear on SlideDown because of a bug of UI slide effect”
Maybe you dint understand me…
I mean after you have minimized and when u want to open it again and click the maximise button, a part on the left side dissapears for a while while fading in… Can that be fixed?
Does GPL License not cover your needs?
Internal government websites.
Hi Vladmir,
How would you use this component?
Hi, Nice job. Is there any chance you release this under MIT license?
A) I use firefox as default browser and buttons stay always on right. there’s something wrong in your code…
B) I fix the js path in the demo.
C) You mean slide and fade? no… it’s not possible; if you mean instad of slidin you can change “slideDown” with “fadeIn” and “slideUp” with “fadeOut” in the js code.
D) I can’t see this effect on icons on (mb)Container… sorry. In (mb)ContainerPlus the image disappear when slideUp and reappear on SlideDown because of a bug of UI slide effect.
Found something(dunno if it’s a bug): When you minimize the contianer, a small part of the icon(for eg: the alert icon’s shadow) disappears while minimizing and maximizing and reappears after the maximizing is done.
Firefox(latest)
And in that demo, the path of the js files is not correct.
Firefox…3.07
Hi Avin,
1. There’s no difference between the two scripts; the min one is the minified (no comments, short variables name no breaks = lighter script; thought for production).
2. buttons should stay on right always… that should be a bug… (which browser?).
bye,
Matteo
I wanna ask two things:
1. What’s the difference between mbcontainer.min and normal mbcontainer ?
2. When draggable is not set, the close buttons go to the left and is submerged with the container’s icon. How can I change that?
how to and where to send
Something about validation…
Have you ever try validating some of the most visited site in the web? Well, the most of them would not pass the W3C validation!
And that not for jQuery, or for some other JavaScript libraries people use to manage their contents but just because you can’t have any custom attribute set to your tag elements or just because you can’t anymore use a target attribute for your link!
Well, my opinion is that of course we must respect standards and try to let our contents to be the more accessible as possible to every kind of people in this world, but most of the times we better obtain this by working with JavaScript needing some extra code like custom attributes, not valid, to improve quality!
So I don’t think that the result of a W3C validation test means the page is safe from bad code; for example I can make a strict W3C code compliant and than I can hack the code via JavaScript adding whatever I want, and that would be validate…
Of course my containers could omit custom attributes; but the alternative would be add properties via JavaScript and it would be much more complicate for whom has to write the code and it would be dislocated from the container you are writing; and that just because we can’t use “cmenu” or “menu” as attribute of a DOM element?
Really it changes something for you? Or compromise accessibility?
Why?
I’m worrying about xhtml validation using JQuery.
Great Avin!
send me the code, I’ll update the (mb)Containers component!
Thnx for contribution.
NO prob, I did it myself
Great work!
“added “iconized” or “minimized” at the start.
Just add the attribute “iconized=’true’” or “minimized=’true’” to the container.”
can u do that for this version too? or else can u just give the code?
Hi from Moscow!
Opera 10 alfa – all perfectly works
Hi Chris,
Sorry, I don’t know roller themes… But you can make your own theme by editing css and making your images.
Bye,
Matteo
Is there a version of mbContainersPlus that uses the theme roller themes?
Thanks,
Chris
Hi Simon,
If you download the demo now, ther’s a html file with an example of a “lightbox” (mb)ContainersPlus.
Bye,
Matteo
what do you mean by “attach the layer to a specific element”?
The container can be positioned wherever you whant.
bye,
Matteo
Hi,
is it possible to attach the layer to a specific element? i want to promote a feature on a website so that would be nice.
you can see the demo here:
http://mein.focus.de/html/index.php
there is a bubble as a sticky hint…
thanks
I didn’t thoght at this plug in as a lightbox; I think there’s no poblem, Try it!
bye,
Matteo
Hi,
Nice plugin. If you loaded a single container with an onclick() would it be possible to make it close if the user clicked off the container? Like a lightbox.
TIA
S.Buckley
If you are usin IE 6 the problem you can have is due to the unsupported png “feature” of IE 🙂 .
It should work fine in IE 7.
I didn’t test the demo-site in Opera…
I’ll give a look…
You are right, you can’t access to the demo page with opera (two js errors [$(window).width() and a null point in jquery] for opera… I’ll debug soonly) in the homepage.
if you go to this url: http://www.open-lab.com/mb.ideas/demo/jquery.mbContainer/demo.html
you can see the container Demo working fine in Opera too.
Thanks,
Matteo
Very nice in FF and chrome.
Looks bad in IE and demo doesn’t work in Opera (bunch of errors)
This is really nice!