Tips for styling an inline list using CSS before revealing it with jQuery's .show method:

Question

Tips for styling an inline list using CSS before revealing it with jQuery's .show method:

In my project, I want to display a row of 'cells' which are simply images of black or white squares based on their ID. The issue I am facing is that when the button is clicked, the row list is shown without the CSS applied, and then after a brief delay, the CSS is applied and it displays correctly. Is there a way to reverse this process so that the CSS is applied first and then the table is shown to the user?

CSS

    ol, li { display: inline; margin: 0 0 0 0; padding: 0 0 0 0; list-style: none; }
    img { margin: 0 0 0 0; padding: 0 0 0 0; }

Jquery

            $('#generateTbl').hide();
        $('#generateBtn').click(function () {
                showCellConfiguration();
        });

        var showCellConfiguration = function () {
            loadCells($('#numOfCells').val());
            $('#generateTbl').show('slow', function () { });
        }

        var loadCells = function (numOfCells) {
            for (var i = 0; i < numOfCells; i++) {
                $("#row").append('<li><img id="cellOff" class="buttons" src="off.jpg" /></li>');
            }
        }

HTML

<table id='generateTbl'>
    <tr><td><ol id="row"></ol></td></tr>
</table>

jquery html css

Answer 1

Answer №1

function createCells(numOfCells) {
            for (var i = 0; i < numOfCells; i++) {
                var cell = $('<li><img id="cellOff" class="buttons" src="off.jpg" /></li>');
                cell.ready(function() {
                    $("#row").append($(this));
                });

            }
        }

let's see if this function works

Answer 2

function createCells(numOfCells) {
            for (var i = 0; i < numOfCells; i++) {
                var cell = $('<li><img id="cellOff" class="buttons" src="off.jpg" /></li>');
                cell.ready(function() {
                    $("#row").append($(this));
                });

            }
        }

let's see if this function works

Answer 3

Answer №2

One possible solution, albeit slightly unconventional, is to manipulate the position of the new DOM element off-screen temporarily before inserting it:

var preloadItems = function (quantity) {
    for (var i = 0; i < quantity; i++) {
        var newItem = $('<li><img id="itemOffScreen" class="buttons" src="off.jpg" /></li>');

        // Position the element off-screen
        newItem.css({ 
            position: absolute,
            left: -9999
        });

        $("#container").append(newItem);

        // Move the element back onto the screen after 
        newItem.css({
           position: auto
        });
    }
}

To enhance this approach, consider adding a delay before moving the element back into view:

$("#container").append(newItem);

// Wait for 200ms before repositioning the element   
window.setTimeout(function() {
    newItem.css({
        position: auto
    });
}, 200);

Answer 4

One possible solution, albeit slightly unconventional, is to manipulate the position of the new DOM element off-screen temporarily before inserting it:

var preloadItems = function (quantity) {
    for (var i = 0; i < quantity; i++) {
        var newItem = $('<li><img id="itemOffScreen" class="buttons" src="off.jpg" /></li>');

        // Position the element off-screen
        newItem.css({ 
            position: absolute,
            left: -9999
        });

        $("#container").append(newItem);

        // Move the element back onto the screen after 
        newItem.css({
           position: auto
        });
    }
}

To enhance this approach, consider adding a delay before moving the element back into view:

$("#container").append(newItem);

// Wait for 200ms before repositioning the element   
window.setTimeout(function() {
    newItem.css({
        position: auto
    });
}, 200);

Tips for styling an inline list using CSS before revealing it with jQuery's .show method:

Answer №1

Answer №2

Similar questions

What's the significance of the #/ symbol in a URL?

Steps to update the action attribute in a form element upon clicking a button

Some devices experiencing website update issues while others are successful

Operating my application on a 2G network

Difficulty arises when trying to extract specific information from an ajax response using the jQuery.filter

Creating a dynamic webpage where multiple images are displayed on a single canvas using

Leveraging Django's JSONResponseMixin for handling AJAX responses

How can I modify the style of a cell in jqgrid when the mouse hovers over it?

Breaking down a jQuery array into separate JSON objects

Need to return false even though Jquery form check currently returns true

Thymeleaf is responsible for fetching the static resources by referencing the REST URI

Guidelines for transmitting form information to a web API using Angular

Is there a way to determine if jQuery Mobile has already been loaded?

Sending data using jQuery to a web API

Utilizing JQuery to extract the image title and render it as HTML code

Rotating SVG images with ease at any center point

Error occurred while retrieving JSON array using Jquery

developing both vertical and horizontal 'cross out'

Is there a way to resize SVG images without having to modify the underlying source code?

Is it necessary to have the WAI-ARIA attribute aria-labelledby on a nested input element?