CODEWITHSUNDEEP
javascriptjquerycsshtml
Sparkz
Sparkz

Reputation: 83

Multiple div append and select with JavaScript

I have created multiple div boxes (under planning) using javascript here

for (i = 0; i < 168; i++) {
    var iDiv = document.createElement('div');
    iDiv.id = 'inc';
    document.getElementById('appointmentchart').appendChild(iDiv);
}

Now I need 2 more things to be done using JavaScript.

  1. On click inside any div inside planning assign class="yellow" to 3 consecutive div vertically (now the divs are arranged horizontally).

    Do I need to arrange div vertically for doing this? If so, how?

  2. Go to Practicien at left side, select Chirurgie -> DUPONT Marc and then select date 10-Mar-2014. You will see appointments visible at the Multiple planning div chart. Some of them come out of the container.

    How to move the overflowing section to the next div?

Is it possible to achieve the above-mentioned using JavaScript?

Upvotes: 0

Views: 419

Answers (2)

T J
T J

Reputation: 43156

first of all give different id's to the columns as follows:

for (i = 0; i < 168; i++) {
var iDiv = document.createElement('div');
iDiv.id = 'inc'+i; //different id
iDiv.addEventListener('click', clickFunction);// assign click handler
document.getElementById('appointmentchart').appendChild(iDiv);
}

assuming each row will always have 14 columns you can do

function clickFunction(){
 var num= parseInt(this.id.substring(3));
 for(var i=1;i<=3;i++){
  document.getElementById('inc'+num).className+= 'yellow'
  num+=14;
 }
}

Update : FIDDLE

Upvotes: 2

user2782001
user2782001

Reputation: 3488

the answer to your question 1) is:

Consecutive elements are judged by the order they appear in your HTML code, not based on where they end up on the screen. If your planning grid stays the same shape, always having the same number of divs in a row and column, it is pretty easy to get the ones you want.

var clickedDiv=//point this at the div you clicked on
//select the grid squares
var divs=document.getElementById('appointmentchart').getElementsByTagName('div');
//how many divs across your grid is
var cols=14; 

 for(var i=0;i<divs.length;i++){
  //find the clicked divs index
  if(clickedDiv=divs[i]){
    //make next three yellow
    for(var y=1;y<4;y++){
          var sqaure=cols*y;
          if(i+square<divs.length){
             divs[i+square].className='yellow';
          }
     }
    break;
 }
}

Upvotes: 0

Related Questions