CODEWITHSUNDEEP
jquerycss
Dr.Li
Dr.Li

Reputation: 45

jQuery css promise done

Can someone give me an advice:

Example: I Have

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

Not I want to change this width to 1oo% and get the width in px on click

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

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

But I stil get the 80% value.

If I click again, only then I get the 100% value in pixel

The idea was to wait until css is applied and to get the new width after

Someone any ideas?

Thank you for help!

Upvotes: 2

Views: 750

Answers (2)

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6004

you should use setTimeout() to get apply your css and then use it in your code as

$(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>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075219

css does its work immediately, and so simply

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

should work, and does on Chrome and Firefox barring something you're not showing us:

$('#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>

But if you need to give the browser a moment to apply the change, you can use setTimeout to do that:

$('#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>

Upvotes: 2

Related Questions