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
– Fabrizio Calderan, Commented Jul 23, 2015 at 9:58
possible duplicate of Setting DIV width and height in JavaScript — Chaitanya Gadkari
– Chaitanya Gadkari, Commented Jul 23, 2015 at 9:58

Pete · Accepted Answer · 2015-07-23 10:04:31Z

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') }

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.
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: jsfiddle.net/5ojjbwms/8
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?
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

Matteo Rubini · Accepted Answer · 2015-07-23 10:05:40Z

1

Probably

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

answered Jul 23, 2015 at 10:05

Matteo Rubini

8215 silver badges9 bronze badges

Comments

Shrinivas Pai · Accepted Answer · 2015-07-23 10:07:45Z

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/

Collectives™ on Stack Overflow

Changing Height and Width of Div via Jquery

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related