jQuery's promise method in CSS is executed successfully

Question

jQuery's promise method in CSS is executed successfully

Seeking advice from someone:

Scenario: Currently, I have

<div id="breadCrumb" style="width:80%"></div>

Now, I want to update the width to 100% and retrieve the width in pixels on click

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%").promise().done(function(){   
        console.log(cache.width());
    });
});

However, I am still getting the 80% value.

Only after clicking again do I receive the 100% value in pixels

The concept was to wait until the CSS is applied before retrieving the new width

Any thoughts or suggestions?

Appreciate your assistance!

jquery css

Answer 1

Answer №1

css works quickly and efficiently.

cache.css('width', "100%");
console.log("breadCrumb width: " + cache.width());

This should function properly on Chrome and Firefox, unless there is an unseen issue:

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    console.log("breadCrumb width: " + cache.width());
    console.log("body width: " + $(document.body).width());
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you require the browser to delay applying the change, you can utilize setTimeout:

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    setTimeout(function() {
      console.log("breadCrumb width: " + cache.width());
      console.log("body width: " + $(document.body).width());
    }, 50);
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

css works quickly and efficiently.

cache.css('width', "100%");
console.log("breadCrumb width: " + cache.width());

This should function properly on Chrome and Firefox, unless there is an unseen issue:

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    console.log("breadCrumb width: " + cache.width());
    console.log("body width: " + $(document.body).width());
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you require the browser to delay applying the change, you can utilize setTimeout:

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    setTimeout(function() {
      console.log("breadCrumb width: " + cache.width());
      console.log("body width: " + $(document.body).width());
    }, 50);
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Answer №2

It is recommended to utilize the setTimeout() function in order to apply your CSS and then incorporate it into your code like so:

$(document).ready(function(){
    var cache = $('#breadCrumb');
    alert(cache.width());
    cache.css('width', "100%")
    setTimeout(function(){
        alert(cache.width());
    },500)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="breadCrumb" style="width:80%"></div>

Answer 4

It is recommended to utilize the setTimeout() function in order to apply your CSS and then incorporate it into your code like so:

$(document).ready(function(){
    var cache = $('#breadCrumb');
    alert(cache.width());
    cache.css('width', "100%")
    setTimeout(function(){
        alert(cache.width());
    },500)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="breadCrumb" style="width:80%"></div>

jQuery's promise method in CSS is executed successfully

Answer №1

Answer №2

Similar questions

Styling Multiple Fullscreen Rows with Bootstrap CSS

Sorting a select element using Javascript/JQuery while taking into consideration the label attribute present in the options

What is the method for determining the intersection of multiple rgba values?

The Stepper StepIconComponent prop in MUI is experiencing issues when trying to render styles from the styles object, leading to crashes in the app

Comparison between triggering a 'click' event with or without indexing is often debated in web development circles. While trigger('click') invokes the click event

Preserving scroll location following a hyperlink postback situation

What is the best way to display an international phone number using Angular Material V6?

The same HTML/CSS appears with varying appearances

Display a PDF document within a div using jQuery or AngularJS

Track and maintain the active status of the clicked article using jQuery

JQuery requests functioning flawlessly on one system while encountering issues on other systems

Use jQuery to retrieve the response from a JSON request and showcase it on the existing HTML page

What is causing the container to overlap with my sidebar-like <nav>?

Tips for validating a form with the assistance of jQuery

Creating a table that adapts to different screen sizes using

Tips for executing jsfiddle code within Joomla 3.2

Adding a div with a canvas element is malfunctioning

Rules of HTML tables extend to the border size

Guide on using PHP to remove the trash icon glyphicon

Transitioning from Jquery to vanilla JavaScript or transforming Jquery code into pseudo code