Modifying Div Size with Jquery

Question

Modifying Div Size with Jquery

I am working on populating the div container with square boxes, but I'm having trouble adjusting the size of my #gridSquare div. Despite trying to change its height and width using jQuery, it doesn't seem to work as expected.

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

You can find the fiddle containing the rest of my code linked below for reference.

Thank you for taking the time to review this!

Fiddle

My ultimate goal is to utilize the squareSide variable to dynamically set the height and width of the squares.

javascript jquery html css

Answer 1

Answer №1

To ensure proper functionality, utilize a class instead of an id (ids should be unique). Modify the CSS of the square after appending it to the 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>

Consider updating your for loop like so:

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

Answer 2

To ensure proper functionality, utilize a class instead of an id (ids should be unique). Modify the CSS of the square after appending it to the 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>

Consider updating your for loop like so:

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

Answer 3

Answer №2

Most likely

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

Answer 4

Most likely

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

Answer 5

Answer №3

Instead of using an id, opt for a class.

Include the following code snippet:

$(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');
    });

});

Check out the Fiddle here: http://jsfiddle.net/5ojjbwms/6/

Answer 6

Instead of using an id, opt for a class.

Include the following code snippet:

$(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');
    });

});

Check out the Fiddle here: http://jsfiddle.net/5ojjbwms/6/

Modifying Div Size with Jquery

Answer №1

Answer №2

Answer №3

Similar questions

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Having trouble locating an external Javascript file in a Node.JS/Express app with Jade template?

A layout featuring two columns: the right column has a fixed width, while the left column is fluid

Fill out FormBuilder using data from a service within Angular2

What is the best way to trigger a jQuery UI dialog using an AJAX request?

Attempting to extract decibel levels from an audio file using JavaScript

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

A pair of demands within an express service

Vue.JS and its Onclick event handler allows for dynamic and interactive

Optimize Date Formatting within a React Application Using Material UI Data Grid

I'm struggling to figure out why the CSS isn't working properly

Master the art of JQuery alongside building CakePHP projects with this essential guide

How to Restrict Selections to Background Events in FullCalendar.js?

My JavaScript/jQuery code isn't functioning properly - is there a restriction on the number of api calls that can be made on

Submitting a form within AJAX-powered tabs (using the Twitter Bootstrap framework)

Click the "Add to Cart" button to make a purchase

Activate the datepicker in Angular by clicking on the input field

Finding the label that is linked to the current DIV or textarea by its "for" property

Enhancing my code by implementing various conditions in React

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive