html - get size of displayed web page without browser application bars with css -
i creating simple web page displays text text input, , want make text input take whole displayed web page (without browser bar), 100vh technique includes browser bar , not want guess top bar size
here code:
function focus() { // focus element document.getelementbyid("title").focus(); } document.addeventlistener('click', function (event) { // make sure user's focus stuck text input if (event.target !== document.getelementbyid("title")) { document.getelementbyid("title").focus(); } }, false); window.onload = function () {document.getelementbyid("title").focus();}; function apply() { // applies title settimeout(function () { var str = document.getelementbyid("title").value; if (!str.replace(/\s/g, '').length) { document.title = "title-text"; } else { document.title = str; } },1); }<!doctype html> <html> <head> <meta charset="utf-8"> <title>title-text</title> </head> <body> <input type="text" id="title" onkeypress="apply()" autocomplete="off"> </body> </html>
use following css classes achieve this.
body{ margin:0; overflow:hidden; } #title{ height: 100vh; width:100vw; }
Comments
Post a Comment