html - Show/Hide HTML5 element based on localStorage value -
in below code, have button id='questionaire'. when user clicks on button want save event local storage button not shown next time user opens page.
i managed earlier window.onload=function(){} script button appeared moment , disapeared, if had been clicked. didn't nice.
<!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>storage?</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <?php echo " <form> <input type='button' class='button' value='question' id='questionaire'> </form> "; echo "<script type='text/javascript'> document.getelementbyid('questionaire').onclick = function() { localstorage.clicked = 'true'; } </script>"; ... <more html code> ... ?> </body> </html>
maybe should hide button , show when not clicked before.
when hidden in first place won't flashing button users have clicked it!
this not help. button topmost element in page , if don't show @ first place , show after page has loaded other elements move. have edited question
wrap button inside div has dimensions of button! nothing moves
<div style="width: xxpx; height: xxpx; display: inline-block;"> <input type='button' class='button' value='question' id='questionaire'> </div>
your problem "the flash of unstyled content" page moves when showing or hiding button on load js, unless hide until manipulation done!
you can try google "avoid flash of unstyled content" or read this: avoid flash of unstyled content
Comments
Post a Comment