Page self-adaptation using JAVAScript

Sometimes, we may need to make some data display blocks adaptive according to the page size like the new Yahoo Mail. The fact is not difficult, but if we simply use CSS control, we often cannot fully implement the results we need. At this time, we need javascript, Javascript, so that we can implement an easy-to-use Adaptive Page, the HR open source project at iSunXoft is applied.
Implementation principle:
Obtain the width and height of the IE display screen. determine which objects are absolutely fixed, which are not fixed, and which are fixed in length and width. Then, like the win form program, the size of the root software interface is the same, design the attributes of related objects, such as the length, width, and absolute position. However, on the WEB, the program cannot detect window size changes in real time, you can only use the SetTimeout Function to implement the adaptive method for recursive call at intervals.
The following is an implementation method from the iSunXoft Hr open-source project SysForm. aspx.
Note: $ ("") is a variable 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 ")
{
$ ("DivDataList"). style. width = wi-30;
}
Else
{
$ ("DivDataList"). style. width = Wi-Fi-223;
}
SetTimeout ("resize ()", 1000 );
Return;
}
H = he;
W = wi;

If (he & gt; 100)
{
$ ("DivDataList"). style. height = he-172;

}
If (wi> 200)
{
$ ("DivDataList"). style. width = Wi-Fi-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-Fi-223;
}
}
H = he;
W = wi;
If (he & gt; 150)
{
$ ("DataEmpWidows"). style. height = he-132;
}
If (wi> 200)
{
$ ("DataEmpWidows"). style. width = Wi-Fi-223;
If ($ ("leftMenu"). style. display. toLowerCase () = "none ")
{
$ ("DataEmpWidows"). style. width = wi-30;
}
}

}
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-Fi-223;
//}
//}
// H = he;
// W = wi;
// If (he> 150)
//{
// $ ("EipWindows"). style. height = he-132;
//}
// If (wi & gt; 200)
//{
// $ ("EipWindows"). style. width = Wi-Fi-223;
// If ($ ("leftMenu"). style. display. toLowerCase () = "none ")
//{
// $ ("EipWindows"). style. width = wi-30;
//}
//}
//}
}
SetTimeout ("resize ()", 1000 );
}
Resize ();

Then, resize () is called on the webpage. Once the window size or resolution change, the system can ensure real self-adaptation.