I want to make some CSS adjustments to a single element using a single script, but I want all the changes to be displayed at once. For example:
$("#someelement").css({width:"100%"}); //this change should not be displayed
$("#someelement").width($("#someelement").width()-$("#somelement #child").width());
//I am having trouble calculating #child's width if it depends on #someelement's width in this scenario
In this situation, I can only determine the maximum width of the element by temporarily setting it to 100%. However, I do not want this change to be visible to the user. I only want
$("#someelement").width($("#someelement")-$("#somelement #child").width());As far as I know, the browser renders whenever the box model changes. Now, the question is: how can I prevent that and stack more changes until the browser flushes them?