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

Issue encountered while trying to display images next to each other using only HTML and CSS

Changing the value of a previous TD element using Javascript

What is the best way to configure my AngularJS routing for managing URL rewriting and page reloads effectively?

Footer void of color

tips for dynamically highlighting search bar after choosing a different dropdown option - vuejs

Explore the possibilities of using a unique custom theme with next.js, less, and ant design

The navigation bar is obscuring the header on my website

Encountering the error "fn.dataTable.moment is not a function" when trying to use momentjs with DataTables in Angular

Stop the execution of the setTimeout function when the webpage loads in JavaScript

Inadequate termination of the while loop

Utilizing visual representations for "symbol" within eCharts4r

What is the best way to update the background color for specific days in fullcalendar?

Checkbox remains selected even after the list has been updated

I must arrange each item in a column vertically, regardless of whether they could align horizontally

Tips for identifying the most effective element locator in the DOM with Playwright

What is the best way to align content in the center when its parent element has a position property

After refreshing the page, the jQuery AJAX item becomes unclickable

Updating divs automatically using Ajax without refreshing the page is not functioning as intended

Linking two div elements together with a circular connector at the termination point of the line

Showing a cell border when a radio button is chosen