jquery.customSelect icon indicating copy to clipboard operation
jquery.customSelect copied to clipboard

Published 20 hours ago • verified publisher icon adamcoulombe

Flash of unstyled select menu

Open g5604 opened this issue 12 years ago • 3 comments

Hi,

Thank you for this plugin, when viewing my site on the iPhone as I view each page the native select menu is shown for a second or two,before it is replaced with my custom style.

is there a way to avoid this?

thanks, Gareth

g5604 avatar Jan 10 '13 16:01 g5604

This is probably because the plugin doesn't run until document.ready which sometimes takes longer to fire on mobile on account of slower download and processor speeds. I don't have a good failsafe way to remedy with JS, but one thing you could do is set the opacity of the select element to 0 using css (example), this way, you wont see the unstyled element.

The only problem however is that this causes the select element to no longer degrade gracefully as users with no JS enabled would not see the select box at all. May not be an issue if your site only supports JS users.

I'll leave this issue open in case anyone else has any other suggestions

adamcoulombe avatar Jan 10 '13 18:01 adamcoulombe

thank you, this solution works well. It is a shame it no longer degrades gracefully, but as I am only using the select menu on mobile it is unlikely JS will not be turned on.

g5604 avatar Jan 11 '13 16:01 g5604

One option if you do need graceful degradation would be to add a "no-js" class to the body element, style your select list for non-js using browsers, then remove the no-js class in your script, causing the select list to be hidden. You can do the removal as soon as you know whether JS is enabled or not, which can even be in the rendering phase (script element just after opening <body> tag, removing no-js if it runs)

mpettitt avatar Jan 31 '13 08:01 mpettitt