Changing Height and Width of Div via Jquery

Question

I'm trying to fill the div container with square boxes. Why doesn't this line work? I can't seem to change the height and width of my div #gridSquare.

$('#gridSquare').css({"height": "38.4", "width": "38.4"});

I'm linking the fiddle with the rest of my code.

Thank you for reading!

Fiddle

What I ultimately want to do is use the squareSide variable to set the hight and width.

you should specify a unit for height and width. And when you change the size of the element, it doesn't exist yet — Fabrizio Calderan, Jul 23 '15 at 09:58
possible duplicate of [Setting DIV width and height in JavaScript](http://stackoverflow.com/questions/10118172/setting-div-width-and-height-in-javascript) — Chaitanya Gadkari, Jul 23 '15 at 09:58

score 2 · Accepted Answer · answered Jul 23 '15 at 10:04

2

You need to use a class instead of an id (ids should be unique) and then you want to set the css of the square after you have appended to squares:

var squareSide = 960 / 25;

console.log(squareSide);

for (var rows = 0; rows < 25; rows++) {
  $('<div class="gridSquare"></div>').appendTo('.container')
  for (var cols = 0; cols < 25; cols++) {
    $('<div class="gridSquare"></div>').appendTo('.container')
  }
}

$('.container').on('mouseenter', '.gridSquare', function() {
  $(this).css('background-color', 'white');
});

$('.gridSquare').css({
  "height": "38.4",
  "width": "38.4"
});

.container{
 background-color: grey;
 margin: 0 auto;
 text-align: center;
 font-size: 0;
 margin-bottom: 30px;
 width: 960px;
 height: 960px;
}

.gridSquare{
 background-color: black;
 display: inline-block;
 vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Also your for loop can be changed to

// 625 = 25 * 25
for (var i = 0; i < 625; i++) {
    $('<div class="gridSquare"></div>').appendTo('.container')
}

answered Jul 23 '15 at 10:04

Pete

57,112
28
117
166

Do I have to wait till after to add CSS because the elemnts have to created before they can be modified by CSS? Thank you, btw. – hackrnaut Jul 23 '15 at 10:17
1

Yeah, the elements do not exist so when you do a selector on them, the selector will return 0 elements. I have created a new fiddle for you so you can just set the number of squares you want in a row and it will do everything else automatically: http://jsfiddle.net/5ojjbwms/8/ – Pete Jul 23 '15 at 10:23
Ohh, cool! Thanks for teaching me new tricks. I'm seeing how you made the code more efficient and more readable in general. Quick question though: is it always better to have one loop than have a nested loop? Even in the case when both loops will have the same limitations? Can you explain this to me a bit? – hackrnaut Jul 23 '15 at 11:22
1

if the inner loop is just going to the same thing then I would just have one loop - easier to maintain in future as you would only have to change one section of code rather than 2 – Pete Jul 23 '15 at 11:28

score 1 · Answer 2 · answered Jul 23 '15 at 10:05

1

Probably

$('#gridSquare').css({"height": "38.4px", "width": "38.4px"});

answered Jul 23 '15 at 10:05

Matteo Rubini

831
5
9

score 1 · Answer 3 · answered Jul 23 '15 at 10:07

Use class instead of an id.

Add this.

$(document).ready(function(){
    var squareSide = 960/25;



    console.log(squareSide);

    for(var rows = 0; rows < 25; rows++){
    $('<div class="gridSquare"></div>').appendTo('.container')
        for(var cols = 0; cols < 25; cols++){
            $('<div class="gridSquare"></div>').appendTo('.container');
            $('.gridSquare').css({"height": "38.4", "width": "38.4"});
        }
    }

    $('.container').on('mouseenter', '.gridSquare', function(){
        $(this).css('background-color', 'white');
    });

});

Fiddle http://jsfiddle.net/5ojjbwms/6/

Changing Height and Width of Div via Jquery

3 Answers3