JavaScript to achieve a Web page Adaptive window size source code

Last Update:2017-01-13 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

instance One

&lt;! doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;http-equiv= "Content-type" &nbsp;content= "Text/html;&nbsp;charset=utf-8" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;http-equiv= " Imagetoolbar "&nbsp;content=" no "&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;name=" viewport "&nbsp;content=" width= Device-width,inital-scale=1 "/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Login&lt;/title&gt; &nbsp;&nbsp;&nbsp; &nbsp;&lt;style&nbsp;type= "Text/css" &gt; body{&nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;left; &nbsp;&nbsp;&nbsp;
&nbsp;background-color:&nbsp;F6F6F6;
&nbsp;&nbsp;&nbsp;&nbsp;background-attachment:&nbsp;fixed; } &nbsp; #imgcenter {&nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;
&nbsp;&nbsp;&nbsp;width:50%;
&nbsp;&nbsp;&nbsp;&nbsp;left:20%;
&nbsp;&nbsp;&nbsp;&nbsp;top:250px; } #center {&nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;&nbsp;
&nbsp;&nbsp;width:50%; &nbsp;&nbsp;&nbsp;&nbsp;left:20%;
&nbsp;&nbsp;&nbsp;&nbsp;top:220px; } &nbsp; #account {&nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;
&nbsp;&nbsp;&nbsp;left:60%;
&nbsp;&nbsp;&nbsp;&nbsp;top:-110px;
&nbsp;&nbsp;&nbsp;&nbsp;padding:2%;
&nbsp;&nbsp;&nbsp;&nbsp;width:50%; } &nbsp; #pwd {&nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;&nbsp;
&nbsp;&nbsp;left:60%;
&nbsp;&nbsp;&nbsp;&nbsp;top:-100px;
&nbsp;&nbsp;&nbsp;&nbsp;padding:2%;
&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;50%; } &nbsp; #login {&nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;&nbsp;
&nbsp;&nbsp;left:60%;
&nbsp;&nbsp;&nbsp;&nbsp;top:-95px;
&nbsp;&nbsp;&nbsp;&nbsp;padding:1%;
&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;25%; } #logo {&nbsp;&nbsp;&nbsp;&nbsp;padding:3%; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;50%; &nbsp;&nbsp;&nbsp;&nbsp;
height:&nbsp;auto; } #div_forgetpwd {&nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;30%;
&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;90%;
&nbsp;&nbsp;&nbsp;&nbsp;top:-115px;
&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;25%;
&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;1pt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;white-space:nowrap; } #div_forgetpwd &nbsp;a{&nbsp;&nbsp;&nbsp;&nbsp;text-decoration:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;margin:
&nbsp;auto; } #div_forgetpwd &nbsp;a:hover{&nbsp;&nbsp;&nbsp;&nbsp;text-decoration:&nbsp;underline; &nbsp;&nbsp;&nbsp;&nbsp;
margin:&nbsp;auto; }
. clew{&nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;15px; &nbsp;&nbsp;&nbsp;
&nbsp;left:-10%;
&nbsp;&nbsp;&nbsp;&nbsp;top:-80%;
&nbsp;&nbsp;&nbsp;&nbsp;padding:2%&nbsp;50%;
&nbsp;&nbsp;&nbsp;&nbsp;white-space:nowrap;
&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp; #FFFFD5;
&nbsp;&nbsp;&nbsp;&nbsp;font-weight:&nbsp;bold;
&nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;century&nbsp;gothic,&nbsp;arial;
&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp; #FCBE47; &nbsp;&nbsp;&nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp; #db6e3c;
&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp; #db6e3c; } &nbsp; &lt;/style&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type= "Text/javascript" &nbsp;src= E:\MyProject\ Html\kserver\jquery-1.4.2.min.js "&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=" text/
JavaScript "&gt;//error&nbsp;clew var&nbsp;userflag=0;
var&nbsp;pwdflag=0; $ (). Ready (function () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$ ("Form&nbsp;:input"). blur (function () &nbsp;{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp; $parent &nbsp;=&nbsp;$ (this). parent ();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $parent. Find (". Clew"). Remove (); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ($ (this). Is (". Username")) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.value== "" &nbsp;| | &nbsp;this.value.length&nbsp;&lt;&nbsp;0) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;errormsg&nbsp;=&nbsp; "Please&nbsp;enter&nbsp;your&nbsp;account." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $parent. Append
("&lt;span&nbsp;class= ' Clew&nbsp;clew ' &gt;" +errormsg+ "&lt;/span&gt;"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;userFlag=1; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ($ ( This). is (". Password")) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ( this.value== "" &nbsp;| | &nbsp;this.value.length&nbsp;&lt;&nbsp;0) &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;errorMsg&nbsp;=&nbsp; "Please&nbsp;enter&nbsp;your&nbsp;password." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $parent. Append ("&lt;span&nbsp;class= ' Clew&nbsp;clew ' &gt; "
+errormsg+ "&lt;/span&gt;"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;pwdFlag=1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &NBSP}). KeyUp (function () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (this). Triggerhandler ("Blur")
; &NBSP;&NBSP;&NBSP;&NBSP}). focus (function () &nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ (this).
Triggerhandler ("Blur");
&nbsp;&nbsp;&nbsp;&nbsp;});
}); Submit Inspection Function&nbsp;validate_form (thisform) {&nbsp;&nbsp;&nbsp;&nbsp;with&nbsp; (thisform) {&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (userflag==0| | pwdflag==0) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;username.focus (); &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp}} &lt;/script&gt; &lt;/head&gt; &lt;body&nbsp;bgcolor= "#F6F6F6" &nbsp;&gt; &lt;!--&lt;form&nbsp;&nbsp;action= "#" &nbsp;method= " Get "&nbsp;name=" form "&nbsp;id=" form "&gt; &nbsp; Current Window Height: &nbsp;&lt;input&nbsp;type=" text "&nbsp;name=" availheight " &nbsp;size= "6" &gt; &nbsp;&lt;br&gt; &nbsp; Current window width: &nbsp;&lt;input&nbsp;type= "text" &nbsp;name= "availwidth" &nbsp;
Size= "6" &gt; &nbsp;&lt;br&gt; &nbsp;&lt;/form&gt;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "Imgcenter" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src= "E:\MyProject\html\KServer\login\login.png"
&nbsp;id= "logo" &nbsp;align= "left" &nbsp;&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id= "center" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form&nbsp;method= "POST" &nbsp;action= "db.html" &nbsp; Onsubmit= "Return&nbsp;validate_form (this);" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=text&nbsp;name = "username" &nbsp;value= "Please enter the username ..." &nbsp;id= "Account" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class= "username" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;input&nbsp;type=password&nbsp;name= "password" &nbsp;value= "..." &nbsp;id= "pwd" &nbsp;class= "password" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type= Submit&nbsp;value= "Login" &nbsp;id= "login" &gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;div&nbsp;id= "Div_forgetpwd" &gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href= "E:\MyProject\html\KServer\register\register.html" &nbsp;&gt; registered account &lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href= "E:\MyProject\html\KServer\forget_pwd\forget_pwd.html"
&nbsp;&gt; Forgot password &lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/form&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;
Type= "Text/javascript" &gt; &nbsp;&nbsp;&nbsp;&nbsp;//change element CSS Properties &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;set () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setimgdiv&nbsp;=&nbsp;document.getelementbyid ("
Imgcenter ");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setImgDiv.style.top&nbsp;=&nbsp; "150px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setImgDiv.style.left&nbsp;=&nbsp; "36%"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;settextdiv&nbsp;=&nbsp;document.getelementbyid ("
Center "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;settextdiv.style.top&nbsp;=&nbsp; "280px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTextDiv.style.left&nbsp;=&nbsp; "8%";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setlogo=document.getelementbyid ("logo");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setlogo.style.height= "100px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setlogo.style.width= "240px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setaccount=document.getelementbyid ("account");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setaccount.style.height= "15px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setaccount.style.width= "240px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setpwd=document.getelementbyid ("pwd");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setpwd.style.height= "15px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setpwd.style.width= "240px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setlogin=document.getelementbyid ("login"); &nbsp;&Nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setlogin.style.height= "25px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setlogin.style.width= "100px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setforgetpwd=document.getelementbyid ("Div_forgetpwd")
;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setforgetpwd.style.width= "100px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setforgetpwd.style.left= "100%"; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;reset () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;var&nbsp;resetimgdiv&nbsp;=&nbsp;document.getelementbyid ("Imgcenter");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reSetImgDiv.style.top&nbsp;=&nbsp; "250px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reSetImgDiv.style.left&nbsp;=&nbsp; "20%"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;resettextdiv&nbsp;=&nbsp;document.getelementbyid ("
Center "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reSetTextDiv.style.top&nbsp;=&nbsp; "220PX ";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reSetTextDiv.style.left&nbsp;=&nbsp; "20%";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;resetlogo=document.getelementbyid ("logo");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetlogo.style.height= "Auto";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetlogo.style.width= "50%";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;resetaccount=document.getelementbyid ("account");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetaccount.style.height= "Auto";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetaccount.style.width= "50%";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;resetpwd=document.getelementbyid ("pwd");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetpwd.style.height= "Auto";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetpwd.style.width= "50%";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;resetlogin=document.getelementbyid ("login"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetlogin.style.height= "Auto";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetlogin.style.width= "25%"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;resetforgetpwd=document.getelementbyid ("Div_forgetpwd
");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetforgetpwd.style.width= "100px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resetforgetpwd.style.left= "90%"; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;setsizemid () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;var&nbsp;setsizemidimgdiv&nbsp;=&nbsp;document.getelementbyid ("Imgcenter");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setSizeMidImgDiv.style.top&nbsp;=&nbsp; "150px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setSizeMidImgDiv.style.left&nbsp;=&nbsp; "22%"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizemidtextdiv&nbsp;=&nbsp;document.getelementbyid
("center"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidtextdiv.style.top&nbsp;=&nbsp; "280px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setSizeMidTextDiv.style.left&nbsp;=&nbsp; " -35px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizemidlogo=document.getelementbyid ("logo");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidlogo.style.height= "100px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidlogo.style.width= "240px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizemidaccount=document.getelementbyid ("account");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidaccount.style.height= "15px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidaccount.style.width= "240px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizemidpwd=document.getelementbyid ("pwd");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidpwd.style.height= "15px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidpwd.style.width= "240px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizemidlogin=document.getelementbyid ("login");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidlogin.style.height= "25px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidlogin.style.width= "80px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizemidforgetpwd=document.getelementbyid ("Div_
Forgetpwd ");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidforgetpwd.style.width= "80px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemidforgetpwd.style.left= "110%"; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;setsizemini () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;var&nbsp;setsizeminiimgdiv&nbsp;=&nbsp;document.getelementbyid ("Imgcenter");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setSizeMiniImgDiv.style.top&nbsp;=&nbsp; "150px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setSizeMiniImgDiv.style.left&nbsp;=&nbsp; "6%"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizeminitextdiv&nbsp;=&nbSp;document.getelementbyid ("center");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setSizeMiniTextDiv.style.top&nbsp;=&nbsp; "280px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setSizeMiniTextDiv.style.left&nbsp;=&nbsp; " -60px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizeminilogo=document.getelementbyid ("logo");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminilogo.style.height= "100px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminilogo.style.width= "240px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizeminiaccount=document.getelementbyid ("account")
;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminiaccount.style.height= "15px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminiaccount.style.width= "240px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizeminipwd=document.getelementbyid ("pwd");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminipwd.style.height= "15px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminipwd.style.width= "240px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizeminilogin=document.getelementbyid ("login");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminilogin.style.height= "25px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminilogin.style.width= "80px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;setsizeminiforgetpwd=document.getelementbyid ("Div_
Forgetpwd ");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminiforgetpwd.style.width= "80px";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizeminiforgetpwd.style.left= "125%"; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//get current window dimensions &nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;var&nbsp;winWidth&nbsp;=&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;winHeight&nbsp;=&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;finddimensions () &nbsp;//function: Getting dimensions &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Get window width &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp; (window.innerwidth)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winWidth&nbsp;=&nbsp;window.innerWidth; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp; ((document.body) &nbsp;&amp;&amp;&nbsp; ( Document.body.clientWidth)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winWidth&nbsp;=&nbsp;
Document.body.clientWidth; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Get window Height &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if &nbsp; (window.innerheight) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winHeight&nbsp;=&nbsp;
Window.innerheight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp; ((document.body) &nbsp;&amp;&amp;&nbsp; ( document.body.clientHeight)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winHeight&nbsp;=&nbsp;
Document.body.clientHeight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//through the inside document to detect the body, get window size &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;if&nbsp; (document.documentelement&nbsp;&nbsp;&amp;&amp;&nbsp;document.documentelement.clientheight
&nbsp;&amp;&amp;&nbsp;document.documentelement.clientwidth) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winHeight&nbsp;=&nbsp;document.documentElement.clientHeight;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;winWidth&nbsp;=&nbsp;document.documentElement.clientWidth; &NBSP;&NBSP;&NBSP;&NBSP} &nbsp;&nbsp;&nbsp;&nbsp;//result output to two text boxes &nbsp;&nbsp;&nbsp;&nbsp;if (winWidth&lt;420| |
winheight&lt;537) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setsizemini (); &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if (420&lt;=winwidth&amp;&amp;winwidth&lt;=595) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;setsizemid (); &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if (595&lt;winwidth&amp;&amp;winwidth&lt;850| |
537&lt;winheight&amp;&amp;winheight&lt;590) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;set (); &nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsP;&nbsp;&nbsp;&nbsp;reset ();
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;finddimensions ();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//call function, get numeric &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onresize=findDimensions; &nbsp;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

Example Two

Function&nbsp;init () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (&nbsp; document.body.scrollwidth&nbsp;&gt;&nbsp; (window.screen.availwidth-100) &nbsp;) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.dialogwidth&nbsp;=&nbsp; (window.screen.availwidth-100). toString () &nbsp;+&nbsp; "px" &nbsp;&nbsp;&nbsp; &nbsp; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else{&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;window.dialogWidth&nbsp;=&nbsp; (document.body.scrollwidth&nbsp;+10). toString () &nbsp;+&nbsp; "px" &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (&nbsp;document.body.scrollHeight&nbsp;&gt;&nbsp; (window.screen.availheight-70) &nbsp;) {&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &NBSP;&NBSP;&NBSP;&NBsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.dialogheight&nbsp;=&nbsp; ( WINDOW.SCREEN.AVAILHEIGHT-50). ToString () &nbsp;+&nbsp; "px" &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.dialogHeight&nbsp;=&nbsp; ( DOCUMENT.BODY.SCROLLHEIGHT&NBSP;+10). ToString () &nbsp;+&nbsp; "px" &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;window.dialogLeft&nbsp;=&nbsp; ((window.screen.availwidth&nbsp;-&nbsp;document.body.clientwidth) &nbsp;/ &NBSP;2). ToString () &nbsp;+&nbsp; "px" &nbsp;;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;window.dialogTop&nbsp;=&nbsp; ((window.screen.availheight&nbsp;-&nbsp;document.body.clientheight) &nbsp;/
&NBSP;2). ToString () &nbsp;+&nbsp; "px"; &nbsp;}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript to achieve a Web page Adaptive window size source code

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support