This is as much a "how is this actually supposed to work?" query as it is a "why the hell isn't this working?" query.
I'm using jQuery animate() to grow and shrink divs on my page. I have a single function which toggles between the two states by inspecting whether the element has a "bigger" class, and conditionally growing or shrinking it. Like this:
function toggleBox(thisBox)
{
if($("#" + thisBox).hasClass('bigger')) // Shrink it if it's big
{
$("#" + thisBox).animate({ height: '44px'},500).removeClass("bigger");
}
else // grow it
{
$("#" + thisBox).addClass("bigger").animate({ height: '40%' },500);
}
}
This is absolutely peachy, with one small problem. I'm using CSS to give certain elements vertical scrollbars if, and only if, they have the ".bigger" class. This causes a problem with some elements, as they have child objects with relative width that don't re-render on all browsers once the vertical scrollbar is in place (Chrome/Chromium seems to be the main offender in this case).
To force the child objects to resize when the above function is called, I've tried the following ham-fisted solution:
function toggleBox(thisBox)
{
if($("#" + thisBox).hasClass('bigger')) // Shrink it if it's big
{
$("#" + thisBox).animate({ height: '44px'},500).removeClass("bigger");
}
else // grow it
{
$("#" + thisBox).addClass("bigger").animate({ height: '40%' },500, 'swing', function()
{
$(".rerender").each(function()
{
this.className = this.className;
// Or something similar; I've tried a few methods
console.log(this.className); // Just to check
});
});
}
}
So anything I need to re-render once its parent div has resized just needs the ".rerender" class, and it will reinherit all CSS properties.
There are two problems with this: the first is that anything I use in a callback I use to change the CSS, be it jQuery or vanilla javascript, seems to run concurrently to the function that called it, but other script content in the callback runs when the calling function has completed, like it's supposed to. In the script above, for example, anything I put in the callback to change the CSS has already happened by the time the .animate() has finished, but the console.log() doesn't complete until the .animate() has finished. This happens even if I call the CSS-affecting code from the console.log()!
The second problem is that any single event I use to force an object to re-render (removing and re-adding a class, or even directly changing the CSS property to and from a different value), doesn't actually cause the object to re-render. If I do something like $('#theObject').removeClass('theClass').addClass('theClass');
or even
function()
{
$('#theObject').removeClass('theClass');
$('#theObject').addClass('theClass');
}
provided they're called by the same event, it doesn't force the object to re-render. If they're called by separate events, it does.
In practical terms, I want a way to get a page element to re-render as part of a call-back, and actually run once the calling function has concluded. In terms of curiosity, I'd love to know why (a) code in the above callback is running before it's supposed to, and (b) why two opposing CSS-affecting events don't seem to run at all if they're called from the same event, and if there's a way around that.
