Ask questions and get good answers on mb.jQuery.components

Question

Firstly, great plugin. Excellent work.

Anyway, i have a question:

I have a page that contains a menu. Clicking on a menu item, i want to open a new container.

My menu is called #left.

here is my javascript:

$('#left').click(function() {

$(".containerPlus").buildContainers({
            containment:"#right",
            elementsPath:"elements/",
            onClose:function(o){},
            onIconize:function(o){},
            effectDuration:200
          });

new_div = "<div class=\"containerPlus draggable resizable {buttons:'i,c', icon:'browser.png', skin:'white', width:'500',iconized:'false', dock:'dock', rememberMe:true, title:'My container title'}\" style=\"top:100px;left:400px\">[your content]</div>";

$("#right").append(new_div);

});

If i click on the menu #left the first time. Nothing happens. Then with every subsequent click, a new container div opens (which is what i want), but how do i get it open on the first click?

I am assuming i have to initialise and "buildContainers" first. I have tried to do this using the jquery:

$(document).ready(function(){
    $(".containerPlus").buildContainers({
            containment:"#right",
            elementsPath:"elements/",
            onClose:function(o){},
            onIconize:function(o){},
            effectDuration:200
          });

});

but it does not work.

Can someone please help me out???

thanks

Answer 1

0	i have solved it myself. Just change the order of the .append to above the buildContainers thats it. answered Jul 21 '10 at 02:18 Samuel 11●1

Answer 2

Hi, it happens because you are initializing the container before it is written in the page; You can either insert the container before the init:

$('#left').click(function() {

new_div = "<div class=\"containerPlus draggable resizable {buttons:'i,c', icon:'browser.png', skin:'white', width:'500',iconized:'false', dock:'dock', rememberMe:true, title:'My container title'}\" style=\"top:100px;left:400px\">[your content]</div>";

$("#right").append(new_div);

$(".containerPlus").buildContainers({
            containment:"#right",
            elementsPath:"elements/",
            onClose:function(o){},
            onIconize:function(o){},
            effectDuration:200
          });    
    });

or create and init your container as closed on page load and use the mb_open() method on click event:

HTML:

<div id="myContainer" class=\"containerPlus draggable resizable {buttons:'i,c', icon:'browser.png', skin:'white', width:'500',closed:true, iconized:'false', dock:'dock', rememberMe:true, title:'My container title'}\" style=\"top:100px;left:400px\">[your content]</div>

JAVASCRIPT:

      $(function(){
         $("#myContainer").buildContainers({
                    containment:"#right",
                    elementsPath:"elements/",
                    onClose:function(o){},
                    onIconize:function(o){},
                    effectDuration:200
                  }); 
         $('#left').click(function() {$("#myContainer").mb_open();});
      })

Bye, Matteo

Ask questions and get good answers on mb.jQuery.components

Create new container from a menu - mb.ContainerPlus

Follow this question

pupunzi.com

pupunzi's blog

Other products:

Related questions