Hiding the container element with "Display: none" disrupts the jQuery calculation of absolute positioning for child elements

Question

Hiding the container element with "Display: none" disrupts the jQuery calculation of absolute positioning for child elements

HTML:

<a href="" id="show_link">Show</a><div id="container">
<form class="form">
    <a href="" class="align_middle">Link1</a>
</form>
<form class="form">
    <a href="" class="align_middle">Link2</a>
</form>
<form class="form">
    <a href="" class="align_middle">Link3</a>
</form>

Javascript:

var align_elements = function(item) {

    var paddingValue = 20;

    $(item).css("position", "static");
    $(item).css("float", "left");
    $(item).css("width", "auto");

    var elementWidth = $(item).width();
    var parentElementWidth = $(item).parent().width();

    elementWidth = Math.min(elementWidth, parentElementWidth - paddingValue*2);
    $(item).css("width", elementWidth);

    var elementHeight = $(item).height();
    var parentElementHeight = $(item).parent().height();
    var topPosition = (parentElementHeight - elementHeight)/2;
    var leftPosition = (parentElementWidth - elementWidth)/2;

    $(item).css("position", "absolute");
    $(item).css("left", leftPosition + "px");
    $(item).css("top", topPosition + "px");

    $(item).css("float", "");
};

$(document).ready(function(){

    var allElements = $(".align_middle");

    $.each(allElements, function(index,value){
            align_elements(value);
    });

    $(allElements).bind("DOMNodeInserted",function(){
            align_elements(this);
    });


    $("#show_link").click(function(event){
            event.preventDefault();
            $("div#container").toggle();
    });

});

CSS:

.form {
    position: relative;
    border-color: brown;
    border-width: 3px;
    border-style: dotted;
    width: 150px;
    height: 150px;
    float:left;
    margin-left: 10px;
    overflow: hidden;
}
div#container{
    overflow: auto;
    margin-top: 10px;
}

I intend to conceal the div#container using display: none; CSS property so that it's not visible on page load, yet this disrupts the functionality of the align_elements feature.

However, when I use a $.get callback function to hide the elements, everything works as expected. (The toggle link also functions properly.)

What is causing this behavior?

Fiddle: http://jsfiddle.net/7PELA/3/

jquery html css

Answer 1

Answer №1

When it comes to the CSS display:none; property, it completely removes the element from the browser's processing, which can cause issues with jQuery calculations. It is recommended to use the Visibility property in CSS and set it to hidden instead.

Here is the updated HTML:

<a href="" id="show_link">Show</a>
<div id="container" class="hide">
    <form class="form">
        <a href="" class="align_middle">Link1</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link2</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link3</a>
    </form>
</div>

Updated CSS:

.form
{
position:relative;
border-color:brown;
border-width:3px;
border-style:dotted;
width: 150px;
height: 150px;
float:left;
margin-left:10px;
overflow:hidden;
}

div#container
{
overflow:auto;
margin-top:10px;
}

.hide {
    visibility:hidden;
}

Updated jQuery:

var align_middle = function(element){

    var sidePadding = 20;

    $(element).css("position", "static");
    $(element).css("float", "left");
    $(element).css("width", "auto");

    var width = $(element).width();
    var parentWidth = $(element).parent().width();

    width = Math.min(width, parentWidth - sidePadding*2);
    $(element).css("width", width);

    var height = $(element).height();
    var parentHeight = $(element).parent().height();
    var top = (parentHeight - height)/2;
    var left = (parentWidth - width)/2;

    $(element).css("position", "absolute");
    $(element).css("left", left + "px");
    $(element).css("top", top + "px");

    $(element).css("float", "");

};

$(document).ready(function(){

    var elements = $(".align_middle");

    $.each(elements, function(key,value){

        align_middle(value);

    });

    $(elements).bind("DOMNodeInserted",function(){
        align_middle(this);
    });


    $("#show_link").click(function(event){
        event.preventDefault();
        $("div#container").toggleClass('hide');
    });

});

Answer 2

When it comes to the CSS display:none; property, it completely removes the element from the browser's processing, which can cause issues with jQuery calculations. It is recommended to use the Visibility property in CSS and set it to hidden instead.

Here is the updated HTML:

<a href="" id="show_link">Show</a>
<div id="container" class="hide">
    <form class="form">
        <a href="" class="align_middle">Link1</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link2</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link3</a>
    </form>
</div>

Updated CSS:

.form
{
position:relative;
border-color:brown;
border-width:3px;
border-style:dotted;
width: 150px;
height: 150px;
float:left;
margin-left:10px;
overflow:hidden;
}

div#container
{
overflow:auto;
margin-top:10px;
}

.hide {
    visibility:hidden;
}

Updated jQuery:

var align_middle = function(element){

    var sidePadding = 20;

    $(element).css("position", "static");
    $(element).css("float", "left");
    $(element).css("width", "auto");

    var width = $(element).width();
    var parentWidth = $(element).parent().width();

    width = Math.min(width, parentWidth - sidePadding*2);
    $(element).css("width", width);

    var height = $(element).height();
    var parentHeight = $(element).parent().height();
    var top = (parentHeight - height)/2;
    var left = (parentWidth - width)/2;

    $(element).css("position", "absolute");
    $(element).css("left", left + "px");
    $(element).css("top", top + "px");

    $(element).css("float", "");

};

$(document).ready(function(){

    var elements = $(".align_middle");

    $.each(elements, function(key,value){

        align_middle(value);

    });

    $(elements).bind("DOMNodeInserted",function(){
        align_middle(this);
    });


    $("#show_link").click(function(event){
        event.preventDefault();
        $("div#container").toggleClass('hide');
    });

});

Answer 3

Answer №2

What do you think of trying this link: http://jsfiddle.net/5R3TF/9/

All it needs is a quick addition of

$("#show_link").trigger('click');

right after the "toggle click" function without having to specify display:none

Answer 4

What do you think of trying this link: http://jsfiddle.net/5R3TF/9/

All it needs is a quick addition of

$("#show_link").trigger('click');

right after the "toggle click" function without having to specify display:none

Hiding the container element with "Display: none" disrupts the jQuery calculation of absolute positioning for child elements

Answer №1

Answer №2

Similar questions

The Eclipse software is unable to detect the external CSS files

Bootstrap dropdown menu fails to open when clicked

Creating a new element with a specified ID attribute in JavaScript

Press the Enter key to submit

Using jQuery sortable to update a hidden field with image IDs following a sorting activity

Ways to include a date within a JSON object in an HTML element

Is it achievable for a modal popup to automatically move to a specified location?

Enhancing Next.js with custom CSS for React-Bootstrap components: A step-by-step guide

Struggling to display the default value on a <select> element using the defaultValue prop in React

Creating an HTML table using an array of objects

pick out particular values from an array

Leveraging jQuery to tally total inputs contained within a div

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

Challenge with Responsive Design

Creating a series of tiny vertical markings along the horizontal line using the input range

AJAX calls are interrupted due to recursion

Unable to prepend '1' to the list

The occurrence of Multiple Button events leads to an error message stating: "Uncaught TypeError: Cannot read property 'remove' of undefined"

Execute a script using an HTML button

The navigation bar and footer are not utilizing the entire width of the browser