Question

I want to be able to create window like boxes by clicking on an icon. If I’ve created one and click again, another shall be created and so on. With my code I can create several boxes, but the inner-div only gets created in the first opened window. The reason for this is that if several boxes are created, the divs will have id’s, which of course isn’t the right way to do it.

I actually have to questions here:
1. How can I change my code so I can create several boxes with inner-divs?
2. What is the best way to do if I want I want a box that gets created to overlap the last created one, but moved 10 px right and 10 px down?

Thanks!

The code:

PROGRAM.popup = function(width, height){
    this.width = width;
    this.height = height;
}

PROGRAM.popup.prototype.buildPopup = function(){

$('<div/>', {
    id: 'window',
    width: this.width,
    height: this.height,
}).appendTo('#container');

$('<div/>', {
    id: 'windowTop',
    width: this.width,
}).appendTo('#window');
}

…

var popup = new PROGRAM.popup(300, 300);
popup.buildWindow();

var popup2 = new PROGRAM.popup(300, 300);
popup2.buildWindow();

Answer 1

1. You can remove the window ID and use it as a class for styling. You can save the reference to the window div directly into variable and use it in appendTo().

2. Retrieve previous window div and get his position using offset(). Then set own offset based on those values.

JavaScript:

PROGRAM.popup = function(width, height){
    this.width = width;
    this.height = height;
};

PROGRAM.popup.prototype.buildPopup = function(){

  // save reference to the created div
  // this way we don't have to look for it in DOM
  var win = $('<div/>', {
    'class': 'window',
    'width': this.width,
    'height': this.height
  }).appendTo('#container');

  // try to retrieve previous closest sibling with class "window"
  var prev = win.prev('.window');
  // if it exists then get his position and set our based on it
  if (prev.length) {
    win.offset({ 
      left: prev.offset().left + 10, 
      top:  prev.offset().top + 10 });
  }

  // nothing changed here
  $('<div/>', {
    'class': 'inner',
    'width': this.width
  }).appendTo(win);

};   

HERE is the code.