CODEWITHSUNDEEP
jquerydomobject
holyredbeard
holyredbeard

Reputation: 21178

Create several div boxes with jQuery

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();

Upvotes: 0

Views: 94

Answers (3)

kubetz
kubetz

Reputation: 8556

  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.

Upvotes: 1

sgcharlie
sgcharlie

Reputation: 1036

(1) You should probably remove the ID attribute. If you need to reference the ID in some way, generate it from scratch instead of using a hard coded values by doing something like this:

function generateId(){
    var count = 0;
    while(document.getElementById(id = 'anonymous_element_' + (count++))){}
    return id;
}

(2) Certainly, the easiest solution would be to position the divs absolutely (position:absolute) and keep track of where the other divs are positioned as to not overlap them. That sounds like more work than I'd like to do though.

Upvotes: 0

Givius
Givius

Reputation: 1008

(2) I will do it this way:

.mybox{
   padding-top: 10px;
   padding-left: 10px;
}
<script>
    var myHtml = '<div class="mybox"><a class="iconAction">icon</a></div>";
    $('body').append(myHtml);
    $('body').on('click', 'a.iconAction',function(event){
       $(this).parent().append(myHtml)
    })
</script>

Upvotes: 0

Related Questions