Javascript hide div when size screen is less than 60% visible (when mobile keyboard is displayed)

Question

I'm trying to hide a div when user fills a form on a mobile device, so the screen could be more visible due to keyboard displaying.

HTML

<div id="fixed-bottom-menu">BLA BLA BLA</div>

The JS code must display again the div when mobile keyboard is hidden.

My attempt:

<script type="text/javascript">
    if( $(window).width() < 60%)
    {
        document.write( '<style>"#fixed-bottom-menu"{visibility:hidden}</style>' );
    }
</script>

Answer 1

you need a eventlistner to do this and the % should not be there and you need to check the current viewport height is 40% less than the total screen size inorder to make it work

if you are using document.write() it will remove jquery from the script it is not advisable to using document.write()

check this https://jsfiddle.net/anirudhsanthosh/hrsd8o5p

use jquery.css() method to change css property of an element

<script type="text/javascript">
        $(window).resize(()=>{

         if(( window.innerHeight/screen.availHeight)*100 < 60)
         {
         
            $('#fixed-bottom-menu').css({display:"none"})
            return
         }
         $('#fixed-bottom-menu').css({display:"block"})
    })
    
    </script>