CODEWITHSUNDEEP
javascriptjquery
Jasmine Batchellor-Sequeira
Jasmine Batchellor-Sequeira

Reputation: 53

Using Javascript/jQuery, how can I change the height/width of a div so there isn't any leftover space in the container div?

I'm attempting to make a basic Sketchpad using HTML/CSS/Javascript/jQuery. The grid itself has a set size to begin with, but when a button is clicked, the user is asked how big they want the grid/Sketchpad to be. When they enter the amount, a new grid is created. The project I'm completing says that the container div's height/width should not be changed, but the .square divs should change according to the input (e.g. if the user wants a 5 by 5 grid, the .square divs will change size according to the input). I've done this, but I've encountered two big problems:

1) There is usually leftover space in the container div, so one of the .square divs is much smaller than the rest, and

2) I don't know how to make sure the number of divs across and down are the same - 6 by 6, rather than, for example, 4 by 9.

Thank you!

Here is my code so far. Apologies in advance for if it's messy - I'm just beginning web development.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="jquery.js"></script>
    <script type="text/javascript" src="sketchpad.js"></script>
    <title>Sketchpad</title>
</head>
<body>
    <button id="clearGrid">Clear Grid</button>
    <div class="container">

    </div> <!-- container -->
<body>  
</html>

CSS

.container {
    height: 960px;
    width: 960px;
    font-size: 0px;
    margin: 150px auto;
}

#clearGrid {
    display: block;
    margin: 0 auto;

}

.square {
    border: 1px solid black;
    height: 20px;
    width: 20px;
    display: inline-block;
}

Javascript/jQuery

$(document).ready(function() {

var squareGrid = 256;

for (i = 0; i < squareGrid; i += 1) {
 $(".container").append('<div class="square"></div>');
}

squareGrid;

$(".square").hover(function() {
    $(this).css("background-color", "green");
}, function() {
    $(this).css("background-color", "green");
    });

$("#clearGrid").click(function() {
    $(".square").css("background-color", "");
    $(".square").remove(); //Removes current grid
    var input = prompt("How big do you want to make your Sketchpad? Enter a number.");
    if(isNaN(input))
        alert("Please enter a number.");

    else {
        $(".square").removeAttr("width");
        $(".square").removeAttr("height");
        for (l = 0; l < (input * input); l += 1) {
            $(".square").css("width", ".container" / input);
            $(".square").css("height", ".container" / input);
            $(".container").append('<div class="square"></div>');
        }
    };

    $(".square").hover(function() {
        $(this).css("background-color", "green");
    }, function() {
        $(this).css("background-color", "green");
    });

}); 
});

Upvotes: 2

Views: 548

Answers (1)

zer00ne
zer00ne

Reputation: 43910

jQuery

var w = $('.container').outerWidth();

var h = $('.container').outerHeight();

$('.square').outerWidth(w).outerHeight(h);

CSS

html {
    box-sizing: border-box;
    font: 500 16px/1.45 Consolas;
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

The simplest way to ensure how many squares you have in rows and columns is by using a table or using the display: table family of CSS properties. I prefer flexbox over table or floats.

Another Suggestion: Flexbox

Here's a DEMO I made for a previous question

Upvotes: 1

Related Questions