CODEWITHSUNDEEP
javascriptjquery
Namone
Namone

Reputation: 121

Why is my program creating a 10x9 grid instead of a 10x10 grid?

My code works from a functionality standpoint. I want to create a "drawing pad" in that it creates a grid of small 'divs' that change color when the mouse goes over them. The 'divs' change color - but I don't understand why it is creating a 10 x 9 grid instead of a 10 x 10 grid? 

// When the document is ready...
$(document).ready(function() {
  // Do some things...
  newGrid(10); // create a new 10 x 10 grid
  $(".block").hover(function() {
    $(this).css('background-color', 'white');
  });
});

function newGrid(gridNum) {
  var maxDivs = gridNum * gridNum;
  var currentDivNum = 1; // Current number of divs; will have 100 total by default

  while (currentDivNum <= maxDivs) {
    // While the current div number is less than max divs...
    div = document.createElement('div');
    div.className = 'block'; // set the class name of the divisions
    document.body.style.backgroundColor = 'red';
    if (currentDivNum % gridNum == 0) { 
      div.style.float = 'clear';
      div.style.backgroundColor = '#000000';
    } else {
      div.style.float = 'left';
      div.style.backgroundColor = '#000000';
    }
    div.style.width = '25px';
    div.style.height = '25px';

    document.getElementById('divContainer').appendChild(div);

    currentDivNum++;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divContainer"></div>

Upvotes: 5

Views: 502

Answers (5)

yas
yas

Reputation: 3620

Following is not valid:

 div.sytle.float = 'clear';

See working JSFiddle that corrects the problem: https://jsfiddle.net/cwpxy8dv/

The solution is to keep all items floating left, and go to the next row by applying clear left for every tenth item.

Key part of the solution is the following snippet:

div.style.float = 'left'; // set for all grid divs
if ( (currentDivNum-1) % gridNum == 0) { // use currentDivNum-1 since it starts at 1
  div.style.clear = 'left';  // clear to next row
}

Upvotes: 4

Thiago
Thiago

Reputation: 160

I've done some changes, so far I've changed the counter, now start at 0.

clear isn't a value of css property, it's the property itself like:

.myclass {
 clear: left;
}

Here is the working code:

// When the document is ready...
$(document).ready(function() {
    // create a new 10 x 10 grid
    newGrid(10); 

    $(".block").hover(function() {
        $(this).css('background-color', 'white');
    });
});

function newGrid(gridNum) {
    var maxDivs = gridNum * gridNum;

    // Current number of divs will have 100 total by default
    var currentDivNum = 0; 

    while (currentDivNum < maxDivs) {
        // While the current div number is less than max divs...
        div = document.createElement('div');

        // set the class name of the divisions
        div.className = 'block'; 

        // Set background color
        document.body.style.backgroundColor = 'red';
        div.style.float = 'left';

        div.style.backgroundColor = '#000000';

        if ((currentDivNum % gridNum) == 0)
            div.style.clear = 'left';

        div.style.width = div.style.height = '25px';

        document.getElementById('divContainer').appendChild(div);

        currentDivNum++;
    }
}

Here is a working sample

Upvotes: 0

vinayakj
vinayakj

Reputation: 5681

No need to use if and else and cause the performance down if divs are large in number. Use below code with fixes applied and for performance.

$(document).ready(function() {
    // Do some things...
    newGrid(10); // create a new 10 x 10 grid
    $(".block").hover(function() {
       $(this).css('background-color', 'white');
    });
});

function newGrid(gridNum) {
    var maxDivs = gridNum * gridNum;
    var currentDivNum = 1; // Current number of divs; will have 100 total by default
    var divWidth = 25;
    var divHeight = 25;
    var container =  document.getElementById('divContainer');
    container.style.width = (divWidth * gridNum)+'px';
  
    while (currentDivNum <= maxDivs) {
        // While the current div number is less than max divs...
        div = document.createElement('div');
        div.className = 'block'; // set the class name of the divisions
        document.body.style.backgroundColor = 'red';
    
        div.style.float = 'left';
        div.style.backgroundColor = '#000';
        div.style.width = divWidth+'px';
        div.style.height = divHeight+'px';
  
        div.style.color = '#fff';
        div.innerHTML = currentDivNum;
       
        container.appendChild(div);     

        currentDivNum++;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContainer"></div>

Upvotes: 0

KAD
KAD

Reputation: 11122

Find this working example, just insert a clear div after each 10:

// When the document is ready...
$(document).ready(function() {
// Do some things...
newGrid(10); // create a new 10 x 10 grid
    $(".block").hover(function() {
       $(this).css('background-color', 'white');
    });
});

function newGrid(gridNum) {

var maxDivs = gridNum * gridNum;
var currentDivNum = 1; // Current number of divs; will have 100 total by default

while (currentDivNum <= maxDivs) {
    // While the current div number is less than max divs...

    div = document.createElement('div');
    div.className = 'block'; // set the class name of the divisions
    document.body.style.backgroundColor = 'red';
  
    div.style.float = 'left';
    div.style.backgroundColor = '#000000';
  
    div.style.width = '25px';
    div.style.height = '25px';

    document.getElementById('divContainer').appendChild(div);
  
    if (currentDivNum % gridNum == 0) { 
      clearDiv = document.createElement('div');
      clearDiv.style.clear = 'both';
      
      document.getElementById('divContainer').appendChild(clearDiv);

    } 
  

    currentDivNum++;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContainer"></div>

Explanation

div.style.float = 'clear'; is not valid, since float does not take clear as a value, so what you really need is to enter a div where it clears the float for both left and right i.e Both and this is added after each X divs :

if (currentDivNum % gridNum == 0) { 
          clearDiv = document.createElement('div');
          clearDiv.style.clear = 'both';

          document.getElementById('divContainer').appendChild(clearDiv);

        }

Apart of that, the code enters divs in a normal manner..

Upvotes: 12

marizikmund
marizikmund

Reputation: 408

You need to make two changes in your code:

while (currentDivNum < maxDivs) {

and

if (currentDivNum % (gridNum+1) == 0) {

The reason your problem occured was that at every tenth square, CSS code clear:both; was added, which meant that it started on a new line. My improvement has given this feature to every eleventh square which is what you needed.

In addition to that, it was necessary to remove one last square, which would appear on the last (new) line. That's why the while part is also updated.

Upvotes: 0

Related Questions