ContainerPlus has been rewritten
jQuery.mb.containerPlus is going to have a new life.
jQuery.mb.containerPlus is one of the most appreciated jquery plug-in of mine (more than 25.000 downloads till now) and I decided it was time to radically update the code.
There are many improvements in this new release that certainly you’ll appreciate; here are some of them:
- Skins doesn’t use images anymore and are completely realized via CSS3.
This means you can easily modify and personalize containers for your usage. - improved compatibility with devices.
You can drag and resize containers also on your iPad. - Implemented an easy way to add functionalities and customizations (plugins) via javascript.
This method ( $.containerize.addMethod(“yourMethod”,fn) ) inject functionalities you can use for your container as, for example, adding a full screen behaviour. - Removed the dependence to the jQuery.metadata.js plugin.
Now it uses the DATA attribute to store container properties.
I’m working to fix all the bugs and to implement all the features used in the previous release.
You can see a preview here:
http://pupunzi.github.com/jquery.mb.containerPlus/demo.html
Hope to make it public soon.
Suggestions are apreciated,
thanx.
Hi, I think your blog might be having browser compatibility issues.
When I look at your website in Opera, it looks fine but when
opening in Internet Explorer, it has some overlapping.
I just wanted to give you a quick heads up! Other then
that, wonderful blog!
You can use CSS3 gradients to make the grab handle. For example:
.grab-handle {
background: linear-gradient(45deg, black 2%, transparent 2%, transparent 18%, black 18%, black 20%, transparent 20%, transparent 38%, black 38%, black 40%, transparent 40%, transparent 58%, black 58%, black 60%, transparent 60%, transparent 78%, black 78%, black 80%, transparent 80%, transparent 98%, black 98%) no-repeat;
background: -webkit-linear-gradient(45deg, black 2%, transparent 2%, transparent 18%, black 18%, black 20%, transparent 20%, transparent 38%, black 38%, black 40%, transparent 40%, transparent 58%, black 58%, black 60%, transparent 60%, transparent 78%, black 78%, black 80%, transparent 80%, transparent 98%, black 98%) no-repeat;
background: -moz-linear-gradient(45deg, black 2%, transparent 2%, transparent 18%, black 18%, black 20%, transparent 20%, transparent 38%, black 38%, black 40%, transparent 40%, transparent 58%, black 58%, black 60%, transparent 60%, transparent 78%, black 78%, black 80%, transparent 80%, transparent 98%, black 98%) no-repeat;
background-size: 20px 20px;
width: 20px;
height 20px;
}
You can create a div element and add this style in, then there will have stripes as background. Similar patterns can also made using CSS3 gradients.
Hi Matteo
Thank you for that great script!!!
I use it for a help button by now, but would like to have it in a select option range too.
I have a function which converts a sidebar with ul > li > link groups to a selectbar with select option group elements. Is it anyhow possible to fire these option value links to pop up in a 3.0 modal container?
Never mind i just read your previous posts.
Are you continue to allow the use of icons? I really like the iconize/ icon image for the item as well as using my own.
Thanks,
Mark
Hi Guy,
At the moment any ideas,
I’ll give a look.
Bye,
Matteo
Hi Matteo,
I have one more question;
when i add data-close=true, the position (or margin) of mbc_content inside the container changes.
It happens only in some browsers like FireFox and IE.
I tried to correct it in CSS but unsuccessfully.
Is there any way for you to advise me how to correct it?
Thank you in advance.
Guy
ex: technical (on my example page)
My great appreciation!!! 🙂
You helped a lot!!!
Guy
p.s. Your work is very beautiful, design-wise and code-wise!
Hi Guy,
First thank you 🙂
You can download the latest release from gitHub: https://github.com/pupunzi/jquery.mb.containerPlus/zipball/master
There you’ll find the previous version and the mb.containerPlus 3.0 one.
1. To keep the container close once loaded add : data-close=true to the container
2. In the demo you can see how I placed an icon on the top left corner.
3. The first container in the demo file now opens as modal; as you can see from the code I pushed a new method and added a data attribute to the first container.
Be careful, I changed the name of the js and CSS file!!
Bye,
Matteo
Wow! Matteo! I am sure you have heard this complement already 1000000000 times, (and you deserve everyone of them 🙂 but truly, this plugin is great!!!!
I couldn’t resist the temptation to try to apply it before public release, its great, and if its not hard for you, i will appreciate your help or at least an advise on 3 subjects:
1. how can i keep it closed on page load? (to open it manually).
2. is it possible to add image icons to the container (left-top corner)?
3. is it possible to open one of several containers modal mode?
As you see, i am newbie, and i will appreciate any help, if you can.
Thanks in advance
p.s. here is the example:
http://www.bareli.net/bareli/html/04/index8.html
Guy
Hi Sam,
For the grab: Yes, there should be something that tells you it is resizable; I’m trying not to use images for the layout; instead I’m going to make a font with all icons needed for the interface and use it as @font-face.
For the custom scrollbar: I think that this could be a plugin; this new version of container+ allow the implementation of extra behaviours and this could be one; having it by default would weigh down the page.
to implement a new plugin:
[sourcecode language=”javascript”]
$.containerize.addMethod("customscroll",function(){
var el = this;
el.content.tinyscrollbar();
});
[/sourcecode]
to apply it to a container:
add a data attribute with the name of the method as key:
[sourcecode language=”html”]
<div id="cont1" class="container" style=" top:130px; left: 300px; height: auto" data-customscroll=true >
[/sourcecode]
more documentation will be available soon.
Bye,
Matteo
Hi Sam,
really nice 🙂
works really great
I have written a function to tile your container windows, works like a treat. Paste the code into Firebug and run on the demo page: http://jsfiddle.net/7792C/2/
Hi MB,
Firstly, good work!
The dock into menu feature is really good, also the iconize function to left menu could have the icons appear and then when hover shoots out the text to say what the window is. Also fullscreen is useful maybe could appear under the top menu. The scrolling is definitely more stable than containerplus. Box shadow on click also a nice touch.
Maybe add a small grab icon to the bottom left to show it can be resized. See: http://jqueryui.com/demos/dialog/
I wonder if it’s also possible to have custom scrollbar to match skin. This one could be good with some tweaking (removing of redundant div containers): http://baijs.nl/tinyscrollbar/
Some openAll, closeAll functions might be useful? http://jsfiddle.net/7cbeE/
Also the use of n=both e.stopPropagation(); and e.preventDefault(); on buttons in demo is redundant.
I thought of more ideas, will post them once I can remember! 🙂
Regards,
Sam / jQuery4u
What can I say – the released versions of all your jQuery Controls are eye-opening – this is outstanding
Excellent work Matteo! I look forward to the public release.