Click here to Skip to main content
14,385,812 members

How do I get chrome to re-render elements BEFORE showing alert?

DerekT-P asked:

Open original thread
In a validation script, I set the class of invalid elements so that they are rendered in red, then display an alert asking the user to correct the highlighted errors.
However in Chrome, the alert is displayed before the element is re-drawn. This could lead to confusion for the user since there are no highlighted fields.
When you step through the code, all works fine as the page is redrawn at each step.

In Firefox, the browser displays a semi-transparent background behind the alert box, and the rendering of the error input box is updated before the alert. Edge behaves similarly (but with a white semi-transparent layer instead of black). IE also redraws the error field but doesn't use the semi-transparent layer.

What I have tried:

Although it seems the "wrong" approach, I tried putting the alert into a setTimeout call, delaying the alert by a second (or more or less). However this doesn't have the required effect; the re-render of the highlighted input box still doesn't occur until after the alert box is shown.

I've also tried
$('#txtDemo').hide().show()
but no help...
Googling suggests others have had similar problems and found that querying the offsetHeight may force Chrome to redraw, but that workaround doesn't work in current versions of Chrome.

See my demo page at codeproject.derektp.co.uk/sequence.htm[^]
Tags: Javascript, CSS, chrome

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the The Code Project Open License (CPOL).




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100