it is even worse on my tablet PC. with the on screen keyboard active I can not see all parts that are necessary.
Also what is with doing everything by ajax. when ever possible things should be done locally. there is no reason to do ajax call to calculate the sum of cost+profit. Also your script should reivaluate the field values before submitting as some times the value your system thinks the filed says is not what it actually says.
Some usefull functions:
Code:
// Browser Window Size and Position
// copyright Stephen Chapman, 3rd Jan 2005, 8th Dec 2005
// you may copy these functions but please keep the copyright notice as well
function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
function pageHeight() {
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
function posLeft() {
return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
function posTop() {
return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
function posRight() {
return posLeft()+pageWidth();
}
function posBottom() {
return posTop()+pageHeight();
}
and the proper way to do virtual frames:
css:
Code:
body{
margin:0;
padding:<? echo HEADER_HEIGHT; ?>px 0 0px <? echo LEFT_WIDTH; ?>px;
}
div#header{
position:absolute;
top:0;
left:<? echo LEFT_WIDTH; ?>px;
width:500%;
height:<? echo HEADER_HEIGHT; ?>px;
}
div#innerheader{
position:absolute;
top:0;
left:0;
width:<? echo TABLE_ROW_WIDTH; ?>px;
height:100%;
}
div#left-sidebar{
position:absolute;
top:0;
left:0;
width:<? echo LEFT_WIDTH; ?>px;
height:<? echo TABLE_COLUMN_HEIGHT; ?>px;
}
div#innerleft-sidebar{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@media screen{
body>div#header{
position:fixed;
}
body>div#left-sidebar{
position:fixed;
}
body>div#footer{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body id="body">
<div id="header">
<div id="innerheader">
Place top row here
</div>
</div>
<div id="left-sidebar">
<div id="innerleft-sidebar">
Place left column here
</div>
</div>
<div id="content">
Place rest of table here
</div>
<body>
</html>
with this method only 1 bar will be seen. It will fit the page no mater the size and you can move the inner divs around without generating scroll bars to give the same effect as you have now. Please note I used some inline PHP to setup the table dimensions. You need to define the constants in your code.