2

How do I avoid flashing the un-enhanced DOM-element before my javascript has converted it into another type of element?

To be case specific: I have a select with multiple choices, which is converted via a jquery-plugin to a multi-choice-drop-down. But on page load it renders as the multiselect before the plugin runs.

Right now I'm just hiding the select until it's converted, but that leaves an empty space where the dropdown will show up.

Is there any good way avoid this kind of flickering?

Without Javascript:

without javascript

So this is the situation, the things I've seen about progressive enhancement so far is just to add some CSS to the flickering dom elements, but since this is rather a transformation I'd like to render something in the place where it's supposed to be.

With Javascript: with javascript

I hope it's clear what I'm trying to achieve here, any good solutions? Should I render a normal drop-down on the place as a placeholder and then replace it when the DOM is ready? How do I handle the no-js case in that case? The site needs to be available to everyone.

jdawg
  • 43
  • 1
  • 7
  • Have you tried running the 'select conversion script' before the document is ready? (not sure if this is recommended though) – Rhys Bradbury May 17 '16 at 12:15
  • That would probably work, but I'd like to run as little script as possible in the – jdawg May 17 '16 at 12:16
  • You dont always have to put it in the head, REF http://stackoverflow.com/questions/7186914/is-there-any-way-to-call-function-before-document-ready-in-jquery – Rhys Bradbury May 17 '16 at 12:17
  • I have changed my comments into an answer – Rhys Bradbury May 17 '16 at 12:18
  • You can clone the select object, perform any enhancements to it, and once ready, replace the select element which is "visible". – elad.chen May 17 '16 at 12:27
  • @elad.chen, wouldn't that cause a flicker as well? When the replace occurs? – jdawg May 17 '16 at 12:35
  • This is pretty hard to answer since I'm not fully aware of your goals. Assuming the desired effect is the one from your "with javascript" example, The layout can be mimicked using css, then add the behaviour using js. – elad.chen May 17 '16 at 12:44
  • @elad.chen, That's correct, I want the result from the "with js" example, but without the initial flicker that is caused by the select being transformed to the drop-down. Hiding the select and popping the drop-down when it's ready seems like the best solution, even though it arrives slightly after the other elements – jdawg May 17 '16 at 13:04

1 Answers1

1

If you adjust your layout to make the multi-select sit below the label like everything else and then clone the select, rebuild it in memory and then swap it in as @elad.chen suggests (possibly via an embedded script after the element or the whole form), you should reduce the jarring flicker. You could also use transitions to smoothly swap the two: shrink the height of the multi-select then swap or fade out and fade in using opacity.

Aaron Gustafson
  • 602
  • 6
  • 11