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.
[...] mb.containerPlus [...]
[...] To get the latest version go to the component page. [...]
[...] This plugin has been deprecated. If you are looking for a container plugin get this one: mb.containerPlus [...]
[...] 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 [...]
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...
[...] jquery mb.containerPlus « Matteo Bicocchi's Blog (tags: jquery plugin container) [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus This plugin let’s you build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable. [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] Link [...]
[...] mb.containerPlus is doing overlays optionally with the conventional hide / maximize / close controls, that may form a solid base for apps that require many floating windows. I fell for the futuristic Apple effect of jQueryTools, which is a pretty nice collection of tools. Be careful though when downloading it to deselect the tabs feature, which looks pretty nice at first, but fails miserably when trying to add tabs dynamically (for which the tabs plugin from stilbuero is much more suitable). The choice of the right layout solution was more challenging, but long story short: I ended up with UI.Layout which uses a border-layout approach and is capable of really complex, nested layouts which work surprisingly well with other jQuery magic, such as the forementioned tabs. [...]
[...] mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] 6、 jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] mb.containerPlus [...]
[...] jquery mb.containerPlus [...]
[...] 24. jquery mb.containerPlus [...]
[...] Font: Matteo Bicocchi’s [...]
[...] jquery mb.containerPlus [...]
[...] 6. MB.CONTAINER PLUS [...]
|
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 …
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
Thanks!
While you fix bug i add next lines
jQuery.fn.mb_close = function (){
if ($(this).attr(“closed”)==”false”){
$(this).find(“.close:first”).click();
}
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!
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
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?
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
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
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.
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
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
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.
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
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
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
I think this movement is kind a cool effect.
Great jQ component, thank you Matteo !
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.)
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
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.
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
Your fix works perfectly. Thank you.
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
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
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?
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
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.
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
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
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);
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.
Hi Wouter,
yes, the mb_close() method works only on open containers; I add an issue for future release.
bye,
Matteo
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.
Got same issue in Opera 9.64, working only with mouse wheel.
Hi Serg,
Yes, you are right… there’s a bug with Opera.
I’ll try to find a solution…
Bye,
Matteo
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
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
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
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
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 );
}
});
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
Hi Matteo
Again amazing plugin with added cookie funcionality.
Is there and docs about setting and using (reading) cookies?
Thanks
Sass
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…
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
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
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
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
Have you set the id attribute to something unique for each container (outermost div) this should do it.
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
Hi Rich,
the rememberMe works well only if you had set a unique ID to the container; did you do that?
bye,
Matteo
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.
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
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
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
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
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
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>');Hi etienne,
thnx for your contribution!
bye
Matteo
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
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
Hi Lisabell,
I’m sorry but I’m not supporting IE6 anymore for my plugins… too many restrictions and too much pain…
Bye,
Matteo
very good ,
but i donot know use to my site
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!
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
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
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
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!
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.
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
yea? i found it ))
Amazing! thanks for this plugin, and for releasing in good license
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.
The download does not contain all the .js files. Is there a different download for those?
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
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.
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!
Thanx man! You are the genious!
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!
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?
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
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.
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!
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
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
Thanks for your reply. I decide not to do such logical judgement in client side
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?
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
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!
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.
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
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.
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?
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!
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
Sorry, my solution seems not to work as expected.
I’ll post again when fixed.
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
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
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
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?
hi matteo
nice work, im really impress.
Thanks for sharing your knowledge.
Hi matteo
how can i disable the animation when i set the container to center?
thanks!!!
andsien
Hi Andsien,
just pass false as param of the function:
$("#[your container ID]").mb_centerOnWindow(false);Bye,
Matteo
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!
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
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.
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
thanks a lot for your help matteo!
cheers!!!
Hello Matteo,
because of posting problems you can download / view my code here:
http://weblications.webatu.com/mb_container/mbContainer.js
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
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?
solved …
sorry, i just forgot to prepend the sharp to the id in the selector …
shit happens.
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 ?
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
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
hi matteo,
why don’t you use the jquery-ui buttons technique for the buttons of the container?
What about jquery-ui integration / compatibility?
Hello Mat,
Would it be possible to have an auto resize of the mbcontainer (When browser resolution changed)?
Thanks.
Doe anyone have a simple set of instructions to make a basic example work.
I can’t make anything appear on the screen and I’ve got tons of javascript errors when checking with Safari developer debug turned on.
Something about not being able to find variable jQuery.
Yes, I’ve read the documentation.
Hi Stewart,
If you can’t make it appear you are doing something wrong either with the js inclusion or with the contaner initialiation…
Did you try with the demo on the zipped file? Does it work for you? Do you have an internet connection active? (the jquery.js and the UI js are linked from the google code repository)…
So if you whant to use my script off line you need to include either jquery and jquery UI on your page from a local surce.
Bye,
Matteo
trying to use mb_changeContainerContent can you give a brief example on how to use the data variable?
what is the syntax to set it to GET or POST and how do i pass some variables along
thanks for publishing your work
Hi,
you can pass the DATA as second parameter of the function:
$(“#[yourContainerID]“).mb_changeContainerContent(“[URLofYourPage]“, “[data]“);
DATA can be either a query-string (ex: “data1=foo&data2=bar”) or an object (ex: {data1:”foo”, data2:”bar”}).
Actually the Ajax call is via POST and there’s no way to change it other than changing directly in the js file (line 610).
Bye,
Matteo
Feature Request:
hello Matteo,
while using your great container script heavily, there are mainly two requests on my wishlist:
a) jquery ui integration
Is it possible to make the mb_container compatible with the jquery theme roller / ui framework ???
b) Drag & Drop Behaviour
For sake of clarity, it would be nice to be able to drag the container out of the browser window:
E.g. if dragging to the bottom, the top border of the container should be the upper barrier to stop dragging out of the window, not the bottom border of the container. You should be able to drag the container as far to the bottom, that you see nothing more but the title bar.
This feature is not a must have, but a really nice to have.
I’ve created several containers connected with dock (http://zoranjeremic.org/intelleo/services/). I set it container to be closed on page load. It works fine in Firefox, and in IE 8 when load from local file. However, if I access from remote site using IE 8, all containers are opened on page load.
Mateo,
Do you have any idea about this?
Hi Zoran,
I think that your issue depends from timing… IE is quite slower on rendering js and that could be the reason you have this problem. What I can suggest is to change the way you are including containers in your page; for example you could drow the container once you click on the corrispective icon instead of building all of them on load of the page. Another solution could be to make an external page where you draw and initialize the container that you can load in your page via ajax instead of building it via javascript.
Anyway, as your way of working with containerPlus is anusual, it’s hard for me to debug and understand what’s happening, expecially with IE…
You can take a look at this solution I’m working on for an application interface: http://www.open-lab.com/arms/
just click on “enter” button and play a little with the extruders links. You’ll see that all the containers invoked on the page are just ajax calls to pure HTML pages where the container is drawn and initialized.
Bye,
Matteo
Hi Matteo,
Thank you for your reply.
You can take a look at this solution I’m working on for an application interface: http://www.open-lab.com/arms/
This looks very impressive.
Another solution could be to make an external page where you draw and initialize the container that you can load in your page via ajax instead of building it via javascript.
I will try this solution. Do you have some simple source code example or instructions how to make this. I couldn’t found it in your example.
Zoran
Hi Zoran,
here you can download an example of containers loaded via ajax: http://dl.dropbox.com/u/1976976/jquery.mb.containerPlus_ajax.zip
Inside the main folder you’ll find a “demoAjax” folder with a demo_ajax.html page.
Bye,
Matteo
Great work!
Matteo i have a problem.
I have a container, and just when iconized passing of true to false i wanna use the .mb_changeContainerContent(url,data);
How can i do this?
Thanks
Hi Matz,
there’s a onIconize callback function where you can pass whatever you need; it get one argument (o) rapresenting the referred container.
$('#myContainerID').buildContainers({
...,
onIconize:function(o){
o.mb_changeContainerContent('yourContent.url',"dataToBePassed");
},
...
});
If you have more than one container on your page but you need to add the event to a specific one you should init this separately:
$('#myContainerID').buildContainers({
...,
onIconize:function(o){
o.mb_changeContainerContent('yourContent.url',"dataToBePassed");
},
...
});
$(".mbContainer").buildContainers({
...,
...,
...
});
Even if your container has the same class of the others it will be skipped by the second initialization. Otherwise you can add your own custom class to initialize each specific containers (doesn’t need to use “mbContainer”).
Hope this can help you,
Bye,
Matteo
Matteo, that’s help but its not what i need.
I want click on the icon and in that moment use the .mb_changeContainerContent(url,data);
i think use the onClick=”$(“#messages”).mb_changeContainerContent(“/user/messages”,”");”;
but i don’t know where.
Can you help me?
Thanks again.
Hi, i am trying to use mbContainer together with JQuery Tabs component (http://jqueryui.com/demos/tabs/)
it seems to be css conflict somewhere when the theme css is included (smoothness/jquery-ui-1.8.1.custom.css).
you can see resize handles on the windows and also when you collapse the window it shows faded.
Thank You for your work on the AJAX example
Allows for generated ID’s which is exactly what I needed, insertContainer(url, containerId, data)
Ran into one issue as with everything else…. IE it doesn’t work.
Hi Cory,
;
Yes, there was a little problem with IE & cookies
here is a working demo on IE: http://dl.dropbox.com/u/1976976/jquery.mb.containerPlus_ajax.zip
Bye,
Matteo
Matteo,
Perfect Timing….
I started another build about 4 days ago, build #9. Going to focus on doing it your way this time. Just checked in to see whats up and see you posted a link again. Great, Thanks! Got it!
Cory
I just found something new. I had one hell of a time finding it because I never for a second would have suspected it.
The ajax version of building a container? Does not work when placed in a $.ready().
My software design is like a leaf in a tree. Each section is a line coming from the trunk and back. And all code going out (going down the trunk) is appended to strings where which things like… All Javascript is placed in $JQuery.=etc… Then it gets swapped out with…
$.ready()etc… [JQUERY] });
…inside the template.
Thus far I have had no problems doing that until I was ready to put the MBContainers section back in my latest build. (#9)
I went down the trunk and shut off every single branch until there was nothing left but an empty template and it still didn’t work. Then I noticed I had $.ready() and you had just .
So… is this a design flaw? Or is there something going on I don’t realize and that it should not be in a ready function?
MBContainers is my “EXE like” function in a “windows like” (Os Like) internet based program desktop and all. So I am just wanting to make sure that this is not an issue.
Thanks Matt!
Hi Cory,
It works also if invoked inside a document ready… There should not be any problem…
Do you have some error in console?
Bye,
Matteo
I don’t know what happened. When I first installed, I did what I did to get it running, which was removing everything from the page only to find out it worked only outside of a doc ready. BUT, I just looked at my code to verify, and at some point I moved it without thinking back into the doc ready and she is working. Very strange. So I guess this is a false alarm then. You may delete me
hi,
i want to minimise window to down end ……. not towards upper end… any soultion
Hi nagarjuna,
you have to define your “Dock” DIV with a:
position fixed, bottom: 0, left:0, width:100%Than set to each container your “dock” as dock of the container.
That’s all.
Bye,
Matteo
Hi Matteo,
suppose my container div is in center of the page then when i minimize ,it should be minimized and show at the bottom of the page ……….like normal windows do,
Bye,
Nagarjuna
hi,
can you give example of how to use onCollapse function and change the back-ground color of div…
Hi,
I have four links in my page .. and four links open same div but different data when i minimize the div and click on the second link to open the same div with different data the div does not get maximized… any way to resolve this issue
Hi Nagarjuna,
you can download the 2.5.0rc2 release where there’s demo_changeContent with an example of what you need: http://github.com/pupunzi/jquery.mb.containerPlus/zipball/2.5.0rc2
Bye,
Matteo
Hi,
First, thanks for building these excellent widgets. I love the jQuery containers specifically. This was exactly what I was looking for in my latest project.
I am using * Name:jquery.mb.containerPlus
* Version: 2.4.8
The containers I built are working fine on Firefox and chrome. But in IE, they are crashing the browser with the following error –
Message: ‘offset().left’ is null or not an object
Line: 364
Char: 9
Code: 0
URI: http://www.bibkosh.com/lib/pupunzi/inc/mbContainer.js
I am not sure why this is happening in IE. Could you please give me some pointers? I will appreciate this a lot.
thanks and regards,
Titash
Hey Matteo,
I have a problem with this i need it to pull just one container instead two at once but still haven’t found a solution yet. So was wondering what i could do. Here’s the code.
Ideas for remodelingConstruction process
Construction process
Framing
Tips
Things to look for part 1
Things to look for part 2
Framing Video Part 1
Framing Video Part 2
Framing Video Part 3
Quikstick walls
Prepping Concrete Process
Concrete Process
Concrete floor:
Raise floor to install wood flooring, warmth, and drainage.
For insulation
For Drainage Dri-core panels
Repair
1st Video
2nd Video Installation Techniques
Lay flooring over concrete-
Types
Installation
Prep concrete before installation
Attach wood to concrete
// JavaScript Document
$(document).ready(function() {
$(“.download_now2″).tooltip({ effect: ‘fade’});
$(“.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”images/elements/”,
maintainOnWindow:true
});
$(“.containerPlus”).hide();
$(“#basement”).mouseover(function() {
$(“.containerPlus”).show();
});
$(“#basement”).mouseout(function() {
$(“.containerPlus”).hide();
});
});
Hi Robert,
If you need to open a container just once you click on a link take a look at the demoAjax in the latest 2.5.0rc2 release: http://github.com/pupunzi/jquery.mb.containerPlus/zipball/2.5.0rc2
Bye,
Matteo
Hey Matteo,
Was wondering have you ever put a container in a tooltip before and does it work fine.
Hi Robert,
What do you mean by putting a container in a tooltip?
I F’n DID IT – I AM THE MASTER THINKER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
GUESS WHAT, I FIGURED OUT HOW TO BEAT THE MBCONTAINER Z-INDEX and UI DIALOG ISSUE!!!!!!!!!!!!!!!
PROBLEM OFFICIALLY SOLVED!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
AND IT IS SO FRICKEN SIMPLE YOU WON’T BELIEVE IT!!!!!!!!!!!!!!!!!!!!!
$('#openit').button().click(function(){
$('#MBC').addClass('ui-widget-overlay');
$(\"#dialog\").dialog({autoOpen: true, title: 'Test',position: 'center',modal: true,width: 500,height: 200});
});
#MBC is the DIV i append the container too.
but you must do this…
your entire site
ALL DIALOGS HERE AFTER MBC
The container does not care if it is place after the site since it is absolute anyway. Too damn absolute is the problem as we all know.
But since XHTML follows these rules… Div inside a div is a parent then child. A complete opened/closed div afterwards is another parent. However as you go downwards the document each absolute div set to absolute height100% width 100% becomes another layer on top of the previous one.
the problem has been that no matter what you do to solve the UI dialog issue, your dialog is always a child within a parent and the mbcontainer layer was always on top no matter where you place the mbcontainer tag.
So, by placing the dialog tag after the container tag with the same absolute width100% height 100%, the dialog becomes a layer after the mbcontainer which means on top. One of the other problems is that even if you did this before a layer without a background does not cause a complete overlay over the mbcontainer layer. The background layer is what is needed to cover the mbcontainer. But your don’t want to do that with a color or you wont see the site behind it. So, by adding the class ui-widget-overlay a transparent overlay just like the modal get stretched over the mbcontainer. So this means disable modal on the dialog or you will get 2 modals going on at the same time trapping mbcontainer in between. 1 from the dialog and 1 from the add class.
YEAH BABY!!!!!!!!!!!!
OMG my code got screwed up
What I was saying above is…
*HTML*
*DIV* Your entire website here */DIV*
*DIV id=MBC* your tag for appending containers */DIV*
*DIV* ALL Dialogs below MBContainer tag */DIV*
*/HTML*
And then of course in your dialogs buttons place the removeclass
Also found something else… this method works for all but IE of course… But I solved IE with another addclass() I created CSS ….
STYLE
.MBTakeDown { z-index:0; } and then do the following…
$('#MBC').addClass('ui-widget-overlay');
$('#MBC,.containerPlus').addClass('MBTakeDown');
This works and tested in the following browsers…
IE, firefox, safari, opera, seamonkey, sleipnir, chrome, k-meleon
Hi Cory,
This is great, Can save time to many people!
Can you make a Question and post this as answer on jQueryExchenge? (http://jquery.pupunzi.com/)
It could be very useful.
Thnx,
Matteo
I am actually going to make screen shots and all for it. I myself looked forever for the solution so I know what it is like. The main reason I am going to do it is because you have been so helpful to me and considering this is your program, you made the AJAX routine for me, the least I can do is share this solution. As a returned favor back to you Matt!
I will do ti soon, it’s just that… hehehe Right now I am redesigning all of my system dialogs.
I thought you might like to see this one… This is what I made for reloading containers via AJAX based on the one you wrote for me. The server.state variable allow me to send a toggle command along with the container. All though data and url are not used the document.wdcontainer is thus allowing a reloaded container to still respond the same as a new container when you click the open container link.
var server;
function insertMbContainerReload(url, exekey, data){
if(document.wdcontainer[exekey]==1 || !url) return;
if(!data) data=\"\";
$.getJSON('$comstream', { cmd:'rlexe', exekey:exekey }, function(server) {
$(\"#MBC\").append(server.container);
$(\"#\"+server.exekey).buildContainers({
containment:\"document\",
elementsPath:\"elements/\",
effectDuration:400,
onLoad:function(o){ document.wdcontainer[o.attr(\"id\")]=1; },
onClose:function(o){ o.mb_removeCookie(\"closed\"); o.remove(); document.wdcontainer[o.attr(\"id\")]=null; }
});
if (server.state){ $(\"#MBC\").append(server.action); }
});
}
And I used this to generate a loading pattern on document side to do the reload request.
// See what containers may be open from a previous session (or refresh/Signout,etc)
require _mbcontainers;$containerCount=retrieveAllOpenContainers();
if ($containerCount != 0){
$JQuery.= MBContainerReloadCode();
$JQuery.=" //GEE
count = new Number(0);
$.doTimeout( 'FetchOpenContainers',1, function(){ $('#infobar').html('Loading previous state...');
//$('#desktop').append(count+',');
";
$count=0;
foreach ($exekey as $key){
$JQuery.="if (count == $count){ insertMbContainerReload('$comstream','$exekey[$count]', 'cmd=rlexe&exekey=$exekey[$count]'); count++;return true;}";
$count++;
}
$JQuery.="
if (count == $count){ $('#infobar').html('DONE'); $.doTimeout( 'FetchOpenContainers');return false;}
count++;
return true;
});\n";
} else {
$JQuery.="$.doTimeout( 'FetchOpenContainers',1000, function(){ $('#infobar').html('Done');});";
}
// -------------------------------------------------------------------------
I also placed this in your script
var myID, myLeft, myTop, myWidth, myHeight, lastAction;
function recordData(lastAction,myID, myLeft, myTop, myWidth, myHeight){
//alert('recordFunction:-> LastAction:'+lastAction+' ID:'+myID+' L:'+myLeft+' T:'+myTop+' W:'+myWidth+' H:'+myHeight);
$.get('comstream.php', {cmd: 'mbDb', lastAction: lastAction, myID: myID, myLeft: myLeft, myTop: myTop, myWidth: myWidth, myHeight: myHeight } , function(data) {
$('#log').append(data);
});
}
(function($){
jQuery.fn.buildContainers = function (options){
return this.each (function (){
if ($(this).is("[inited=true]")) return;
this.options = {
containment:"document",
elementsPath:"",
dockedIconDim:35,
onCollapse:function(){ recordData('onCollapse',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());},
onBeforeIconize:function(){/*recordData('onBeforeIconize',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());*/},
onIconize:function(){ recordData('onIconize',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());},
onClose: function(){ recordData('onClose',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());},
onBeforeClose: function(){ recordData('onBeforeClose',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());},
onResize: function(){ recordData('onResize',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());},
onDrag: function(){ recordData('onDrag',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight()); },
onRestore:function(){ recordData('onRestore',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());},
onLoad:function(){ recordData('onLoad',container.attr('id'),container.css("left"),container.css("top"),container.outerWidth(),container.outerHeight());},
mantainOnWindow:true,
collapseEffect:"slide", //or ""fade
effectDuration:300,
zIndexContext:"auto" // or your selector (ex: ".containerPlus")
};
I think if cleaned up a little this could make a nice little plugin .. mb.ContainerPlusComService.js
and ajaxifyMyMbContainers.php
Hi Matteo,
I have very strange problem. I’ve created Wicket application. In its webapp folder it contains simple html page (not wicket one) that opens mbcontainers and uses ajax call to integrate a wicket page inside of the container. My application context is intelleo, so everything under http://localhost:8080/intelleo/ I can access using relative paths, e.g. images/somepicture.jpg. However, inside the container the application context is not visible, so I had to use intelleo/images/somepicture.jpg, to access images, javascripts and css files. The main problem is that there are some js files called by wicket itself that are navigated to the wrong url, which makes my containers not showing up. For example I had this errors
GET http://localhost:8080/resources/org.apache.wicket.markup.html.WicketEventReference/wicket-event.js 404 Not Found
GET http://localhost:8080/resources/org.apache.wicket.ajax.WicketAjaxReference/wicket-ajax.js 404 Not Found
GET http://localhost:8080/resources/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/wicket-ajax-debug.js 404 Not Found
because this js files are available on http://localhost:8080/intelleo/resources/...
This problem is present only within mbcontainer, but not in html page that keeps these containers, neither in wicket pages when used out of the container.
Do you have any suggestions how to solve the problem?
Zoran
Hi Zoran,
if you call the container content via ajax, the url you are invoking from the content are relative to the page where the container is initialized; I don’t know how your app is building URLS but as I can understund you shoul just add the context path “intelleo/” before the URL placed on the content you are calling via ajax and it should work…
Anyway a relative url should work as well just considering as origin the page from where you are calling the content via ajax and not the ajax page itself.
Bye,
Matteo
Hi Matteo,
if you call the container content via ajax, the url you are invoking from the content are relative to the page where the container is initialized; I don’t know how your app is building URLS but as I can understund you shoul just add the context path “intelleo/” before the URL placed on the content you are calling via ajax and it should work…
Yes. It is possible to add intelleo/ before relative urls used within wicket page and make this resources available. However, then I have another very odd problem. Firebug indicates this errror:
$(
[Break on this error] $(“#”+containerId).mb_removeCookie(“closed”);
This error is in function insertMbContainerPlus(url, containerId, data)
This is the same function provided within demoAjax example. I don’t have any idea about what is the reason for this error. This error is fired if I call wicket page, but not if I fire regular html page. However, if I call wicket, and then html page, both pages fires the error. When this error happen, I can’t see mbcontainer, but the html code for it is created.
BTW: Is this blog moved somewhere? I can’t see any comment after the 02/06/2010.
Zoran
Hi Zoran,
download the latest 2.5.0 release where this bug has been fixed.
No, the blog is still there; the date you are referring to is the last Trackback; trackbaks and comments are separated lists.
Bye,
matteo
Hi Matteo,
I have updated this, and it’s solved but still have this odd problem with application context within the container. Things referenced directly within a page integrated in container are resolved fine, but images or libraries referenced from javascripts are not aware of the application context and it ignores this.
For example I copied your demoAjax example in my web application without change on it, and images used for design of container browser.png, min.png, iconize.png, close.png are not found, because applications tries to find it under the http://localhost:8080/elements instead of http://localhost:8080/intelleo/elements.
Only elements accessed from css are available.
Do you have any idea about this?
Zoran
Hi i am trying to add a google gadget inside a container like
:
when the page loads the widget takes over the entire page in firefox.
any idea?
sorry the code for the above is at:
http://pastebin.com/w5ADpYAk
Hi sodapop,
This happens because mb.containerPlus manipulate the DOM to render the container while your google script is trying to insert content in place.
You can solve this issue either by writing yourself the container structure (as it was on previous releases), in that way it will not manipulate the DOM code, or insert the script as ajax content (making a specific page that contains the script and using the “content” meta attribute on the container to get it: class=”containerPlus draggable resizable {buttons:’m,i,c’, icon:’alert.png’, skin:’white’, width:’500′, content:’your google component page path’}”).
Hope this is clear,
Bye,
Matteo
Hi Matteo,
I have the problem with overlapping several different components used in mbcontainer. I integrated there 2 jstree components, modal window and datepicker, and it’s very difficult to make all these components to be visible over the container. They are hidden behind contrainer. I tried to set container z-index value to the lower value, but it’s set to 1000001 again. Is it possible to solve?
Zoran
Hi Zoran,
there’s a parameter of the init function “zIndexContext” of the latest version that define which elements are affected by the bringToFront method; in your case set it to limitate it to the containers: zIndexContext:”.containerPlus”.
Bye,
Matteo
Hi Matteo, sorry for bothering you too much lately
in your icon_in_place example if you have your dock in a container how can you hide the dock icon from the icons
Hi Sodapop,
add a class for ex: “dock” to the container;
add this:
if(o.hasClass("dock")) return;as first line of the function:initDock(o,docID)That’s all,
Bye
Matteo
Thanks a lot!
Matteo something not that important is that if you try fast clicking on any icon (icon_in_place demo) , eventually the icon will disappear. this happens in firefox and chrome but not ie8.
As there is much work to get all charsets and languages working properly with dynamic load of content
i have modified my mbContainer.js some
added a few lines
at Line 68:
if (container.metadata().url) container.attr(“url”,container.metadata().url);
if (container.metadata().framename) container.attr(“framename”,container.metadata().framename);
at Line 452-456(?)
after container.attr(“restored”, true);
i have added
if((typeof container.attr("framename") != "undefined") && (typeof container.attr("url") != "undefined")){
window.frames[container.attr("framename")].location = container.attr("url");
}
In the actual call page it looks like this:
Blänkare!
as far as i have seen with my install it works like a charm!
Sorry some of the code did not work.
<div class=”containerPlus draggable resizable {buttons:’m,i’, icon:’alert.png’, skin:’black’, width:’1500′, height:’800′, dock:’dock’,iconized:’true’,framename:’micframe’,url:’/inc/Main_Image_Control/ADMIN/default.asp’}” style=”top:10px;left:10px”&rt;
<div class=”no”&rt;<div class=”ne”&rt;<div class=”n”&rt;Blänkare!</div&rt;</div&rt;<div class=”o”&rt;<div class=”e”&rt;<div class=”c”&rt;<div class=”mbcontainercontent”&rt;
<iframe name=”micframe” src=’#’ width=”100%” height=”100%” frameborder=’0′&rt;</iframe&rt;
</div&rt;</div&rt;</div&rt;</div&rt;<div&rt;<div class=”so”&rt;<div class=”se”&rt;<div class=”s”&rt; </div&rt;</div&rt;</div&rt;</div&rt;</div&rt;</div
Sorry some of the code was not shown:
<div class=”containerPlus draggable resizable {buttons:’m,i’, icon:’alert.png’, skin:’black’, width:’1500′, height:’800′, dock:’dock’,iconized:’true’,framename:’micframe’,url:’/inc/Main_Image_Control/ADMIN/default.asp’}” style=”top:10px;left:10px”>
<div class=”no”><div class=”ne”><div class=”n”>Blänkare!</div></div><div class=”o”><div class=”e”><div class=”c”>
<div class=”mbcontainercontent”><iframe name=”micframe” src=’#’ width=”100%” height=”100%” frameborder=’0′></iframe></div></div></div></div><div><div class=”so”><div class=”se”>
<div class=”s”> </div></div></div></div></div></div>
I did not properly explain why this mod was awesome.
If i use simple frames in the modalboxes all content is loaded on page load (wich is very slow if you have much content)
If i use dynamic load with Ajax(xmlHTTPrequest) the content is fucked up (since it does not have support for other charsets (also fixes the url-problems some might have))
Also when i close a tab and then re-open it i wish to go to the original page
(since otherwise i will just end up at a “thank you page” as i use the MB.containerPlus to manage database-posts.
If you wish to disable the reload-at-open it is pretty simple.
just check if the frame already has the URL loaded (in the code above).
example:
if((typeof container.attr("framename") != "undefined") && (typeof container.attr("url") != "undefined") &&(window.frames[container.attr("framename")].location!=container.attr("url");)){
window.frames[container.attr("framename")].location = container.attr("url");
}
or rather: (in the if above)
&& window.frames[container.attr("framename")].location!=”#”)
__
Sorry for my many posts.
Hi,
Could you answer El Al’s question (of 13/04/2010 at 7:10 am), namely to include Themeroller support? It would be ok to include addtional CSS styles, but it would also be nice to use the Theme roller icons and colors for the header, for example.
°J
Hi Jonas,
Actually the container has a different constructor than UI components and this prevent an easy implementation of the Themeroller on the containers. Anyway I’ll give some attenton on this issue next.
Bye,
Matteo
P.S.: if anyone would implement this issue I would be honored.
Hi may I ask if there is a way of making the window modal i.e. When it’s open the user cannot click anything underneath until they have closed the pop up.
Hi Sabelo,
here you can download the component with a demo folder for a modal container: http://dl.dropbox.com/u/1976976/jquery.mb.containerPlus_modal.zip
Bye,
Matteo
Hi Matteo,
Thanks I will give it a try. You quick response is amazing!
Thanks mate.
Sabelo
Hi, Matteo very compliments for all widget.
I don’t find an examples in all the web for the function GRID, I do not understand if is possible to use same as igoogle for drag the windows and storing the positions (for create a dashboard).
Thank’s
Hi Lupin4,
searching on the web you can find many tools for that. Here is one: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
Bye,
Matteo
hi, i try to add jquery ui tab inside mb.containerPlus. the rendering is ok, but the click tab function it seem not work. could you tell me what’s wrong?
thanks.
ok i found i need to create and initialize the mb.containerPlus first then initialize the tab.
thanks for your wonderful work ^_^
Hi heriyanto,
the latest mb.containerPlus manipulate the HTML to render the layout of the container, that’s why your UI component is not initialized; to make it work you should initialize the UI component into the onCrreate callback of the container function or use the previous constructor for the container (writing all the HTML in the page).
Bye,
Matteo
Hello and first off Thank You for such great jQuery work. I have implemented mb.ContainerPlus on a recent project and it looks great.
Apologies in advance for the basic nature of this question. I’m having trouble getting my containers to drag, resize, and for the icons to function. I have tried turning off all my other javascript links (in case there was a conflict), and tried various init scripts. Here’s my include block:
Anyway I don’t think the issue is here because the code is definitely being called. The same is true for my css link:
Here’s my init code (copied from the implementation example):
$(function(){
$(“.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”containers/elements/”,
onResize:function(o){},
onClose:function(o){},
onCollapse:function(o){},
onIconize:function(o){},
onDrag:function(o){},
onLoad:function(o){}
});
});
Anyway the icons in the title bar render correctly, and hovering on them changes the cursor, but they don’t function; nor is the container resizable.
Thank you so much for your wonderful work! Any thoughts on my issue would be greatly appreciated.
Matt from Paris
[1]: ftp://asburymedia.com@s90083.gridserver.com/domains/training.asburymedia.com/images/mb.containerScreenShot.png
Hi Matt,
do you have any public URL where to see your working page?
Bye,
Matteo
Hi Matteo. Sorry – for some reason two of my code embeds didn’t make it into the post above. At any rate the code is visible (temporarily as this is a demonstration for a potential client) here:
training.asburymedia.com
Many thanks!
Matt
The container in question is accessed via the “Experimental” tab in the second bar of tabs. Best – Matt
I can’t get exactly what is shooting the error; you say yo have tried mb.containerplus without the other script having the same problem… try this latest 2.5.2 version where I fixed some bugs I had with FF4 similar to your issue : http://github.com/pupunzi/jquery.mb.containerPlus/zipball/2.5.2 and let me know if something change.
Bye,
Matteo
Yes it’s the oddest thing. I replaced the directories on my site with those from your github link. Still the same behaviour. If I take your html pages verbatim and host them on my site, the dragging works great (previously I got it to work by putting your demonstration code into an iframe; however now I’m attempting to allow the container to be dragged outside of the limits of that iframe). Because I can get everything to work when I simply host a page you’ve provided in your demos, I suppose that this is not a site-wide issue (like an Apache configuration or .htaccess or somethng). I can only guess that maybe there is some conflict with the jquery ui tabs that I’m using?
In any case, I don’t want to take up your valuable time on this issue. I would love to hear your thoughts, however I’ll keep swinging away at it and let you know if I can reach a solution.
Thanks again.
-matt
Actually i wouldn’t bother trying to use anything which is created inside an iframe outside of an iframes (if it is not an popup or alert), it is just a headache and you would probably not get it working after all and even if you somehow succeeded it would probably be problems in other browsers. .
If i were you i would validate the site and see what i could have done wrong, i see for example you are mixing xhtml with html inappropriately (you are for example using short-close-tags but also writes attributes in uppercase)
Also you do not have any doctype declaration(!!).
http://validator.w3.org/
Hi,
)
Have you ever heard about HTML5?
the new doctype declaration is “doctype html”, that’s all and it’s well accepted by all browsers.
You can either close or not any tag, you can write uppercase or lowercase and doesn’t matter… (anyway I’m writing attribute lowercase
I don’t understand exactly what are you trying to do… anyway, if you are trying to insert content that previously was in an iframe via ajax into the page you must consider that all the path for js, css and so on must be relative to the actual page that get the content.
Bye,
Matteo
Thanks very much. I ran through the validator and fixed each of the issues it found. Now it’s only complaints pertain to the divs that store the containers, though I assume this is expected behavior. I’m no longer using any iframes, and I’m using the HTML 5 doctype. Unfortunately, my containers still refuse to drag or resize. Any other suggestions would be greatly appreciated.
Thanks!
-matt
Hi Matt,
in your online demopage seams you copy and paste the generated code of my mb.containerplus demo page; you don’t have to write the generated code but just the code you find in the html of the demo page, all the extracode is managed by the plugin itself. so, a containerPlus is defined in the page as below:
<div class="containerPlus draggable resizable {buttons:'m,i,c', icon:'alert.png', skin:'white', width:'500', content:'test.html',dock:'dock',iconized:'true', title:'Ajax content!'}" style="top:100px;left:500px">[content]
</div>
this is just an example but you don’t have to write all the other tags and attributes as you are doing on your page.
Bye,
Matteo
As it turns out, my wife has been correct all these years: I’m an idiot.
I ran the code you provided and everything works perfectly. Merci beaucoup pour votre patience!
-matt
Hi everybody,
i’ve a little issue with the plugin.
I try to define the max height for my content or something like this.
My code :
…..
My bottom have the css properties : bottom:0;
When my container “inscription” is highter that my zone between dock and bottom, i have a scroll bar (ok) but my div “inscription” is under my footer and it is impossible to see my button which is on the bottom of my div “inscription”…
is-it possible to constraint the height of the div “inscription” ? or write something to stop the height of the div “inscription” before the begining of my footer ???
I’ve tried to find the javascript code on mbContainer.js which control this resize but no result…
Someone can help me ?
Ps; sorry for my english and thanks by advance
i can’t pu my code here ??
but i explain it :
open div => wrapper
1 div with class containerPlus…. => inscription
1 div with bottom:0 ==> footer
close div ==> wrapper
As I saw in another query, looking to do Nested containers.
I am using the docked containers, where I then want to have a container pop up which can then have other containers pop up from it.
I tried setting the dock ID to one of the docked ID containers, but it always seems to end up on the docked bar rather than appear in the sub container.
Seemed to have fixed it. renamed the base dock from ‘dock’ to ‘baseDock’ and now things seem to be finding the proper home.
Hey, just wanted to say that the container script is great. Wonderful work. I was also looking for a way to turn off the window auto-adjust and I see that you commented how to prevent that from happening.
Looking forward to the next version. You’re awesome!
Update: after looking at the docs, I assume that setting (mantainOnWindow:false) would also prevent this.
First of all, great plugin
Second of all. not so great documentation, you need to do some hacking… to understand it properly (take it as constructive criticism and nothing else)
Third of all I guess this might be a bug.
Preamble:
When not using the metadata plugin and using HTML attributes on the targeted element
Specifically:
It happened to me by trying to start a container iconized (iconized=”true” on the element).
What happens:
In mbContainer.js you are doing at lines 54-55:
container.attr("iconized","false");
container.attr("collapsed","false");
which basically overrides the HTML attributes without previously saving their state.
Which then in effect renders the lines 190-197:
if (container.attr("collapsed")=="true"){
container.attr("collapsed","false");
container.containerCollapse(this.options);
}
if (container.attr("iconized")=="true"){
container.attr("iconized","false");
container.containerIconize(this.options, true);
}
ineffective when you’re using the HTML attributes of the element instead of the metadata plugin.
I guess one solution is to save the HTML attribute state before setting if those 54-55 lines are really necessary (they are set on false if iconized/collapsed is true on lines 190-197 anyway right?)
Hi Cip,
it is a bug…
I’ll fix it for the next release.
Sorry if documentation is not so clear but I’ve no time to manage all things I’ve to… and for free
…
Thnx,
Matteo
One other thing.
I don’t understand why the plugin has to create image elements all the time. For me it would be much more practical if it could just use an icon I already have set in my page.
Don’t know really why I did this way… but as you can build your container using the short sintax now (just writing the outer div), I think that this way simplify the approach… anyway I’m going to refactor the code and the way buttons and icons are managed by the component.
Bye,
Matteo
Great plugin and really nice design. Thanks for the effort you’ve put into this and for making it open and free. Just wondering if you take patches? In mbContainer.js on line 66 I added the ability to change the icon dimensions via the same configuration options as the icon. Added this code:
if (container.metadata().dockedIconDim){
this.options.dockedIconDim = container.metadata().dockedIconDim;
}
so now you can set dockedIconDim in your class on the dialog in case your icons have different dimensions.
Also I added this bit of code on to line 69:
$.each(container.metadata(), function(key, data){
container.attr(key,data)
});
With that you can remove the large block of if statements:
// if (container.metadata().skin) container.attr(“skin”,container.metadata().skin);
// if (container.metadata().collapsed) container.attr(“collapsed”,container.metadata().collapsed);
// if (container.metadata().iconized) container.attr(“iconized”,container.metadata().iconized);
// if (container.metadata().icon) container.attr(“icon”,container.metadata().icon);
// if (container.metadata().buttons) container.attr(“buttons”,container.metadata().buttons);
// if (container.metadata().content) container.attr(“content”,container.metadata().content); //ajax
// if (container.metadata().data) container.attr(“data”,container.metadata().data); //ajax
// if (container.metadata().aspectRatio) container.attr(“aspectRatio”,container.metadata().aspectRatio); //ui.resize
// if (container.metadata().title) container.attr(“containerTitle”,container.metadata().title); //ui.resize
//
// if (container.metadata().grid) container.attr(“grid”,container.metadata().grid); //ui.grid DRAG
// if (container.metadata().gridx) container.attr(“gridx”,container.metadata().gridx); //ui.grid DRAG
// if (container.metadata().gridy) container.attr(“gridy”,container.metadata().gridy); //ui.grid DRAG
//
// if (container.metadata().resizeGrid) container.attr(“resizeGrid”,container.metadata().resizeGrid); //ui.grid RESIZE
// if (container.metadata().resizeGridx) container.attr(“resizeGridx”,container.metadata().resizeGridx); //ui.grid RESIZE
// if (container.metadata().resizeGridy) container.attr(“resizeGridy”,container.metadata().resizeGridy); //ui.grid RESIZE
//
// if (container.metadata().handles) container.attr(“handles”,container.metadata().handles); //ui.resize
// if (container.metadata().dock) container.attr(“dock”,container.metadata().dock);
// if (container.metadata().closed) container.attr(“closed”,container.metadata().closed);
// if (container.metadata().rememberMe) container.attr(“rememberMe”,container.metadata().rememberMe);
// if (container.metadata().isModal) container.attr(“isModal”,container.metadata().isModal); // todo
// if (container.metadata().width) container.attr(“width”,container.metadata().width);
// if (container.metadata().height) container.attr(“height”,container.metadata().height);
// if (container.metadata().containment) container.attr(“containment”,container.metadata().containment);
// if (container.metadata().minWidth) container.attr(“minWidth”,container.metadata().minWidth);
// if (container.metadata().minHeight) container.attr(“minHeight”,container.metadata().minHeight);
//
// if (container.metadata().alwaysOnTop) container.css(“z-index”,100000).addClass(“alwaysOnTop”);
It also means that you can pass arbitrary values that aren’t predefined by mbContainer.
Hi Justin,
thnx for the patch, you are right, this way is better except for the last line:
if (container.metadata().alwaysOnTop) container.css(“z-index”,100000).addClass(“alwaysOnTop”);that you should leave in the code (but I’ve to change it because it’s a bug).
I’ll change the code for the next release.
Thnx,
Matteo
It looks like there is another line that will need to be added back in due to a difference in names:
if (container.metadata().title) container.attr(“containerTitle”,container.metadata().title); //ui.resize
Thanks again for the awesome code!
Justin
Grazie mille Matteo !
This is a beautiful plugin.
I’m pretty new to JQuery and yet I’m finding getting up and running with this plugin to be no problem.
Something I’m playing with though is using two containers: neither draggable or resizable and with no dock/iconise (I’m using the collapse feature here).
One container is initially in full view (iconized: false, collapsed: false) and has no buttons.
The other has a minimise button, is not iconized but is minimised initially (buttons: ‘m’, iconized: false, collapsed: true).
My intent is that when the second container is maximised, the first is minimised (they’re related and in this use mutually exclusive) and vice versa.
I have an event (‘onCollapse’) which I can handle to work one side of this…but I’m struggling to find the same event in reverse. There is ‘onRestore’ but this seems to trigger only when transitioning from iconized -> open state. Should this also fire when a container transitions from collapsed -> open ? Or should a different event fire ? Or has this newbie missed a trick ?!
I can switch to use the dock to get around this of course. Will save me some screen space too so it’s possibly a better solution. But I thought I’d ask in case anyone else is trying this too.
Ben
Hi Ben,
I’ll add a new callback in next release.
Bye,
Matteo
Hi
Tried using your demo ajax (from the dropbox zip ) in Chrome. Didnt work when pressed any of the buttons (No popup came)
Works fine in Firefox, IE.
Nothing in the console for errors either. Thoughts?
Hi Danish,
if you are trying it locally on your computer Chrome bloks any ajax call; it’ll work fine once published on a server.
Bye,
Matteo
…avevo già iniziato a scrivere la domanda… per fortuna un bel ctrl+f nel browser (chrome appunto!!) aiuta sempre
Congratulazioni per il lavoro…davvero molto molto interessante..
grazie!
Hi again,
I am implementing your “icons in a dock” in a solution.
However, there is a use case where i want to catch the click on the icon in the base dock
and “cancel” the animation of showing the div associated with it.
For example, i have a login icon.. which when clicked causes the Login div to come out where one can login.
For the logout icon, it doesnt make sense for a logout div to come up. So can i catch this event and cancel the div from showing up?Any other suggestions?
Hi Danish,
why don’t you simply add a new icon once logged in for the logout and set the login one to hidden?
Hi Matteo, I’ m trying to use mbcontainer together with mbmenu I’m binding menu items to spawn mbcontainers when clicked. My problem is that when i include the menu js in my page alwaysontop stops working for the containers seems like the setting alwayOnTop:’true’ gets ignored.
Also sometimes when a menu item is clicked and the a container is spawned the menu root item remains highlighted as if the mouse is still over it.
I’m using latest versions for both of the components
Any ideas?
Hi Sodapop,
both mb.containerPlus and mb.menu defines a bringToFront function; this is an issue I’ve to solve… Anyway you should remove from the mb.menu.js the bringTofront function so that both will use the one defined into mb.containerPlus.
Bye,
Matteo
Hi again Matteo,
When using jquery-ui-1.8.5.custom.min.js if you don’t set the container to resizable it throws:
js/jquery-ui-1.8.5.custom.min.js:29
Uncaught cannot call methods on resizable prior to initialization; attempted to call method ‘disable’
sorry the above is thrown when you try to iconize the window
Tried in both Chrome and Firefox
Code from Chrome’s developer tools:
ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js:20Uncaught cannot call methods on resizable prior to initialization; attempted to call method 'disable'
inc/mbContainer.js:214Uncaught TypeError: Object # has no method 'adjastPos'
ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:154Uncaught TypeError: Cannot read property 'clientWidth' of null
inc/mbContainer.js:214Uncaught TypeError: Object # has no method 'adjastPos'
11inc/mbContainer.js:49Uncaught TypeError: Object function (a,b){return new c.fn.init(a,b)} has no method 'doOnWindowResize'
This was simple to fix by just setting collapsed to ‘false’
This “just” happened about a week ago, i did not make any changed to my code.
as i understand google must have updated the jq-libs
Hi Sodapop,
there’s a bug, you are right… to solve the problem you have to change two lines of code:
where you find:
container.resizable("disable");should become:
if(container.hasClass("resizable")) container.resizable("disable");on my latest version the line number are: 366 and 406…
Bye,
Matteo
I big fan of http://pupunzi.open-lab.com/mb-jquery-components/mb-containerplus, Greetings from Panama.
* Name:jquery.mb.containerPlus
* Version: 2.5.1
cannot handle percentage widths attribute.
my fix:
var px = (container.attr(“width”)).indexOf(‘%’) == -1)? “px”: “”;
var cw= $.browser.msie? container.attr(“width”):container.attr(“width”)+px;
/// var cw= $.browser.msie? container.attr(“width”):container.attr(“width”)+”px”;
why you NEED to check for browser vendor , i don’t know ….
very nice component. thank you.
Hello, I am trying to figure out how create div container on demand, which has specified custom behaviours, which is common for all popup in the page. I have unknown number of instances in the page. It could be 5 or 60 or even more.
Every instance has Ajax content diferent from the other instance. So I want to create (initialize) div with custom behaviours on demand ( i.e. when user click on tag a href=”..” onclick=”bla bla”
This is solved in jQuery UI dialog this way but it did not works with your plugin even when I change names of functions and initializing parametres in accord with your plugin.
Uncle Google did not help
Thanks for any advice
Hi Nagasaky,
There are 2 ways to solve your issue;
A) you can make your own function that inject a div into the page with all the attibutes for the container and than initialize it as containerPlus and use this function on your “onclick”.
b) you can load your container via ajax passing it all the params to load specific content (this if you are running into a server side application PHP, JSP, ASP,…) you can also see an example (static) in the demoAjax folder or a live demo I made for an application GUI at this address: http://www.open-lab.com/arms/, it doesn’t need username and pwd, just click on enter –> systems –> [any system] –>System tools. You’ll see that if you click on any tool of the extruder it’ll open a new container with its behavior.
Bye,
Matteo
Hi. I use 1 master container on each of my page. I want this container’s title to be change everytime I click on each different button. How could I do this?
Hi Gregorio,
if you need to change the title after the container has been created here you’ll find the answer: http://jquery.pupunzi.com/questions/544/change-mbcontainerplus-title-after-creation.
if you whant to change the title before the creation just change the “title” property on the corresponding DIV.
Bye,
Matteo
yeah i need them to be reused after creation. i’ve used your container for a while, great plugin!
just a suggestion, i think you should change this into
mb_changeContainerContent(url, data, POST/GET);
Hi Matteo,
your jquery stuff rock’s and is realy well designed.
right now im in trouble with mbContainerplus. i use it in my tiny-cms and place a tree plugin and a WYSIWYG editor inside. z-index issues i allready soved but i need to have a callback that tell me that the container is loaded (onCreate ) and positioning effekt is done.
about the slide in effect, right now it seems to me that there is no option to change “slide from top” into fade in?
Hi sascha,
the slide from top effect you are describing is due by the initial position of the container that is out of the screen (probably a negative top value); try setting a top, left position that position the container into the screen…
The container should fade in.
Bye,
matteo
Hello,
Is there any way to use modal dialogs with containers?
Thank you,
Hi Andreina,
here is a demo with a modal container plus: http://dl.dropbox.com/u/1976976/jquery.mb.containerPlus_modal.zip
in the main folder you can find a “demo_modal” with the html file.
Give it a look.
Bye,
Matteo
OH! Matteo. Thank you so much!… Yesterday, I lost all day long trying to solve it and I wrote to you as my last option
It works perfectly!!!!!
Thank you thank you thank you.
Andreina
Hi Matteo ,
First Thx For This Fantastic Plugins …
I Tried The “Change Content” Demo & It worked perfect In FireFox but it had problem in IE8
In IE8 , The Container Was Opened But It Needed to Resize To Show The Content ….
Hi Matteo, this is real good work. I will use it in the next Version of our webbased FM.
I have noticed a little error in the documenation.
The parameters in the function
jQuery.fn.mb_resizeTo(w,h)
must change position to:
jQuery.fn.mb_resizeTo(h, w)
Thanks,
Paulo
Hello Matteo,
Thank you for the creating these super plug-ins/components. I haven’t even worked with JQ but the more I see you can do with it the more I am loving it!!
I have incorporated it into my brothers radio station site http://www.v103.net/index.php but it doesn’t work at all in IE8 which always seems reject most GREAT scripts. Do you have a fix for IE issues??? I appreciate any and all help.
Once again thank you for sharing and for being so helpful!!
Hi Jeff,
the mb.containerPlus use to work fine in IE (not as fine as on the other browser…) do you have any error on the developer console?
I’ll take a look to see what’s going wrong on your site.
Bye,
Matteo
No Matteo, there is no error message at all. Did you get a chance to look at it in IE? http://www.v103.net/index/php I am figuring everything else out, just not an IE fix lol.
…FYI I uploaded all of the files that I downloaded from you here and opened it in IE and it doesn’t work either.
Thank you for your help Matteo!
It’s a really great component.
A french newbie like me is able to do something sexy with it !!!!
But…. I’have a stupid question (I know the answer is somewhere behind).
I’a doing something very close to the “IconInPlace” demo.
The only one think I can’t do is how can I use the command to have the container centered !!!!
$(“.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”elements/”,
dockedIconDim:26,
onLoad: function(o){o.mb_centerOnWindow(true)},
onCreate:function(o){initDock(o,”dock”)},
onClose:function(o){close(o)},
onRestore:function(o){restore(o)},
onIconize:function(o){iconize(o)},
effectDuration:300
I’am sure that’s not the good place….
Thanks +++++
Manu
Hi Emmanuel,
This is the right place but you should set to false the param you are passing to the function:
onLoad:function(o){o.mb_centerOnWindow(false);},
Bye,
Matteo
Thank you !!!!!!
Thanks for the great plugin! However, I have a little problem loading pages into the boxes. When the pages contain any scripts these are loaded into the main page, not into the page in the box.
Currently I get around this using IFrames, but i was wondering if there was another solution.
Kind regards,
Izz ad-Din
Hi Izz ad-Din,
loading external pages via ajax into the containers means you are adding html content to the main page; if you have scripts in the called page invoked on page load than those script will be invoked once loaded via ajax on the main page. You just have to consider this when you define the workflow of your web site and build your page in the correct way…
Bye,
matteo
Hi,
I have seen in the demo files some sounds… Is ther a way to play sounds on opening container or closing container etc… ?
Thanks
Manu
Hi Emmanuel,
not really, this is something I was working on but not jet implemented; but, if you are interested on it, I made a little generic component that let you add sounds to general DOM events using HTML5 audio element (it doesn’t work on IE); you can find it here https://github.com/pupunzi/jquery.mb.sounds.Yuo can implement it on mbContainerPlus using its callback functions or working on the js file.
Bye,
Matteo
Great Application.
I am hoping you can help with one thing!
Is there a way for a container to know what its ID is. Something like the getState function, it would pass back the name of the container, so when I make an ajax call, I could pass in which window to target….
A simple alert(this.mbContainerID) would be what I am after….
Thank you.
Dear Matteo,
I´m a German beginner and for Learning I analyse your components. (Great Work – I love it).
I try to link a word-link or an image link with mb.containerPlus. (No buttom). Can you help me?
Hi Matteo,
thx also from my side for this wonderful work. TOP!
As I´m niot familiar with Java but creating a XT:Commerce shop I don´t find the right way to get the content indentified for my boxes:
change content 1
I´ve got 2 questions:
1. how do I have to set directory to enter the content from anywhere inside the shop folder ? (it´s a shop running under mysql/php and uses includes
2. How can I force the container to show up all over the window and not only inside the shop content ?
Would great to get a little help/hints from your side.
Thanks in advance and best regards
Rolf
Hi Rolf,
I don’t know how your pages are built and I don’t know how XT:commerce works so I can’t answer your questions appropriatly.
1. What do you mean by: ” I don´t find the right way to get the content indentified for my boxes”?
2. You can insert any content located in the same domain of the container page by defining the “content” attribute of the specific container; the path can be either absolute or relativ to the container page; all the reference in the called page content should be relative to the container page and not to itself.
3. if the shop content is inside an iframe than the container is relative to this iframe; otherwise giving an absolute position to the container it will be up all over the page.
Bye,
Matteo
Nice application!. But the fullsize function doen’st seam to work on IE 8.0.7600, on FireFox it’s runs fine, see also on the demo.
Hii Matteo
Can you help me? Thanks 
Is it possible to open a container with a href link? I try to make a web Desktop and the Dock works with href links but it just won’t work
Hi Sanoi,
yes, you can operate several actions by external links; you can find all the methods here: https://github.com/pupunzi/jquery.mb.containerPlus/wiki
to open a container via a LINK:
1. initialize your container as closed (
{buttons:'m', icon:'chart.png', skin:'black', width:'500',dock:'dock',closed:'true', rememberMe:true,title:'container Demo'})2. on your link add:
onclick="$('#[yourContainerID]').mb_open();"Hope this can help you,
bye,
Matteo
hi,
it’s really one of the best controls i have seen, specially the working demo @ http://www.open-lab.com/arms/.
can we download and work with it? its really fantastic
thanks
Hi Amjad,
sorry but this is not exactly a “working demo” but a work I made for a web application committed by one of my clients and I can’t give you the original files.
Bye,
Matteo
Hi Matteo .. how I can change the opacity of the containers? Thanks!
Hi!
in a mb-containerplus sam ple, i see a container with green skin (container show a picture). But today i’m try this sample and not found container with green skin. I like your green skin very much but i can’t find. I’m try remember your green skin and try re- create it for me but i can’t.
can you share it for me? if can, please send for me soon. My email: luuduclieu@gmail.com. Thanks a lot!
Sorry, my english is very bad.
I noticed that in Google Chrome the iconized dialog would only display in the proper location if you were scrolled to the top of the window. Scrolling down on the page and then opening a dialog would cause the dialog to open off the page. I traced the problem to these lines in mbContainer.js on line 779 inside the method adjastPos:
var nww=$(window).width()+$(window).scrollLeft();
var nwh=$(window).height()+$(window).scrollTop();
The addition of scrollTop and scrollLeft are what cause the dialogs to be displayed off the screen. Since the dialogs use ‘fixed’ positioning Chrome calculates their location off the screen. Removing the scroll fixes the problem:
var nww=$(window).width();
var nwh=$(window).height();
I’m guessing that this is a quirk specific to Chrome – I’ve not tested it in other browsers.
Thanks again for a great piece of code!
Justin
Hello Matteo
Can you please advice if it possible to align the containerplus component side by side for example, I want to have 6 containerplus component on the page on 3 columns by 2 rows
if its possible can you please tell how to do it ?
Regards
Duksh
Hi Matteo
Can you tell me what jquery you use on your homepage to show the “HIGHLIGHTS” box please? I’d like a box like that too on my website,
Many thanks
Philippe
Hi Philippe,
this is a mb.containerPlus component.
Bye,
Matteo
I tried installing the demo page included in the download to my webserver (GoDaddy), which uses WordPress. I am trying to build a theme around this, and if i change the extension of the page from .html to .php, nothing displays correctly. I read somewhere that you might have to change the “POST” method to “GET”, so I changed it in 2 places in jquery-1.4.4.js, and 1 place in mbContainer.js, but still no luck.
Is there a special way I need to call it to work with PHP?
Or should I just hire someone who knows how to code to do this. I can usually rip code apart and slap it back together, but this one is really confusing to me considering I don’t know any scripting languages at all.
This plugin is awesome and I can see much potential in it! Thanks!
Tony
Hi Tony,
There shouldn’t e problems by using my components on any dynamic pages like php, jsp,asp, or any else.
Do you have any public link where to see what’s happening?
Bye,
Matteo
Hi Matteo,
in google chrome and chromium when you fast drag containers you will notice that content behind the container gets selected. Any ideas?
nevermind, including jquery and jquery-ui from google fixed it,
i was using local versions jquery-1.4.4 and jquery-ui-1.8.1
Absolutely outstanding. The only improvement that I can see so far is probably easy to implement: draggable iconized containers! I should be able to drag the icons–that would be amazing.
Great tool. Thank you so much!
Hi jason,
You can easily implement this behaviour by yourself using jQueryUI draggable applied to the #dock elements.
Bye,
Matteo
It took a couple of days to figure out… but it was worth it! Great job Matteo!
Hi Matteo, thank you for the pluggin- it’s really great.
Is it a known bug that the iconize animation does not work in ie? I mean it happens instantly in IE without any animation or time delay, and in my computer, the icons for close, min, and iconize shows the normal cursor in IE even though the css says “cursor: pointer” (I checked with firebug) in firefox everything seems perfect (no surprise!).
I’m not sure about these bugs since its possible that I might have edited some of the scripts, But i never touched mbcontainers.js though. Can you verify the problem, and if its a bug, is there a fix?
Hi Erric,
This different behavior is needed because IE (Damn it!) is not so confident and smooth with transitions and the final efect was terrible, so I decided to exclude transition on IE… Maybe in the future (IE9 ?!) they’ll make a better browser.
Bye,
Matteo
But won’t even the fade out work in IE? And How can I get the cursor to pointer in IE, it seems IE supports the “cursor:pointer” property but still, why doesn’t it work when it comes to mbcontainers?
(I hate IE as well, but people still use it u know..!)
Hi Matteo,
I am trying to figure out what to edit in the mbContainer.js if I move iconize.png and min.png to root of web directory, I got all other paths correctly working except when i move the demoinplace.html, mbContainer.js or the 2 .png’s to my root i dont see either of the buttons on the skin. Please help. I had to get all files on root to work with my webserver cause they won’t let me create folders on their server. Thanks in advance. Awesome application for sure!
Hi Jackson,
there’s an option of the function: “elementsPath” that sets the correct path where to find buttom images; setting it with an empty string should fix your problem:
$(".containerPlus").buildContainers({
containment:"document",
elementsPath:"",
...,
...
});
Bye,
Matteo
well i just can’t seem to get the paths correct if i move the demoinplace.html or the mbcontainers.js
sorry to bother you I’m new to this. maybe you could dumb this down for me and tell me everything i need to change as far as paths if i move everything to root, and when i view live server codes on my webserver i gotta use / for root
Hi, the containers don’t work in IE9, any idea how to sort this?
Thanks,
Gary.
Didn’t test it on IE9 yet.
Once IE9′ll be out of beta I hope it would work as on the other browsers does.
Bye,
Matteo
I was wondering if you could clarify whether both GPL and MLT licenses apply to your plugin or if it’s either or?
Hi Daniel,
My components are under both licences; you can use and modify the code but you must leave the copyright into the js file.
Bye,
Matteo
Matteo,
Thank you for your prompt response. I would like some further clarification on the licenses and I have sent you an email to matteo@open-lab.com. Would you kindly reply when you can.
Thanks
Daniel Rose
Matteo: Your work is GENIUS, beautiful, amazing and I’ve never seen anything as nice!!!!
God has blessed you with Michelangelo’s intelligence and creativity!
Your friend,
TheAngel.com
Thnks Hugo,
really kind of you.
Bye,
Matteo
Hi Matteo,
thanks a lot one more time for your incredible job. I am checking JQuery 1.6 (the last version) and works great in Firefox 3.6/4 and Chrome, but the icons are not appearing in IE 8. Could you take a look the following url?
http://www.euroseating.org/euroseating.com
Thx,
Fran
Is it possible to make the dock position static so it doesn’t scroll with the window content and always stays at the top of the window?
Yes of course;
the dock element is a dom element you can style via CSS as any other element on your HTML page…
Doesn’t look like this is working under IE9. Am I right?
Hi Thomas,
It’s working fine in IE9 too, which error do you get?
Thanks for your reply. I’ve been developing a Joomla template using this and it was working fine under IE8, but when I upgraded to IE9 mb_containersplus stopped working. Still works just fine in FF4. Not sure what might be the cause. The site is locked right now, but I’d be happy to provide you with an admin login if you want to look at the site. I don’t receive any errors (that I notice) in IE9.
Hello Mattheo
I came to your container plugin by accident and i have to say you did an amazing job. Very nice implementation and good looking.
I’m currently modifing the code a little and I’m wondering if you like to have these changes.
done.
- dragstart / stop with replacing content with emtpy div -> performance
- rename cookie, put id first
- allow absolute path for icons
coming:
- dont load content upfront if container closed / collapsed / iconized
- z-index in cookie, hopefully
Greetings
Finally i had time this morning and i just did the last two parts. I’m happy for now
Kind regards
great Martin,
send me your code when done.
Bye,
Matteo
I tried using the nested containers by specifying another container DIV as the content for a parent container, but nothing appears in the content. How do you nest containers?
Hi Rich,
There’s a param you can set to define what is the containment of the actual containerPlus:
“containment:“document”, (string) the container containment once dragged; can be any jQuery DOM Element”
See the documentation to find out more on it: https://github.com/pupunzi/jquery.mb.containerPlus/wiki/
Bye,
Matteo
Thanks for the reply, this is really great work. I noticed the parameter you mentioned, and I will mess with that again, but it appears to be used on initialization for all containers. I want my top level containers to be part of the document, then in each container I plan on having child containers. So only the children would have a different parent container. Do I need to have a different init of containers like:
$(“.containerPlusChildren”).buildContainers({
Thanks,
-Rich
Thats the right way,
but if you need to mantain the containerPlus class to preserve the aspect you can add an additional class and use that as selector:
and than:
$(“.nestedContainers”).buildContainers({ containment:".mbcontainercontent"this should work.
Bye,
Matteo
Thanks for the help, I have this almost working. I can now nest containers. However, the nested containers always use the skin of the parent. I want to use a different skin for the nested containers. Is this possible?
-Rich
Hi Rich,
if you download the gitHub latest commit I changed the CSS structure to allow nesting containers:
https://github.com/pupunzi/jquery.mb.containerPlus/zipball/master
Just added the skin as class for each inner elements so you can refer to them adding the skin selector in the CSS file.
Bye,
Matteo
Thanks for the great work. It’s exactly what I want for my project. However the containerplus move out of window when I resize browser. It happends in FF and IE. Please help. Thanks
@Fran
As of jquery 1.6 attr function is slightly changed. You can use the prop function instead.
You should make the following changes in mbcontainer.js for it to work:
replace container.attr(“options”,this.options); with
container.prop(“options”,this.options);
and wherever attr(“options”) occurs replace it with prop(“options”)
Hi, Matt.. this is Cory. The guy who is making that big ftp internet desktop application been working on for over a year now. I was the one who posted the solution for preventing dialogs from appearing underneath MbContainers???
Anyway… as you already know, if you remember me, I am implementing MBContainers as the main popup for my application with minimize to tool bar exactly as a windows look-a-like. I have rebuilt my application from ground up now, err, on the 15th rebuild. I do think I told you I had a version of MBContainers that communicates with MySQL via PHP.
… in build 15 my goal is to switch everything over to classes in PHP and all javascript over to jQuery plugin style objects/functions. One of my goals of my application is to be like word press where the application it self accepts classes/plugins. (Started that in build 14) Now at 15 I want every piece of javascript that can be in a plugin be done exactly as that. So of course the AJAX communication solutions with MBContainers, I know like the back of my hand and need to figure out if I want to plugin or copy/paste function to solve the long term solution for MBContainers ajax communications.
So for my question now… Would you be interested in taking a look at my plugin when I am finished. My past solutions involved quite a bit of re-writing of MBContainers.js and I am sure there would be some tweaks in your plugin needed to communicate my plugin causing a possible separate .js needed to support an ajax version release. Or even make the tweaks in MBContainer only check for the existence of the AJAX plugin. Or I could just make it one big function that just gets put inside of MBContrainer.js and not even do a plugin. Either way, what my offer is the 100% functionality of communicating the following…
My functions do the following… (As of now the functions are inside of mbcontainer.js)
in MBContainers….
X) update database with XCoord YCoord Minimized maximized Iconized, Fullscreen, and returned, centrered screen
PHP solutions does the following…
Return container with last state specs including, and knowing the difficult difference between min,max, fullsreen, return from full screen XCoord, YCoord, iconized, deiconized (all of it). Which if you ever tried to do this before you will find that is takes a lot of study to figure this all out. Figuring out the last state with MBContainers is not a matter of just using last state variables, but it’s lack of certain variables that define the last state. Which I have mastered. Just like the containers on top of dialogs. hehehe
So, my solution approach, I am extending this opportunity to you, if you have any inclinations of having an AJAX version of mbcontainers, I have already done all the work. I extend this to you so that if you do care to have a AJAX version, or an AJAX function/plugin.. you can have control of how it is implemented with, or along with, your application as the owner. Personally I am thinking plugin so that your updates don’t either have an effect, or cause an ajax version update and vise-verse.
Hi Cory,
yes, send me your code or a link to your app when you finish it.
Bye,
Matteo
ok, will do
Hi Matteo, Cory here again. Just wanted to update you with what is going on. I am on build 15 now and as said earlier I am doing everything a little tighter, jQuery plugins, etc, basically tighting up the code.
Ok, the update for you is… as for the ajax mbContainers PHP/MySQL plugin, I have begun construction of it as of today. And I am starting with mbContainers 2.5.1, if everything goes according to the last few builds, I should be done with the plugin within 2 weeks or so.
If you have a new release coming soon, or working on one now, and there is major changes differing it from 2.5.1 that you think I should know about, please let me know.
Hello
I lost the main .js fine while doing a migration of my site, and had to reload the original so lost the amendments I made before.
I have not been able to find where I change the resize options so you can resize the container on all sides and corners and not just the south, east and south east.
Could you please point me to the right place to do this
Many thanks
Richard
Hi Matteo
I have a problem with the “elementsPath”… How do I code the “elementsPath” in a Server-based environment???
No matter what I’ve tried the icons will not display!
OK.. here’s the problem.. I’ll use your own demo file – demo.html – as an example because I experience the same problem using your demo that I do when trying my own examples.. ..
So using your own demo file – demo.html – If I open this file directly in a web browser it works fine and the icons display correctly.
But, if I open your own demo file – demo.html – in Visual Studio or under IIS and simply run it as is, the Containers display fine but the Icons will not display!!!
I assume that the problem is linked to the “elementsPath” but i’ve tried every combination of amending it that I can think of..
Hope you can help..
Thanx
Hi Dude,
The elementsPath paramiter needs the complete path needed to retrive the images folder from the page containing the component; if you can’t define this path than you can set the absolute path to the images folder; As in my experience (I use to work on a java environment using tomcat as web app) We need to get the context path of the running application that identify the root of the app; to get this we use “/[path to the images folder from the root]“.
Anyway, if your site responds, for example, at “http://localhost” and your image folder is under “mySite/components/images/mbContainer/elements” the elementsPath value should be: “/components/images/mbContainer/elements/”;
but if your site responds at “http://localhost/mySite” then the elementsPath value should be: “/mySite/components/images/mbContainer/elements/”.
Hope this can help you,
Matteo
Thx for the advice but it simply won’t work no matter what.
I even tried passing Server.MapPath to “elementsPath” but still no luck.
Alas… I GIVE UP !!!
You should take a look at the generated source code and see which path have images… From there you can see what’s wrong.
Bye,
matteo
OK
I did a full trace of your demo & this is what I found…
The problem occurs in mbContainer.js.. Line 62..
After executing the line “container.attr(“options”, this.options);” the value of “this.options.elementsPath” becomes UNDEFINED.
ThereFore the following occurs later::
[1] When the code executes “container.containerSetIcon(container.attr(“icon”), this.options.elementsPath);” on Line 138 … “this.options.elementsPath” is UNDEFINED.
[2] When the code executes “if (container.attr(“buttons”)) container.containerSetButtons(container.attr(“buttons”), this.options);” on Line139 … and then proceeds to “var path = opt.elementsPath;” on Line 311 … “opt.elementsPath” is also UNDEFINED.
I have hard-coded my elementsPath on both of these Lines [138 & 311] and the Icons are now displaying correctly.
MayBe this is something you could look into in the next version.
{By the way, I use Visual Studio 2010}
This means that the elementsPath parameter has not been set… or has been set incorrectly. Can you send me the initialization code you have on the page for the containers?
Bye,
Matteo
Hi Matteo and Dude,
I have been playing around half a day changing pathnames etc but no result, within FF it runs great, while using IE 8 no images are shown. @Dude Did you figure out how to set up the elementsPath.
Pressed post button just to early, I figured it out myself by reading the Q&A’s, changed to and it runs great now, even in IE.
do you have any version compatible with IE7 and FF3.5?
Hey Mateo
I talked to you before about issues with IE9 which were fixed. But now in IE8 the icons don’t show up. Take a look in IE8
http://www.web-ctec.org
Any idea why the icons aren’t showing up? Thanks.
Hi, I have a simple question, and I hope there is a simple answer
What I have to do to get my mbcontainers centered when I open them using mb_open().
Thank you all!
once you initialize the container just add the following callback “onRestore”:
$(".containerPlus.centered").buildContainers({containment:"document",
elementsPath:"../elements/",
....
onRestore:function(o){o.mb_centerOnWindow(false);},
....
});
Let me know if it works for you.
Bye,
Matteo
Thank you!! It works perfectly!
I swear I’ve tried it, but it didn’t worked before.
Thanks again!
Raúl
I’m having a little problem with the size and autocenter of the container.
On resolutions that the height is higher than 1000 everything looks fine and the script centers the container on the screen, but when resolutions are lower, like 768, the window moves to the top of the page, and it’s only visible by hitting the F11 button.
I’m using a fullscreen jquery script and the page is fixed so there is no scrolling on the screen but on the containers.
There is any way to set a different behaviors on the container for different resolutions?
Hello Matteo
I have read that some people have been having problems with the container in IE9, and I have now found that the i cannot move or resize them in ie9. all the button options like close, minimise etc are working fine, so not sure why these other functions are not working, Have you come across this problem in IE9 and if so is there a solution?
Many thanks
RIchard
Hello Matteo
I did a bit of digging and I think the problem is I need to update to the latest core jquery file that has been developed to work with IE9, that should solve the problem but will keep you posted.
I was wondering though whether there are problems with the container experienced in older versions of IE? Many people still have version 8 or even 7 so was wondering if there is anything I need to do to make sure it all works in them ok.
Many thanks
RIchard
Hi Richard,
yes, on IE it works fine with the last version of jquery UI.
This component works fine from IE7 +.
Bye,
Matteo
Hi Matteo, thank you for getting back to me.
I Shall update a bit later today.
can you tell me if it is possible to set the height of the container box so that it automatically fits the content it contains? IE if there is a lot of content in the box it expands it’s height so all of it is displayed but the width stays the same as is set?
Many thanks
Richard
Hello,
please update the AJAX function with the NEWEST JQUERY (v1.6.4).
Its not working for my anymore…
THANKS FOR SHARING !!!!d
The mb.containerPlus plugin is working fine with the newest 1.6.4 version of jQuery.
take a look at the on line demo where the component takes the latest version: http://pupunzi.com/mb.components/mb.containerPlus/demo/demo.html
If you click on the “change content” button, the container will retrieve content via ajax and it works fine.
If it doesn’t work locally on your computer (read:http://pupunzi.open-lab.com/2011/04/24/jquery-1-5-2-ajax-module-and-local-files-issue/) than just add: dataType:”html” to the ajax call at line 598 or around. Anyway it should work on your web server.
Bye,
Matteo
FYI, in your download package, (2.5.1) when you open up the ajax demo page for some reason the ajax containers don’t actually load. I know it works on your demo page but not in the package after download. All other demos work fine, but the ajax one for some reason. I noticed this the last 2 times I downloaded the latest release.
Cory
Well this is normal if you are testing it locally with Chrome; it doesn’t allow ajax request from “file” origin:
Here is the error:
XMLHttpRequest cannot load file:///Users/pupunzi/DEV/jquery.mb.components/jquery.mb.containerPlus/demoAjax/ajax1.html?_=1318966782588. Origin null is not allowed by Access-Control-Allow-Origin.
But if you run the page under a web server it works.
Bye,
M
WOW, I found something else too, onLoad fails too. This in ajax methods causes document.containers[o.attr('id')]=1 to NOT Populate.
This happens for the same reason: you are testing the component locally with Chrome…
Bye,
M
Hello Mateo
I have most things working that I need, however I am having trouble with the resize handles. I have noticed that you have set something to resolve a conflict, however I am unsure as to what I should specify in the container div in order to set the handles.
I noticed that if i set the handles in the normal way without setting the container to ‘draggable’ the handles work, but as soon as I put draggable in, the handles revert to the default options of s,e,se.
could you please help me in setting the handles.
Also, I would like to set the re-positioning of the container when it is resized so that the top of the container is always shown. Ie, moving the container down if the top is out of view rather than moving the container up if the bottom is obscured as happens currently. I’m sure that the way to do this is in the ‘adjastPos’ function in the script but I am not sure which part of that bit of script relates to this issue.
Many thanks, and well done on all the good work!
also, if you would like to view my use of your container let me know and I shall send a link
Many thanks
Richard
Hi Matteo! This is Cory, the internet Desktop developer. I Found something you may want to know about. 2 Callbacks are NULL when trying to execute in mbContainers
onResize & onDrag
You have….
if(opt.onDrag) opt.onDrag($(this));I replaced it with…
if(this.options.onDrag) this.options.onDrag($(this),container.css("left"),container.css("top"));Thus causing the callback to work as follows…
onDrag : function(o,x,y) { ... }And then onResize you have….
if(opt.onResize) opt.onResize(container);I replaced with…
if(this.options.onResize) this.options.onResize(container,container.css('width'),container.css('height'));Thus callback is….
onResize : function(o,w,h){ ... }Anyway, even if you don;t like my suggestions it doesnt matter, what matters is really that the callback currently dont actually work. BTW, all other callbacks do work fine FYI
Also… I added one callback people might like. Considering I am writing the mbContainer Ajax plugin I discovered thee was one callback missing. And that is an onMaximize.
if (container.hasClass("resizable")) container.resizable("enable");
container.attr("collapsed","false");
container.find(".collapsedContainer:first").attr("src",opt.elementsPath+container.attr('skin')+"/min.png");
container.find(".mbcontainercontent:first").css("overflow","auto");
// --> ADDED onMaximize Callback
if (opt.onMaximize) opt.onMaximize(container); // <---- HERE MATTEO
}
if (container.attr("rememberMe")) container.mb_setCookie("collapsed",container.mb_getState("collapsed"));
});
};
jQuery.fn.containerIconize = function (opt,runCallback){
var container=$(this);
if (typeof runCallback=="undefined") runCallback=true;
if (!opt) opt=container.attr("options");
When ajaxing states of mbContainers to MySQL you kinda need to know the action after an UNCOLLAPSE state for when needing to remember width and height info.
Added this too
Hi Cory,
Thnx for the bug fix!
I’m going to publish an update with your fix as soon as possible.
Bye,
M
Cool, I also added for ajax memory/database purposes… onCenter callback
jQuery.fn.mb_centerOnWindow=function(anim){
var container=$(this);
var opt= container.get(0).options;
var nww=$(window).width();
var nwh=$(window).height();
var ow = container.outerWidth();
var oh = container.outerHeight();
var l= (nww-ow)/2;
var t= ((nwh-oh)/2)>0?(nwh-oh)/2:10;
if (container.css("position")!="fixed"){
$(this).css("position","absolute");
l=l+$(window).scrollLeft();
t=t+$(window).scrollTop();
}
if (anim)
container.animate({top:t,left:l},300,function(){
if (container.attr("rememberMe")){
container.mb_setCookie("x",$(this).css("left"));
container.mb_setCookie("y",$(this).css("top"));
}
});
else{
container.css({top:t,left:l});
if (container.attr("rememberMe")){
container.mb_setCookie("x",$(this).css("left"));
container.mb_setCookie("y",$(this).css("top"));
}
}
container.attr("t",t);
container.attr("l",l);
// Execute onDrag when container is centered. Delay to wait for container to quit moving.
jQuery.doTimeout('ondragcenter',500,function(){
if(opt.onCenter) opt.onCenter(container.attr('id'),container.css("left"),container.css("top"));
//alert(opt.onDrag);
});
return container;
};
NOTICE that I am using the jQuery.doTimeout() plugin. (With a 500 microsecond delay) This allows the container to finish centering on window before executing the ajax call. Otherwise, javascript being javascript gets the css positions half way through the animation and save the wrong data.
//var ow=container.attr("w")?container.attr("w"):container.outerWidth();
//var oh= container.attr("h")?container.attr("h"):container.outerHeight();
I also ran into trouble with the 2 lines above, they were reporting NULL so they have been replaced as you may have already noticed in the function above.
Cory
P.S.
The AJAX plugin is taking longer than expected because I forgot that my AJAX routines are written using a ghosted hacker user prevention method and is quite complicated. What I will have to do is when I am done with my working model, I will break it down into a more simplified plugin for MT release.
I am having a problem with dragging. Quite often when I click on a header to drag, it does not let go. Sometimes a simple double click lets it go, but quite often it doesn’t. It’s like every 5 containers a drag one gets stuck. I have no idea what is causing it yet, but figured I would share this issue with you to see if you have run into this before? Any idea what can be causing this?
Cory
more about my stuck container post….
I think I already figured it out… when jQuery is trying to fire the ajax calls it is trying to process the drag all at the same time. Placing a delay on the callbacks seams to have solved it. Any feed back on this?
Ciao Matteo,
ho incontrato il tuo blog per caso perchè stavo girovagando tra i tutorial di Jquery e ti volevo fare i complimenti , bel lavoro davvero!
Io abito a San Casciano Val di Pesa quindi siamo anche vicini.
Ciao e grazie
Fabrizio
Matteo thanks again for the great work! I have a question relating to container overflow in IE. I am using an Ajax call to return data into a container, if the text returned is greater than the container height it is contained neatly in the container with a scroll bar, this is true for FireFox but not IE. In IE, the contents expand outside the container, they have a scroll bar but it is half in and half out of the container and looks terrible. Please could you provide me with a solution or guide me as to how I would go about fixing this issue. many thanks – John
Hi John,
Which version of IE?
Matteo, thanks for your prompt response, I am using IE8, I have added some style parameters style=’overflow: auto; width: 100%; height: 100%;’ to the div I have included in your container this is the DIV that receives the Ajax return. This solution seems to be a little temperamental in that every now and then when you drag the container you can see IE attempting to add another scroll bar then remove it, my solution doesn’t appear to be a very clean one and I am thinking it might be in conflict with a scroll you have already in place for your container but I might be wrong. Thank you – John.
Hi John,
I just made some tests on IE8 running containers with long texts but I can’t replicate your behaviour. If I load a long content into a container with a fixed height the container overflow works fine for me…
Do you have a public URL where to see the behaviour?
Bye,
Matteo
Matteo, thank you for attempting to help me, I was running some older jquery source files. Since I have updated these with 2.6.0 it is working really well. I really like the simplified div containers in the latest version and the functions you have provided allow access to pretty much any component. Excellent work! and thank you for making this available. Thank you – John
I’m newbie in Jquery.
1. How I can I change the title to a window that was already created?
2. How I can get a reference to a window? This does not work for me:
var myWin = $(‘#w’+id).buildContainers({ … })
Thanks. Goog job