Page adaptation through JAVAScript_javascript skills

Sometimes, we may need to make some data display blocks adaptive according to the page size, like the new version of Yahoo Mail.The fact is that it is not difficult, but if we simply use CSS control, we often cannot fully achieve the effect we want. At this time, we need to use JavaScript. Javascript allows us to implement common adaptive pages, which is applied to the HR open source project of iSunXoft. .
Implementation principle:
Get the width and height of the IE display screen. Determine which objects have fixed absolute positions, which are not fixed, which lengths and widths are fixed, and then, like the WIN FORM program, use the root software The size of the interface, the length, width, absolute position and other attributes of the design-related objects. However, on the WEB, the program has no way to detect changes in window size in real time. It can only use the adaptive method to make recursive calls at intervals through the SetTimeout function.
The following is the implementation method taken from the iSunXoft Hr open source project SysForm.aspx.
Note: $("") is a changed element.
var h;
var w;
function resize( )
{

var he = document.body.offsetHeight;
var wi = document.body.offsetWidth;
if($("DataTable").style.display.toLowerCase( )==""||$("DataTable").style.display.toLowerCase()=="inline")
{
if (h==he&&w==wi)
{
if($("leftMenu").style.display.toLowerCase() == "none" )
                                                                                                  🎜> else
{
$("DivDataList").style.width = wi - 223;
}
setTimeout("resize()",1000);
       return;
}
h = he;
w = wi;

if (he>100)
{
$("DivDataList").style.height = he - 172;

}
if(wi>200)
{
$("DivDataList").style.width = wi - 223;
if($("leftMenu"). style.display.toLowerCase() == "none" )
{
$("DivDataList").style.width = wi - 30;
}
}
}

if($("DataEmpWidows").style.display.toLowerCase()=="inline"||$("DataEmpWidows").style.display.toLowerCase()=="")
{
if (h==he&&w==wi)
{
if($("leftMenu").style.display.toLowerCase() == "none" )
{
$( "DataEmpWidows").style.width = wi - 30;
}
else
 {
$("DataEmpWidows").style.width = wi - 223;                         
}
h = he;
w = wi;
if (he>150)
{
$("DataEmpWidows").style.height = he - 132;
}
if(wi>200)
{
$("DataEmpWidows").style.width = wi - 223;
if($("leftMenu").style.display.toLowerCase() == "none" )
                                                                                            
    if(typeof($("EipWindows")) != "undefined")
    {
     //if($("EipWindows").style.display.toLowerCase()=="inline")
     //{
     // if (h==he&&w==wi)
     // {
     //  if($("leftMenu").style.display.toLowerCase() == "none" )
     //  {
     //   $("EipWindows").style.width = wi - 30;
     //  }
     //  else
     //  {
     //   $("EipWindows").style.width = wi - 223;
     //  }        
     // }
     // h = he;
     // w = wi;
     // if (he>150)
     // {
     //  $("EipWindows").style.height = he - 132;
     // }
     // if(wi>200)
     // {
     //  $("EipWindows").style.width = wi - 223;
     //  if($("leftMenu").style.display.toLowerCase() == "none" )
     //  {
     //   $("EipWindows").style.width = wi - 30;
     //  }
     // }    
     //}
    }
    setTimeout("resize()",1000);
   }
   resize();

   然后就在网页上调用resize();一旦窗口大小有变化,或是分辩率有变化,都能确保能够实现真正意义上的自适应.