jquery mb.containerPlus
Let your contents look great!
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.
demo page:
http://pupunzi.com/#mb.components/mb.containerPlus/containerPlus.html
download page:
http://mbideasproject.googlecode.com/files/jquery.mb.containerPlus.2.4.7.zip
In the downloadable files there’s the demo html file, the .ai and .psd templates for the container graphic. Try it!
http://plugins.jquery.com/project/mbContainerPlus
documentaion:
http://code.google.com/p/mbideasproject/wiki/mbContainerPlus
dependencies:
ui.core.js
ui.draggable.js
ui.resizable.js
optional: jquery.metadata.js
Releases:
2.4 (New!) major issue:
- added the possibility of manage cookies by setting “rememberMe” as metadata of the container.
Setting this property to true the container’ll have memory of its state, position and dimension once page is reloaded.
How does it work:
here is the js call:
$(function(){ $(".containerPlus").buildContainers({ containment:"document", elementsPath:"elements/" }); });here is the code for each container:
<div class="containerPlus draggable resizable" style= " top:200px; left:200px"width="500" buttons="m,c,i" icon="chart.png" skin="default" content="url_of_ajax_content">——————————————————————–
with the jquery.metadata.js you can write custom attr. inside class attr in a JASON sintax:
class="containerPlus draggable resizable {buttons: 'm,c,i', skin: 'white', width: '500', icon: 'chart.png', skin: 'default', content: 'url_of_ajax_content' (new)}"——————————————————————–
<div class="no"> <div class="ne"> <div class="n"> [your title goes here] </div></div> <div class="o"> <div class="e"> <div class="c"> <div class="content"> [your content goes here] </div> </div> </div> </div> <div> <div class="so"> <div class="se"> <div class="s"></div> </div> </div> </div> </div></div>
[...] mb.containerPlus [...]
jQuery (mb)ContainersPlus 2.2 (iconize where you want!) « Matteo Bicocchi’s Blog
26/09/2009 at 10:15 pm
[...] mb.containerPlus [...]
mb.containerPlus 2.3.1 « Matteo Bicocchi’s Blog
26/09/2009 at 10:36 pm
Hello!
When i upgrade to 2.2 or 2.3.1 versions – event onClose did not work when i use method mb_close() but when i clicked on “close” button all ok …
Black
27/09/2009 at 8:22 am
Hi black,
you find a bug, thnx;
all the external methods doesn’t have any callback function.
I’ll fix this problem for next release.
Bye,
Matteo
Matteo Bicocchi
27/09/2009 at 1:01 pm
Thanks!
While you fix bug i add next lines
jQuery.fn.mb_close = function (){
if ($(this).attr(“closed”)==”false”){
$(this).find(“.close:first”).click();
}
Black
27/09/2009 at 2:13 pm
Hi man!
First, congratz for your component. It’s really great!
Now, i got a little problem, can you help?
I have a container, and inside it i have an iframe.
I want to put some buttons INSIDE the iframe to control the container!
So, inside my iframe i want to Iconize, Minimize or Close the Container!
Can you help me find out how to do that?
Thanks!
Renan
28/09/2009 at 4:47 pm
Hi Renan,
this kind of scripting is allowed only if the top page and the iframe content are from the same domain, otherwise whould became cross domain scripting and all the browsers doesn’t allow that for security reasons.
Anyway in the iframe page content you can refer to all the functions in the opener as
window.parent.YourFunctions();; so in your case you can write something like:window.parent.$("#yourContainerID").mb_close()…Hope this can help you,
Bye,
Matteo
Matteo Bicocchi
28/09/2009 at 5:49 pm
hi, first of all: your work is amazing!
btw, it sounds a little weird speaking english with another italian
i was wondering if there is a way to pass values to a module to another one (i mean: searches and things like that).
is that possible?
Davide
29/09/2009 at 10:36 am
Ciao davide,
i container hanno un metodo che permette di caricare un contenuto via ajax on the fly, assando i parametri che vuoi: jQuery.fn.mb_changeContainerContent(url,data);
Quindi puoi invocarla quando ti serve semplicemente $(“# IDdelContainer”).mb_changeContainerContent(“laTuaPaginaDinamica”,”iDatiCheVuoiTrasmettere”);
Ciao,
Matteo
Matteo Bicocchi
29/09/2009 at 4:34 pm
[...] To get the latest version go to the component page. [...]
mb.containerPlus: updated to relase 2.3.2 « Matteo Bicocchi’s Blog
30/09/2009 at 8:19 pm
Hello, i’ve a problem. I already explain you, but i can’t understand why does it occured.
)
When i move container on the screen, there isn’t any screen limit. The container isn’t blocked by the edge of the screen. I dont understand why.
My page contains a jqueryFileTree, and several button.
When i removed everything in the page and just keep the container on, its okay, but it seems that the presence of other things on the page create the problem (its quite strange isn’t it ?
Thank you for your good work, it’s very nice tu implements container with ajax
i like it
Guillaume
Guillaume
09/10/2009 at 11:14 am
Ok i fixed the problem. I just open and close the container before the $(document).ready function invocation wich define the assignation of a $(td).click( function: open the container via a js called) its quite strange but it work.
Guillaume
09/10/2009 at 11:48 am
[...] This plugin has been deprecated. If you are looking for a container plugin get this one: mb.containerPlus [...]
jQuery (mb)Containers 1.2 « Matteo Bicocchi’s Blog
09/10/2009 at 9:25 pm
Hi Matteo,
first thanks a lot for this great job, I’ve a questions about elementsPath, I noticed that if I move this folder to another location for exemple(my image folder) /img/elementsPath and I use this path to build the container it does’t work, i found another location in the mbcontainer.js using default reference path, \
Is there any work around to that or is there another place what i must change.
Thanks again mat.
Regards
Rafik
10/10/2009 at 11:19 pm
Hi Rafik,
the elementsPath is relative to the page location, so if your image folder on the samelevel of the page where you are using containers elementsPath could be: “myImageFolder/”; but if it is in another location you have to specify the path starting from your page.
for example:
A)
the page is: index.html on the root of your site;
the image folder is: media/images/containerPlus/
elementsPath is: media/images/containerPlus/
B)
the page is: portfolio/myWorks.html
the image folder is: media/images/containerPlus/
elementsPath is: ../ media/images/containerPlus/
Hope this can help you,
Bye,
Matteo
Matteo Bicocchi
11/10/2009 at 12:42 pm
Hello.
i apologize for my language :”>
i use this good Component for my new website (it is in my local-host)
i didn’t set the height of main panel to automatically increase its height when my contents are too long.
but now(!) i see that the page do not Scroll when the container height is longer than the window.
thank you for your helps.
best regards.
Mohammad
11/10/2009 at 4:14 pm
Hi Mohammad,
it sounds strange, if you try on the demo to set a container height very hight it works fine and the page can scroll;
don’t you have set on your css body{ overflow: hidden}? or something like that?
Bye,
Matteo
Matteo Bicocchi
12/10/2009 at 2:36 pm
Hello
Great work.
Question…I tried the demo but when resizing the browser window the containers mysteriously move around the page, any to prevent this?
Thanks
Robert
13/10/2009 at 3:14 pm
Hu Robert,
this behavior is to have the containers in the screen even after the window resize event. If you don’t want it you can comment line: 44 and 352 of the js.
I’ll implement an option to set this properties on next release.
Bye,
Matteo
Matteo Bicocchi
13/10/2009 at 6:05 pm
I think this movement is kind a cool effect.
Great jQ component, thank you Matteo !
Georgi
17/10/2009 at 3:03 pm
Thanks for that replay… though it was not for me…
You should notice that inside JQuery Dialog it does not work as expected but moved irrational inside the dialog.
But that change helped (thought I have not found line 352, I have: “.bind(“click”,function(){” there, and I dont think that it’s the case.)
Alex
30/12/2009 at 3:07 pm
Hi Matteo,
I am looking for a container jquery plugin that can display a set of containers beside each other that are movable but prevent so they don’t overlap each other during the dragging. Can this be done with mb.containerPlus?
Tomas
Tomas
15/10/2009 at 3:02 pm
My mb_Container holds a google map div. Whenever, my mb_Container is resized, then I need to inform google by calling gmap.checkResize(). I have defined an “onResize” callback function to do that.
However, when mb_fullscreen() and mb_resizeTo() finish their animations, my “onResize” callback is not invoked, as I require.
Peter Burgess
18/10/2009 at 2:32 pm
Hi Peter,
That because there’s no listeners in mb_resizeTo method (a bug); you can add the following at line 394 (after $(this).adjustPos();):
var opt=$(this).attr("options");
if (opt.onResize) opt.onResize();
That will be fixed in next release;
bye
Matteo
Matteo Bicocchi
18/10/2009 at 8:04 pm
Your fix works perfectly. Thank you.
Peter Burgess
18/10/2009 at 10:53 pm
I have a product request or two…
I modified mb_container to have another button to toggle between fullscreen container and current size and position.
Also I added title tooltips for the buttons.
http://www.stjohnhistoricalsociety.org/Maps9.htm
Peter Burgess
18/10/2009 at 10:58 pm
Please consider addressing these needs:
1. I modified mb_container, adding another button to toggle between fullscreen and previous position and size. This functionality appears on every browser window and would be appreciated by many users and developers.
2. I also added hard-coded title tooltips for the container buttons.
Thank you, Peter
Peter Burgess
18/10/2009 at 11:07 pm
My http://www.stjohnhistoricalsociety.org/Maps9.htm?explorer=1 page is working delightfully with Firefox, but I’m having problems with Safari(win) and Chrome (no data yet on IE).
Like your image navigator, I have map image navigator – a low level zoom/control box in the lower right section of my map. The control also has a “minimizer” toggle button – hopefully in its lower right section. Often times with Safari and Chrome this little toggle button is misplaced and appears in the upper left section of the large map. This is a visual clue that the map is no longer “interactive” – none of the controls on the map work with the mouse – but with the url parms (?explorer=1) allows you to see that mouse movements are recognized and the lat-long of the mouse position is noted in the left side-bar.
There is ONE control on the map that responds to the mouse click and that is that misplaced “minimizer” arrow button. Clicking this button will “fix” page problems!
This intermittent problem only appears when the map is placed within a mb container.
Any thoughts or suggestions?
Peter Burgess
19/10/2009 at 12:22 pm
Hi Peter,
It seems that the little arrow of google maps doesn’t get it’s position and its DIV cover the entair surface of the map; when you click on it (and you can do it because it’s the higher element) it get its position. Maybe that is due to a timing problem on resizing the map; maybe it shlould be done once the container has its final dimention… but really I don’t know how the resize method of google map is working…
Did you try to directly set a width and a height to the container intead of resizing it at start up?
Bye,
Matteo
Matteo Bicocchi
19/10/2009 at 7:27 pm
I agree with you that there is some sort of race-condition going on with that pesky arrow/minimizer control. In different timing scenarios, it may appear outside the map, or to the right of the navigator control.
Adding the google navigation control 1 sec (some delay is necessary) after resizing the map for the 1st time, seems to work. Given the timing sensitivity between telling google to resize and telling google to add the navigator control suggests that this is a internal google race-condition.
Peter Burgess
19/10/2009 at 10:28 pm
Hi, First i want to say… congrats! from Colombia.. very nice work.
Here is my problem, i have 5 containers on my html, 4 of them are like “menus” and one is the “main window”, i want to call differents contents (html) in the “main window” from links on the others 4 containers, i’m pretty sure that’s simple with the ajax feature, but i can not figured it out how can i make it work.
I already found a way to do it, but it is not very clean (the heights go crazy) i just used a html with a iFrame like content in the (div class=”containerPlus) tag then call the new content with a simple target on each link.
I´ll appreciate any help
Nicolas
Nicolas
21/10/2009 at 9:22 pm
Hi Nicolas,
the mb.containerPlus component has a method to load the content of a specific container on the fly via Ajax:
jQuery.fn.mb_changeContainerContent(url, data)the use of this method is quite simple:
$("#yourContainerID").mb_changeContainerContent("the URL of your ajax page", "eventually params to pass to the request");This method doesn’t change the container title; that’s an issue for next release.
You can read the mb.containerPlus doc at: http://code.google.com/p/mbideasproject/wiki/mbContainerPlus.
Hope this was what you where looking for,
Bye,
Matteo
Matteo Bicocchi
21/10/2009 at 9:45 pm
I have 3 questions and 2 bugs:
Question 1: I have an iconized container and when I restore it I would like to have it fullscreen. I tried onRestore but it has an annoying animation the first time it gets restored.
Question 2: Why mb_fullscreen doesn’t work when the container is not draggable?
Question 3: Why the iconified window’s icon HAS to be 32px?
Bug 1: if I mb_resizeTo when the container is iconified the container div is displayed, but the no-div is still not-displayed.
Bug 2: If I iconify a fullscreen container it doesn’t retain the width, it gets “reset” to 400px (the default width of the container);
Basile Laderchi
23/10/2009 at 8:13 am
[...] 1. if fullScreen once iconized and restored the height wasn't reset correctly; 2. if iconized and mb_resizeTo generate a bug; now you simply can't mb_resizeTo if iconized; 3. better controll of each state of container; Get the latest [...]
jQuery.mb.containerPlus 2.3.5 (new release) « Matteo Bicocchi’s Blog
23/10/2009 at 8:11 pm
When I use the mb.close function when the window docked then the icon in the dock does not disappear, so i have to de-iconize the window first.
Wouter
27/10/2009 at 8:37 am
Hi Wouter,
yes, the mb_close() method works only on open containers; I add an issue for future release.
bye,
Matteo
Matteo Bicocchi
29/10/2009 at 10:32 pm
Very nice work, just a note about what appears to be broken in your demo page on opera 10.01 – when clicking on a scrollbar contained within a window it won’t scroll down, I assume because it fires some onclick event. It works using the scroll wheel.
Raz
30/10/2009 at 12:08 pm
Hi
First i have to say, that this is great plugin.
I work on a project, wher i have five containers, which could be draggable. Is it possible to save container position in a cookie, so when visitors refresh , their containers will ramain at the same place.
thanks
Sass
03/11/2009 at 8:37 am
Hi Sass,
At the moment ther’s no method to manage cookies on jquery.mb.container; but you can store the position into a cookie “onDrag” callback event and than make a function that set the position of the specific container getting the value from the coockies at startup of the page.
I added this as issue for next release.
Bye,
Matteo
Matteo Bicocchi
03/11/2009 at 9:40 am
Hie, I have been using mb container plus in our django+python powered web site, It is really cool to use the eye catchy mb containers, with all those skins ..
In our web site, we needed custom coloured skins for the containers. For that, I need the exact same replica of all the bits of images of the skin images which you have came up, with my own colours. I found it really difficult.. I actually traced the images using inksckape’s bmp trace tool, tried re-colouring the images, but when I put it all together, the mb containers were not consistent.
The output were not similar to the ones with your original skins
so, to ease all my troubles, it would be great if I could get all the images of a particular skin in .svg format so that I can import those in my inkscape and generate skins with my own colours
in the latest release, i was able to import the .ai file in inkscape, but I did not get how to cut those templates and export them exactly like the ones in the built in skins i.e., to create a replica of the bits of images like no.png, ne.png etc.,
Any kind of help will be really useful to us
Thanks
.. and keep up this great work
Bhaskar
06/11/2009 at 6:33 pm
Hi Bhaskar,
The best would be photoshop; I use to import .ai file into photoshop and than crop each part; I don’t know inksckape tools so I can’t help you there…
Bye,
Matteo
Matteo Bicocchi
07/11/2009 at 10:06 pm
[...] Get the last version! [...]
jQuery.mb.containerPlus 2.4.0 « Matteo Bicocchi’s Blog
08/11/2009 at 3:17 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by pupunzi: #mb.ideas #jquery: updated mb.containerPlus to version 2.3.2: http://bit.ly/umt8f...
uberVU - social comments
08/11/2009 at 7:06 pm
Hi, i’m new of jquery and i’ve a stupid question.
In the code below, how can I Alert the newWidth of the resized element?
$(“.containerPlus”).buildContainers({
containment:”#body”,
elementsPath:”includes/jquery.mb.containerPlus/elements/”,
onResize:function(o){
alert( ???.width );
}
});
simone
13/11/2009 at 10:27 am
Ciao Simone,
nella funzione di callback “o” rappresenta il container che subisce l’azione; per cui:
$(“.containerPlus”).buildContainers({
containment:”#body”,
elementsPath:”includes/jquery.mb.containerPlus/elements/”,
onResize:function(o){
alert( o.outerWidth() );
}
});
Ciao,
Matteo
Matteo Bicocchi
13/11/2009 at 6:40 pm
Hi Matteo
Again amazing plugin with added cookie funcionality.
Is there and docs about setting and using (reading) cookies?
Thanks
Sass
Sass
14/11/2009 at 11:30 pm
Ciao Matteo,
Thanks for a great plugin. Hope you can help me.. I want to change the behaviour of onClose to match onIconize I have tried this (on 2.4) :
$(“.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”images”,
onClose:function(o){this.onIconize()}
});
But not working.. please help … thanks again !!
PS I think i sent this post to the wrong project before so please ignore my other post…
Spiro
20/11/2009 at 5:05 pm
Hi Spiro,
what you are trying to do would never work because the callback function doesn’t sobstitute the action itself. Why don’t you simply delete the close button from the buttonbar?
You can do that setting “buttons:’m,i’” instead of “buttons:’m,i,c’” as metadata on the container DIV.
Anyway… maybe if you write:
onClose:function(o){o.mb_iconize()}it could work…Bye,
Matteo
Matteo Bicocchi
20/11/2009 at 6:29 pm
Thanks for the reply. The main thing I was trying to do is just have minimize and close but I want the close behaivour to act like an iconzied action as I want to return that container to the dock. I dont want users to lose a ‘container’ if they press close, especially as i have rememberMe option set.
Should i just swap the png buttons?
Thanks ,
Spiro
Spiro
21/11/2009 at 8:36 am
Hi,
Am I missing something?
I added an attribute to two of the main container div’s (class containerPlus)
rememberMe=”1″
It seems to be storing the position of the last moved window. When I refresh all windows are on top of each other.
Any advise as to what I am doing wrong?
Thanks
Richard
Rich
21/11/2009 at 4:37 am
Hi again,
I just relised I was to add {rememberMe:true} inside the class attr.
But still it seems to only remember the position of one container, the last one that was moved.
Thanks for your time.
Richard
Rich
21/11/2009 at 4:45 am
Have you set the id attribute to something unique for each container (outermost div) this should do it.
Spiro
21/11/2009 at 9:19 am
Hi Spiro,
I set a unique ID only if the container doesn’t have an ID itself. If you are using the rememberMe feature you have to set the ID to each container.
Bye,
Matteo
Matteo Bicocchi
21/11/2009 at 9:47 am
Hi Rich,
the rememberMe works well only if you had set a unique ID to the container; did you do that?
bye,
Matteo
Matteo Bicocchi
21/11/2009 at 9:45 am
Hi,
I’m trying to open external content inside the containers, but it doesn’t work. Is there any way to open urls external from my domain into these containers?
Thank you in advance!
PD: Great work ;P Thanks for all.
Sergio Ruiz
25/11/2009 at 5:20 pm
Hi Sergio,
The cross site content retrieving is not allowed by the browsers for security policy;
The only way to get content from other sites is either to open an iframe inside the container where you can load the other domain content, or working with ajax jsonp method that anyway needs to be installed as filter in the called server.
Bye,
Matteo
Matteo Bicocchi
25/11/2009 at 6:44 pm
Hi Matteo,
Thanks for your quickly answer, this is the solution I have finally used.
Yesterday evening I was ‘collapsed’, but my boss had just the same idea. It works perfectly in an iframe and, as we don’t need positioning data, it doesn’t matter to work with iframes.
Best regards,
–
Sergio Ruiz Aragón
Brandea Studio – PHP and Web Developer
http://www.brandeastudio.com
Sergio Ruiz
26/11/2009 at 9:12 am
Hi there Matteo, I like your work and I’m interested in using it on a site of mine, however I’m not understanding from the previous comments on how to create the windows (ajax content) on the fly, so it’s possible to create as many as I need in a web 2.0 environment, without having to predefine them.
To do this before I used prototype-ui with the window extension (for if you would like to look it up and see), if you wouldn’t mind making a quick demo of this functionality it would be much appreciated.
Best regards,
Steve
Stephen
25/11/2009 at 8:44 pm
Hi Stephan,
yes, you an have your containers created on the fly by simply call via ajax a page that build your container and initialize it.
for example:
build your function:
$.fn.loadScreenContent=function(options){
var screen=$(this);
this.options={
url:false,
data:false
};
$.extend (this.options, options);
if (this.options.url){
$.ajax({
type: "POST",
url: this.options.url,
data: this.options.data,
success: function(html){
screen.append(html);
}
});
}
};
call it in your page: $(“body”). fn.loadScreenContent({url:”your Ajax page URL”, data:”needed DATA”});
in “your Ajax page URL”:
<script type="text/javascript">
$(function(){
$(".containerPlus").buildContainers({
containment:"document",
onLoad: function(o){
o.mb_centerOnWindow(true);
}
});
});
</script>
<div class="containerPlus draggable resizable center {buttons:'m,i,c', skin:'white', width:'700', height:'650', dock: ' .screenDock', content:'ui/arms.ui.parts/genericForm.html', grid:0}" style="top:200px;left:-1000px">
<div class="no"><div class="ne"><div class="n"><a>Generic container title</a></div></div>
<div class="o"><div class="e"><div class="c">
<div class="mbcontainercontent">
[here goes the Ajax content setted in the "content" attribute of this container]
</div>
</div></div></div>
<div >
<div class="so"><div class="se"><div class="s"> </div></div></div>
</div>
</div>
</div>
Hope this can help you,
bye,
Matteo
Matteo Bicocchi
26/11/2009 at 6:58 pm
Hi !
I have encountered the same problem, but I didn’t want to place all my elements in the ajax page, so I have written a little function that opens a new mbContainer myWindow :
NewWindow = function (title, content, resizable, draggable, options, cssOptions){
this.options = {
content:”,
buttons:’m,c’,
icon:’browser.png’,
skin:’default’,
iconized:false,
collapsed:false,
width:600,
height:400,
dock:undefined,
grid:undefined,
gridx:undefined,
gridy:undefined,
rememberMe:false
};
this.cssOptions = {
position:’absolute’,
left:’200px’,
top:’100px’
};
$.extend (this.options, options);
$.extend (this.cssOptions, cssOptions);
var myWindow = $(”);
myWindow.find(‘.mbcontainercontent:first’).html(content);
myWindow.find(‘.n:first’).html(title);
if (resizable)
myWindow.addClass(‘resizable’);
if (draggable)
myWindow.addClass(‘draggable’);
myWindow.addClass(‘containerPlus’).attr(this.options).css(this.cssOptions).appendTo(document.body);
myWindow.buildContainers({
containment:false,
elementsPath:”elements/”,
mantainOnWindow:false,
});
return myWindow;
}
It can display any content. To display an ajax content, just call it with something like this :
NewWindow(title, “Loading …”, true, true, {content:’http://pageURL’, width:300, height:200},
{left:’100px’, top:’50px’})
I hope this can help.
Etienne
Etienne Coumont
27/11/2009 at 10:55 am
Oups, the HTML didn’t show up in my previous comment. I’m sorry for this. The correct window creation is :
var myWindow = $('<div><div class="no"><div class="ne"><div class="n"></div></div><div class="o"><div class="e"><div class="c"><div class="mbcontainercontent"></div></div></div></div><div><div class="so"><div class="se"><div class="s"></div></div></div></div></div></div>');Etienne Coumont
27/11/2009 at 11:01 am
Thank you Matteo and Etienne, these have been very helpful.
Although I might have a small problem (possible bug?) with creating windows in IE8 when there is no dock, basically nothing happens.
Regards,
Stephen
Stephen
28/11/2009 at 11:50 am
Hi, this is an awesome plugin, i would use it but i see it has a small compatiblity problem with ie6.
graphix aint looking nice, i got alot of visitors that uses ie6.
but still cool plugin,
grts,
lisabell
lisabell
26/11/2009 at 9:04 am
Hi Lisabell,
I’m sorry but I’m not supporting IE6 anymore for my plugins… too many restrictions and too much pain…
Bye,
Matteo
Matteo Bicocchi
26/11/2009 at 6:38 pm
very good ,
but i donot know use to my site
wuyongjin
04/12/2009 at 5:43 am
Matteo,
This app is great! Thanks! Please help me out with one of my issues:
I am having a problem with the positioning of the iconized windows when they are opened. The icons are placed in a location that are below the bottom of a page, requiring the user to scroll down. When the icon is clicked on, the window opens at the top of the page, which is now above the top of the browser window. I have posted an example of my problem at the link below. You will notice 7 icons (quick facts, Email, SMS, etc).
http://crossmedia.cgxsolutions.com/productmanagement/
What I would really like to be able to do is center the container in the window. Please let me know if that is possible, or if there is another solution to my issue.
Thanks!
Mark Woitaszek
15/12/2009 at 11:03 pm
Hi Mark,
That’s a bug!
My methods doesn’t care of page scroll…
I opened a ticket for this issue.
A work around for this could be set a top position as high as needed to show the container in your page and set the mantainOnWindow param in the initialize function to false.
Thnx,
Matteo
Matteo Bicocchi
16/12/2009 at 6:34 pm
Hello Matteo,
But, maintainOnWindow doesn’t seem to work for me @ 1024×768 resolution.
Also, i would like to have some clarification, cauz, i want to support IE 6 users too (dont ask y), for which i would like to know, where could i find mb-containers 1.2? I searched but unable to get the download link!
Plz Help,
– Ashwanth
Ashwanth
26/12/2009 at 11:26 pm
Hi Matteo,
Brilliant work.
However, mbContainer breaks when used on a page that does not contain a DOCTYPE statement. Are you aware of why exactly this might be so that I can work around the problem? (I cannot add the statement for various reasons)
Thanks!
Paul
18/12/2009 at 3:19 am
it’s all great? but can you give an example of full code with working remember me function. 2 or more blocks. Or include demo with it in zip.
Paul
29/12/2009 at 6:51 pm
Hi Paul,
In the demo page there’s the black container, the one you can open by the top button, that is managed with cuckies (rememberMe setted to true); if you open it and you moove it, once you reload the page it will be visible and placed in the position it had when you leave the page.
If you whant to try just set this param to true for how many containers you whant; remember to set an ID to each container you whant to be remembered.
Bye,
Matteo
Matteo Bicocchi
29/12/2009 at 10:01 pm
yea? i found it ))
Paul
29/12/2009 at 11:04 pm
Amazing! thanks for this plugin, and for releasing in good license
Angel
30/12/2009 at 1:21 am
I’m having problems: whem making my mb container fullsize, then my google earth content gets an internal error.
http://www.stjohnhistoricalsociety.org/Maps-3D2.htm
The following hint from jqueryuiTabs about using “off-left” vs “display:none” might do the trick. What do you think Matteo?
http://docs.jquery.com/UI/Tabs#Events
WHY DOES…
[edit]
…my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?
Any component that requires some dimensional computation for its initialization won’t work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won’t report their actual width and height (0 in most browsers).
There’s an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector “.ui-tabs .ui-tabs-hide” with
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
For Google maps you can also resize the map once the tab is displayed like this:
$(‘#example’).bind(‘tabsshow’, function(event, ui) {
if (ui.panel.id == “map-tab”) {
resizeMap();
}
});
resizeMap() will call Google Maps’ checkResize() on the particular map.
Peter Burgess
04/01/2010 at 11:59 pm
The download does not contain all the .js files. Is there a different download for those?
tittatty
06/01/2010 at 8:27 pm
Hi Tittatty,
The download should contain all the .js file made exception for the jQuery one that is called from google code at: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js.
If you are running the HTML page offline than it doesn’t work and you should include a local file of the latest jQuery file.
You can try to download it again from: http://code.google.com/p/mbideasproject/downloads/list
Bye,
Matteo
Matteo Bicocchi
07/01/2010 at 12:01 pm
Nested Containers
Is it possible to have the main container to have a nested sub container.
Not sure if im asking that correctly let me explain.
Your container looks like this now
Container we call it container 1 for this example
Container1
icon , icon, icon, icon we call this icon2 container
When we open up icon2 container
it will have the same type of display as Container1
icon2 container
icon, icon, icon, icon
Thats what i mean by a nested container.
toadthetinker
11/01/2010 at 8:51 am
Matteo,
First of all, fantastic plugin! As many others have commented before me, I am amazed at the quality of your released work! AWESOME!
I have been looking through the documentation and through the demos and the source code trying to find the secret to accomplishing my goal, but so far have been unable to do so. Perhaps I am overlooking something really simple?
1) Is it possible to have a static image on the page and write a click handler that toggles the container’s open/closed state without the iconization?
2) Is it possible to call $(“.containerPlus”).buildContainers(); when the document loads, and *not* load the ajax content of a container until it is de-iconized (.mb_getState(“iconized”) == false)?
Thank you again for your efforts and for sharing your talent with the world. Amazing plugins!
QuackFuzed
12/01/2010 at 8:08 am
Thanx man! You are the genious!
alx
23/01/2010 at 2:52 pm
Super dope plugin. I tweaked it so mb_close() works in any state of the container (you mentioned that you will be doing this too)… I think I made some other minor changes, but overall you did an awesome job. Thanks!
Is there any possibility of having an option that will always display the dock icon (not just when it’s iconized)? Sort of like MacOS and Wins. I took a quick crack at shifting the dock icon creation to the routine that builds containers and i got it partially working, but i’d much rather have the master do it
With the always-on icon mode there might be some cool possiblities:
- make the icon have a hilite when the container is in focus
- allow containers to be grouped (by class or something) so the dock icon can be stacked (like MacOS and Win7). Then the icon can be toggled to slide out the stack.
Just some random ideas… Cheers!
Jeremy
30/01/2010 at 3:32 pm
hi matteo,
i’m trying to get the jqgrid into your container.
unfortunally, the grid breaks out of the container, when used in internet exporer 8.
I did try style=”overflow:hidden;” on the most outer div (<div class="containerPlus …), but this results in ugly scrollbars outside the visible container in all browsers.
I've seen your openlab/arms application, where you use another grid, which fits well into the container. So I hope that there will be a solution for jqgrid.
Any idea how to accomplish this?
el al
01/02/2010 at 1:22 pm
Did you try to inspect the generated DOM with the developer tool of IE8?
Maybe there’s an unclosed tag or something like that…
Bye,
Matteo
Matteo Bicocchi
02/02/2010 at 6:25 pm
Hi,
no I did not try to inspect the generated DOM with IE.
Thank you for the tip, seems to be better than I thougt!
The Markup was OK, no unclosed tags.
Luckily I did try the IE Browser Mode!
Quirks Mode is a problem, Compatibility Mode is a problem, IE 7 Mode is a problem …
IE 8 Mode (Document Mode) works.
Thank you for your help.
Microsoft should do further enhancement on IE.
el al
03/02/2010 at 8:00 am
Hi
questions:
1. can we load ajax content when de-iconize a container?
2. ability to disable iconize button or expand button?
Great Job btw!
Tianyin
06/02/2010 at 11:15 pm
Hi Matteo,
Here is what I want to do.
Click an icon on the dock.
If not logged in, pop up login dialog and stop restoring that div.
Else load the content via ajax and restore that div.
Here is what happend,
The dialog poped up, but the restore procedure can’t be terminated in onRestore setting ( or how? ). After restore completed, the containerPlus div sits at the top because the z-index is computed after that login dialog poped up. Basically the overlay and login dialog sit behind it.
Can we terminate the restore process at onRestore? Or any alternatives?
Many thanks.
Hope I expressed my self clear.
Regards
Tianyin
08/02/2010 at 6:21 pm
Hi Tianyn,
onRestore callback functon is call when the restore process has finished; what you need, as I can understand, is a onBeforeRestore callback function…
Can’t you know the user state befor he click on the docked icon?
Otherwise you can introduce yurself the callback function thet should be executed at line: 356 of mbcontainer.js and that interrupt the restore action of the container…
Bye,
matteo
Matteo Bicocchi
09/02/2010 at 6:29 pm
Thanks for your reply. I decide not to do such logical judgement in client side
Tianyin
09/02/2010 at 6:34 pm
I have dynamic content in my containers and when the content changes, the container will automatically resize vertically to fit.
After the container has been iconized and restored, however, it no longer does this and remains at a constant height when the content changes.
Is there a way to retain the automatic resize effect after restoring an iconized container?
Spencer
16/02/2010 at 5:06 pm
Hi Spencer,
That’s happening because once you create the container it does’t have a height setted on it; after you restore from iconized it set the height it had on iconizing.
At the moment there’s no way to restore the automatic resize; I’ll fix this bug for next release.
Bye,
matteo
Matteo Bicocchi
16/02/2010 at 6:33 pm
I commented out the lines that read:
container.find(“.c:first , .mbcontainercontent:first”).css(“height”,container.attr(“h”)-container.find(“.n:first”).outerHeight()-(container.find(“.s:first”).outerHeight()));
and now it is working how I want. Thank you!
Spencer
16/02/2010 at 9:59 pm
Hello.
I have trouble when using modal dialog popup from jquery ui.dialog and mb.containersPlus 2.4.
When dialog opens on z-index top position, mb.containers divs stays on top, so modal dialog doesn’t work properly. Same problem is when I’m using contextmenu on components inside containerscontent.
How to resolve this problems.
ruben
17/02/2010 at 3:45 pm
Hi Ruben,
That happens because htere’s a method in mbContainer.js to bring containers to front that set to the container the highest z-index on the page. You could change this method to exclude all UI components in some way…
The function is at line: 552 or around ($.fn.mb_bringToFront()).
Bye,
Matteo
Matteo Bicocchi
17/02/2010 at 6:58 pm
Hi matteo,
your suggestion can not work.
the draggable container gets constantly a new, incremental z-index. Everytime you move it!
If you exclude some elements from this function, that means that you don’t know anymore when it will happen that some elements will be hidden by the container.
In the end, every “TOP” element must have such a function: bring me on top, give me a higher z-index.
Isn’t there another way, something like a number range, which ca be defined. mbcontainer uses this range, and the containers z-index will not break out of this range?
@Ruben:
do you have a solution?
I’m trying to use jqgrid inside mbcontainer, and the pop-up divs of jqgrid have hard coded, fixed z-index.
el al
23/02/2010 at 3:12 pm
Hi Matteo,
how can determine, which container is active?
There is no onclick event?
Would be nice to have
a) an api for a list of all containers, which exists
b) an api for accessing the current container (current is the one, who has the “focus”).
c) if you have a list and an access method for the current container of the list, it should be easy to modify the method mb_BringToFront() in a way, that you use a number range, e.g. 500-600 (what in fact means that you cannot open more than 100 containers at once), and the list is used as a stack for the z-index.
The highest z-index is always as high as containers are created (plus the offset of the number range).
What do you think?
el al
24/02/2010 at 1:10 pm
[...] Get it now: http://pupunzi.open-lab.com/mb-jquery-components/mb-containerplus/ [...]
jQuery.mb.containerPlus 2.4.7 is Out! « Matteo Bicocchi's Blog
26/02/2010 at 7:32 pm
[...] jquery mb.containerPlus « Matteo Bicocchi's Blog (tags: jquery plugin container) [...]
links for 2010-02-26 | blog@alessandrobozzon.org
27/02/2010 at 12:40 am
Hi,
I was upgrading a old website but unfortunately I had to place my latest containers inside an iFrame. When I run the page without iFrame, it works great and when I try to run it inside the iFrame, the container gets hidden somewhere. Please let me know if you have any idea what could be the problem.
Thanks!
Vishal
02/03/2010 at 1:53 am
Hi matteo,
thank you for the recent update of mbcontainer plus v247. I was pleased to see some of my suggestions realised.
I did mention, that your suggestion on rubens problem concerning the zIndex cannot really work. As long as you use other js/jsquery components which don’t use a similar technique to receive the highest zIndex around, you cannot manage to use something like jquery modal dialogs or alerts (without modifications) together with your container, am I right?
So my approach was to
a) add a mbContainer List object, which stores all container instances
b) move the functionality of the mb_bringToFront() method to the list object:
After line 70
var container=$(this);
i added this line:
mb_containerList.add(container.attr(‘id’));
The content of your mb_bringToFron() method I replaced with:
return mb_containerList.zIdxUpd(this);
And here is the inital draft of my List Object:
Array.prototype.array_value_delete = function(position) {
for (var x = 0; x = position) {
this[x] = this[x + 1];
}
}
return this.pop();
};
mb_containerList = {
zIndexOffset : 500,
aList : new Array(),
add : function(el) {
if(jQuery.inArray(el, this.aList) >= 0)
return;
else {
return this.aList.push(el);
}
},
rem : function(el) {
var myPos = jQuery.inArray(el, this.aList);
if(myPos >= 0)
this.aList.array_value_delete(myPos);
},
zIdxUpd : function(el) {
var myPos = jQuery.inArray(el, this.aList);
if(myPos == this.aList.length-1)
return;
this.rem(el);
this.add(el);
for(i = myPos; i<this.aList.length; i++) {
$(this.aList[i]).css('zIndex', (this.zIndexOffset + i));
}
return this.zIndexOffset + i;
}
};
Now, the z-Index of the containers will always be in the range of zIndexOffset + number of open containers.
And now, components as the modal dialogs of jqgrid work fine together with your containers!
Notice:
My object is nothing but a quick draft. There can be somme additional benefits implemented in a ContainerList, e.g. a mehtod getActiveContainer()
which returns the current container (should be something like
return this.aList[(this.aList.length -1)];
Another idea, is to have persistant icons in the dock for all containers. The active container is marked.
this would come closer to the behaviour of usual task bars (windows) most users are used to …
best regards,
el al
el al
03/03/2010 at 10:02 am
Sorry, my solution seems not to work as expected.
I’ll post again when fixed.
el al
08/03/2010 at 8:37 am
Hello Matteo,
I still don’t know exactly why, but the jQuery.inArray() method does not work, if the elements are references to mbContainer Instances …
This is a fixed version of my containerList post, together with the replacement for the jQuery.fn.mb_bringToFront functionality.
Why did I made this change?
My problem was, that the modal dialoges of the great jqGrid Control do have a fixed z-Index of 950.
They will always be displayed behind the containers, although the grid itself is displayed inside of the containers …
My Solution takes an Offset (hardcoded to 500 in my example) for the minimum z-Index of the mbContainers. The highest z-Index will be the offset + number of container instances.
I run in problems, because other mbComponents as mbExtruder also use this function as a lib. And the mbExtruder script was loaded after the mbcontainer script, so my edtid function body of the jQuery.fn.mb_bringToFront was overwritten by mbExtruder …
(Not really solved yet, I renamed the jQuery.fn.mb_bringToFront mbExtruder version to jQuery.fn.ex_bringToFront …)
What do you think about a mbLibrary for common and global mb funcitons in a separate file?
Here is my code (updated and working):
line 72:
mb_containerList.add(container);
complete content for jQuery.fn.mb_bringToFront:
return mb_containerList.zIdxUpd(this);
and my singleton mb_containerList:
mb_containerList = {
zIndexOffset : 500,
aList : new Array(),
inArray : function(el) {
for(var i=0; i= 0)
return myIndex;
else {
this.aList.push(el);
el.css(‘zIndex’, (this.zIndexOffset + this.aList.length – 1));
}
},
rem : function(el) {
var myIndex = this.inArray(el);
if(myIndex >= 0) {
for (var x = 0; x = myIndex) {
this.aList[x] = this.aList[x + 1];
}
}
return this.aList.pop();
}
},
zIdxUpd : function(el) {
if(el.attr(‘id’).indexOf(‘mbcontainer’) == -1)
return;
var myPos = this.inArray(el);
if(myPos == this.aList.length-1)
return this.zIndexOffset;
this.rem(el);
this.add(el);
for(i = myPos; i<this.aList.length; i++) {
this.aList[i].css('zIndex', (this.zIndexOffset + i));
}
return (this.zIndexOffset + i);
}
};
best regards,
ea
el al
09/03/2010 at 7:38 pm
hi matteo
nice work, im really impress.
Thanks for sharing your knowledge.
andsien
05/03/2010 at 1:51 am
Hi matteo
how can i disable the animation when i set the container to center?
thanks!!!
andsien
andsien
05/03/2010 at 3:45 am
Hi Andsien,
just pass false as param of the function:
$("#[your container ID]").mb_centerOnWindow(false);Bye,
Matteo
Matteo Bicocchi
05/03/2010 at 8:41 am
hi matteo
what i mean is i want to disable the sliding animation, i want the container to pop up without the animation. I already set the container to center. For example if there is an error of the page the container will pop up at the center of the page, but without the sliding animation.
i just delete the setTimeout function when the container is loaded.
Thanks once again!
andsien
05/03/2010 at 11:23 am
thanks a lot for your help matteo!
cheers!!!
andsien
05/03/2010 at 4:35 pm
Hello Matteo,
because of posting problems you can download / view my code here:
http://weblications.webatu.com/mb_container/mbContainer.js
el al
10/03/2010 at 7:35 pm
I upgraded to the latest version of the containerPlus and I’ve noticed several odd things happen.
Here is one of them demonstrated in a jsfiddle… Incorrect icon location: http://jsfiddle.net/udyUV/
Is there a known workaround for this… other than the following that I just put together http://jsfiddle.net/DNuZQ/
~/Elijah Manor
ELijah Manor
10/03/2010 at 8:04 pm
hi matteo,
what is the best practice to call the api methods per script on a container instance(e.g. mb_close() and mb_open() )?
neither $(‘myContainer’).fn.mb_close();
nor $(‘myContainer’).mb_close();
work?.
How do you access a specific container by id?
el al
10/03/2010 at 8:48 pm
solved …
sorry, i just forgot to prepend the sharp to the id in the selector …
shit happens.
el al
11/03/2010 at 7:48 am
Hello,
in first i’m newbide with jQuery (even plugins) … not so newbie with html/css/php/sql.
My problem is with the ‘content’ or ‘mb_changeContainerContent’ … have two files – index.html and foto.html … on local machine is working both ways to load foto.html into container, but on my webserver doesn’t work any of them. I check upper/lowercase in filenames (webserver runnign on linux) and everything seems to be ok … when i rename index.html to index.php and use php command include(‘foto.html’) it fill up the container but it is not sou ‘cool or clean’ way … can you give me some clue where looking for solution ?
Koky
10/03/2010 at 11:24 pm
Hi Koky,
your problem seams to be that your provider doesn’t allow a POST request via ajax… here you can find a solution for a similar problem.
Bye,
Matteo
Matteo Bicocchi
11/03/2010 at 10:48 am
Thank you for a reply … now i consult it with my provider and seems to be problem with apache server … some more info seems to be usefull is at http://dave.sunwheeltech.com/wordpress/2005/09/20/http-gotcha/
Bye Koky
Koky
12/03/2010 at 9:17 am
hi matteo,
why don’t you use the jquery-ui buttons technique for the buttons of the container?
What about jquery-ui integration / compatibility?
el al
12/03/2010 at 10:03 pm
Hi etienne,
thnx for your contribution!
bye
Matteo
Matteo Bicocchi
28/11/2009 at 11:45 am
Hi Ashwanth,
here you can download the mbContainers 1.2.
the mantainOnWindow param is not related to the window size… it sounds strange it doesn’t work… do yo have an URL where I can see your code?
Bye,
Matteo
Matteo Bicocchi
27/12/2009 at 11:13 am
Hi Andsien,
to reduce or eliminate the fadein and fadeout effect there’s a parameter “effectDuration” on the init function that accept an int number (time in milliseconds) for the effect duration; if you set it to 1 than the container will be shown and hide without effects.
$(".containerPlus").buildContainers({
containment:"document",
elementsPath:"elements/",
onClose:function(o){},
effectDuration:1
});
Bye,
Matteo
Matteo Bicocchi
05/03/2010 at 1:35 pm
thanks matteo, sorry for asking too many questions, im not that good on js.
i have other question, can i call a function to close the container, coz i can find a function closing the container. How will i do it.
in my project i have a menu “who is online” when i click the user (for the user to chat) the container will pop out. in the container there are 3 choices “send message, chat, video cam”. What i want to do is when i click on of those choices the container will close. Can i do it using a function?
thanks once again. Really apreciate your help.
andsien
05/03/2010 at 3:11 pm
Yes,
there’s a method to do that:
$(‘#[your container ID]‘).mb_close();
Anyway, if you have the demo page that comes with the zip file, there you can find all the containers properties and methods;
you can also take a look at the doc page at: http://code.google.com/p/mbideasproject/wiki/mbContainerPlus.
Bye,
Matteo
Matteo Bicocchi
05/03/2010 at 3:53 pm
Thnx El Al,
You are rigtht, I should have a common mb.core.js, but this would be another js file to be included with my components…
But maybe this would be the right solution to centralize many cross functionalities.
I’ll take a look at your solution and see if it could be included in next mb.containerPlus release.
Thanks again,
Matteo
Matteo Bicocchi
09/03/2010 at 10:24 pm
hi,
one IMPORTANT note on my code:
I run into problems when iconizing and restoring the containers. After this, the list-array was populated with two “wrong” elements: one with an empty id and one which was undefined at all.
To solve that I added this quickfix:
zIdxUpd : function(el) { if(el.attr(‘id’).indexOf(‘mbcontainer’) == -1)
return;
which is still in my code, and – for sure – not very compatible ….
It means, that every container use must have the string mbcontainer in its id …
I will fix this as soons as possible.
sorry
el al
10/03/2010 at 6:13 am
hello matteo,
obviously, the post function of the comments here chokes on code posts!?
I never wrote something like
…
for (var x = 0; x = myIndex) {
…
(see my comment above)
Any possiblities to transmit complete code examples to you?
el al
10/03/2010 at 2:55 pm