Guide on creating a square within an element using JavaScript

Question

Guide on creating a square within an element using JavaScript

After conducting thorough research, I find myself unsure of the best course of action. My situation involves a Kendo Grid (table) with 3 rows and 3 columns. Initially, the table displays only the first column, populated upon the page's initial load. Subsequently, an AJAX method is triggered to fetch additional data, replacing the entire table with new HTML.

----------------
| 01 |    |    |
| 02 |    |    |
| 03 |    |    |
----------------

The replaced HTML results in a table structure like this:

----------------
| 01 | hi | gr |
| 02 | hi | sd |
| 03 | fe | sf |
----------------

My goal now is to somehow overlay a square onto the empty columns within the initially incomplete table (with only the first column populated), allowing me to center a message within this square.

What approach do you suggest for achieving this task effectively?

javascript html css asp.net kendo-ui

Answer 1

Answer №1

Here is an example of what you are searching for. There seems to be a 2px error due to the cell's border spacing or some other issue, but I am too fatigued to find a solution at this moment. The height of your div is determined by the sum of the padding-top and height. The padding is necessary to vertically center your loading text.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #mytable{
            position: absolute;
            border: 1px solid black;
            width: 20%;
            width: 100px;
            height: 100px;

}
        #box{
            padding-top: 40px;
            text-align: center;
            position: absolute;
            margin: 0px;
            z-index: 40;
            border: 1px solid blue;
            width: 100px;
            height: 60px;
        }

    </style>
</head>
<body>
    <table id="mytable">
        <tr>
            <td>Cat</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Dog</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Parrot</td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div id="box">
        Loading...
    </div>
</body>
</html>

Answer 2

Here is an example of what you are searching for. There seems to be a 2px error due to the cell's border spacing or some other issue, but I am too fatigued to find a solution at this moment. The height of your div is determined by the sum of the padding-top and height. The padding is necessary to vertically center your loading text.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #mytable{
            position: absolute;
            border: 1px solid black;
            width: 20%;
            width: 100px;
            height: 100px;

}
        #box{
            padding-top: 40px;
            text-align: center;
            position: absolute;
            margin: 0px;
            z-index: 40;
            border: 1px solid blue;
            width: 100px;
            height: 60px;
        }

    </style>
</head>
<body>
    <table id="mytable">
        <tr>
            <td>Cat</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Dog</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Parrot</td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div id="box">
        Loading...
    </div>
</body>
</html>

Answer 3

Answer №2

To style the table as it loads, apply the loading class and adjust with CSS. Once the AJAX call completes with done(), remove the loading class.

While this example uses jQuery, feel free to adapt for Kendo as needed.

var table = $('#table');

table.addClass('loading');
$.ajax(ajaxOptions).done(function(){
    table.removeClass('loading');
});

In your CSS, experiment with a semi-transparent background-color like rgba(238, 238, 238, 0.4) or incorporate an ajax loader.

table { position: relative; }
table.loading:before {
    width: 100%;
    height: 100%;
    content: 'loading';
    background-color: rgba(234,234,234,0.4);
    padding: 70%;
    box-sizing: border-box;
    position: absolute;
    text-align: center;
}

Using :before creates a hidden overlay on the table visible only when loading. Remove it once the AJAX is done().

For vertical alignment, consider adding a second hidden layer :after due to limitations with text-align.

Check out the DEMO here!

Answer 4

To style the table as it loads, apply the loading class and adjust with CSS. Once the AJAX call completes with done(), remove the loading class.

While this example uses jQuery, feel free to adapt for Kendo as needed.

var table = $('#table');

table.addClass('loading');
$.ajax(ajaxOptions).done(function(){
    table.removeClass('loading');
});

In your CSS, experiment with a semi-transparent background-color like rgba(238, 238, 238, 0.4) or incorporate an ajax loader.

table { position: relative; }
table.loading:before {
    width: 100%;
    height: 100%;
    content: 'loading';
    background-color: rgba(234,234,234,0.4);
    padding: 70%;
    box-sizing: border-box;
    position: absolute;
    text-align: center;
}

Using :before creates a hidden overlay on the table visible only when loading. Remove it once the AJAX is done().

For vertical alignment, consider adding a second hidden layer :after due to limitations with text-align.

Check out the DEMO here!

Guide on creating a square within an element using JavaScript

Answer №1

Answer №2

Similar questions

Incorporate Material Design Lite and AMP into your Angular 5 project for a sleek

Is it possible to consolidate geometry in each frame during the rendering process using three.js?

Click on a row in ReactTable to toggle the background color or expand the row

How can you determine the dimensions of an image in HTML using Python?

Clicking on a single checkbox causes the entire input to become deactivated due to the way the system is

What is the method for defining the current date variable within a .json object?

Guide to using Ajax to send a form and receive text in response

Validate and submit form using mootools when a link is clicked

Organization and Naming Standards for Projects

Real-time webpage featuring dynamically updating text sourced from a file

Creating a jQuery-powered dynamic select field in Rails 3

Combining JSON parameter and multipart/form-data file in a single request using Vue.js

Tips for opening a variety of links in new tabs with unique popup buttons

Guide to showcasing associated information in HTML using Angular 7

Issue with updating the vertices in three.js EdgesGeometry is causing the Line Segments to not be updated as expected

Updating databases with the click of a checkbox

Determine whether I am verified or if the XMLHttpRequest has been directed

When using jQuery's .each method, only the final JavaScript object element is added to the divs

Identifying duplicate values in an array of objects using JavaScript

Set up Vue.prototype prior to the component loading