Unwanted scrolling of screen

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571
    #1

    Unwanted scrolling of screen

    On my page I have 3 <div> tags.

    The first is my menu bar occupying 0 to 25px in height. This is fixed and will not scroll, as it should not.

    The second is my main body, which can scroll because it is greater than the visible height of the screen. Starting at 25px from top.

    The third <div> tag is a hidden rate table that I float in a fixed position to the top right of the screen at 25px from top. This will always be visible on the screen even when I have scrolled the main body down.

    Problem: When I re-hide the rate table <div>, the main body <div> scrolls to the top. I would like for that <div> to stay in the position where it was when I displayed the rate table. How can I either prevent the scrolling or read the position of the main body and re-scroll to the desired location?

    Menu Bar:
    Code:
    <div id="MenuBar" nowrap="nowrap">

<-- style code for menu bar -->
#MenuBar {
	position: fixed; 
	white-space: nowrap; 
	top: 0px; 
	left: 1px; 
	width: 99%;
	background-color: #CCFFFF; 
	background-image:linear-gradient(to bottom, #CCFFFF 0%, White 100%);
	color: black;
	border: #0000FF solid 1px;
	padding-left: 10px;
	z-index: 150;
}
    Main Body:
    Code:
    <div id="CMEAdminTop" style="width:95%;left:15px;white-space:nowrap;border:5px ridge #ff6600;padding:7px;background-color: #ccffcc;background-image:linear-gradient(to top, #ccff99 0%, White 100%);">

<-- additional style info for main body -->
#CMEAdminTop {
	position: absolute;
	white-space: nowrap; 
	left: 0%; 
	top: 25px;
	width: 99%;
	color: #333333;
	padding:5px;
	font-size: 10pt;
	overflow: hidden;
	z-index: 98;
}
    Hidden Rate Table:
    Code:
    			<div 
				id="ratesDiv" 
				style="	position:fixed;
						border:5px ridge #006600;
						top :25;
						left:250;
						height:300;
						width:700px;
						overflow: scroll;
						background-color: #ccffcc; 
						background-image:linear-gradient(to top, #ccff00 0%, White 100%);
						z-index:99;
						visibility: hidden;
				"
			>
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      how do you hide the rate table div? (well, I guess JavaScript is involved …)

        Comment

        • Claus Mygind
          Contributor
          • Mar 2008
          • 571
          #3
          Just turn visibility off
          Code:
          	document.getElementById("ratesDiv").style.visibility = "hidden";

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              could you provide a demo page?

                Comment

                • Claus Mygind
                  Contributor
                  • Mar 2008
                  • 571
                  #5
                  That would take a little work. the page is dynamically loaded with content. But I will give it a try.

                    Comment

                    • Claus Mygind
                      Contributor
                      • Mar 2008
                      • 571
                      #6
                      still working on putting together a demo page

                        Comment

                        • Claus Mygind
                          Contributor
                          • Mar 2008
                          • 571
                          #7
                          Ok here is a sample page I cobbled together. It basically demonstrates the problem of the unwanted scrolling.

                          This code is written for FireFox (ONLY), it will not be run on any other type of browser. Solutions which include another browser type will not be helpful.

                          The page will load with a 60 line form.
                          1) Scroll to any of the lines which are below the original visible lines on your monitor (somewhere down in the blue background range).

                          2) click on the find link
                          3) select any value the popup <div> will disappear and the page will scroll to the top (the yellow background range). Why is that?

                          Here is the sample code.
                          Code:
                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Test Div Control</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

		<style type="text/css">
			body {margin:0px; background-color:#e4e2d3;}
			table {border-spacing:0}
			tbody {font-size:10pt; color:#333333;}

			table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collapse:separate;}
			.table1 thead th{color:#fff; text-shadow:1px 1px 1px #568F23;border:1px solid #93CE37; border-bottom:3px solid #9ED929; background-color:#9DD929; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.02, rgb(123,192,67)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(158,217,41)) ); background: -moz-linear-gradient( center bottom, rgb(123,192,67) 2%, rgb(139,198,66) 51%, rgb(158,217,41) 87% ); -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius:5px 5px 0px 0px; border-top-left-radius:5px; border-top-right-radius:5px; }
			.table1 thead th:empty{ background:transparent; border:none; }
 
			.table1 tfoot td{color: #9CD009; font-size:32px; text-align:center; padding:5px 0px; text-shadow:1px 1px 1px #444; }
			.table1 tfoot th{color:#666;}

			.table1 tbody td{text-align:center; background-color:#DEF3CA; border: 2px solid #E7EFE0; -moz-border-radius:2px; -webkit-border-radius:2px;border-radius:2px; color:#000000; text-shadow:1px 1px 1px #fff;}
			.MenuTitle	{font-size: 14pt; color: red; font-weight: 200; }
			.MenuButtonText	{font-size: 8pt;}
			.InputText      {font-size: 8pt;}
			.subHeading     {color: red;font-size: 12pt; font-weight: 900;}
			.templateText	{color: #339900;}
			.arialText		{text-align:center; font-family:arial; font-size:8pt;font-weight:900;}

			#MenuBar {position: fixed; white-space: nowrap; top: 0px; left: 1px; width: 99%; background-color: #CCFFFF; background-image:linear-gradient(to bottom, #CCFFFF 0%, White 100%); color: black; border: #0000FF solid 1px; padding-left: 10px; z-index: 150; }
			#topDiv {position: absolute; white-space: nowrap; left: 0%; top: 25px; width: 99%; color: #333333; padding:5px; font-size: 10pt; overflow: hidden; z-index: 98; }
			#bottomDiv {position: absolute; white-space: nowrap; left: 0%; top: 600px; width: 99%; color: #333333; padding:5px; font-size: 10pt; overflow: hidden; z-index: 98; }
		</style>
		<script type="text/javascript" language="JavaScript1.2" src="/ABC/js/_Navigation.js"></script>
		<script type="text/javascript" language="JavaScript"    src="/ABC/js/popCalander.js"></script>
		<script language="JavaScript">

			var g = {};
			g.rates = new Object();
			g.rates['110'] = {"DETAILCODE":"110","RATE":"110.00","DESCRIPTION":"Description 1"} ;
			g.rates['120'] = {"DETAILCODE":"120","RATE":"37.50","DESCRIPTION":"Description 2"}  ;
			g.rates['130'] = {"DETAILCODE":"130","RATE":"345.00","DESCRIPTION":"Description 3"} ;
			g.rates['140'] = {"DETAILCODE":"140","RATE":"410.00","DESCRIPTION":"Description 4"} ;
			g.rates['150'] = {"DETAILCODE":"150","RATE":"567.00","DESCRIPTION":"Description 5"} ;
			g.rates['160'] = {"DETAILCODE":"160","RATE":"333.33","DESCRIPTION":"Description 6"} ;
			g.rates['170'] = {"DETAILCODE":"170","RATE":"222.00","DESCRIPTION":"Description 7"} ;
			g.rates['180'] = {"DETAILCODE":"180","RATE":"890.27","DESCRIPTION":"Description 8"} ;
			g.rates['190'] = {"DETAILCODE":"190","RATE":"610.00","DESCRIPTION":"Description 9"} ;
			g.rates['200'] = {"DETAILCODE":"200","RATE":"17.00","DESCRIPTION":"Description 10"} ;
			g.rates['210'] = {"DETAILCODE":"210","RATE":"22.00","DESCRIPTION":"Description 11"} ;
			g.rates['220'] = {"DETAILCODE":"220","RATE":"150.00","DESCRIPTION":"Description 12"};
			g.rates['230'] = {"DETAILCODE":"230","RATE":"11.00","DESCRIPTION":"Description 13"} ;
			g.rates['240'] = {"DETAILCODE":"240","RATE":"10.00","DESCRIPTION":"Description 14"} ;
			g.rates['250'] = {"DETAILCODE":"250","RATE":"17.00","DESCRIPTION":"Description 15"} ;
			g.rates['260'] = {"DETAILCODE":"260","RATE":"22.00","DESCRIPTION":"Description 16"} ;
			g.rates['270'] = {"DETAILCODE":"270","RATE":"150.00","DESCRIPTION":"Description 17"};
			g.rates['280'] = {"DETAILCODE":"280","RATE":"11.00","DESCRIPTION":"Description 18"} ;
			g.rates['290'] = {"DETAILCODE":"290","RATE":"11.00","DESCRIPTION":"Description 19"} ;

			function lookupRate(lineNo){
				document.getElementById("ratesDiv").style.visibility = 'visible';
				g.thisLineItem = lineNo;
			}

			function loadRate(rateItem){
				document.getElementById("DETAILCODE"+g.thisLineItem).value = g.rates[rateItem].DETAILCODE;
				document.getElementById("RATE"+g.thisLineItem).value = g.rates[rateItem].RATE;
				document.getElementById("DESCRIPTION"+g.thisLineItem).value = g.rates[rateItem].DESCRIPTION;
				document.getElementById("QUANTITY"+g.thisLineItem).select();
				document.getElementById("QUANTITY"+g.thisLineItem).focus();
				document.getElementById("ratesDiv").style.visibility = "hidden";
			}

			function loadRateDiv()
			{
				//load rates
				var tr, td;
				var tbody = document.getElementById("detailTB")
				for (var i = 1; i < 61; i++ )
				{
					//make new row
					tr = tbody.insertRow(tbody.rows.length);

					//make new cell
					td = tr.insertCell(tr.cells.length);
					//set cell attributes
					td.setAttribute("nowrap", "nowrap");
					//add cell content
					td.innerHTML =	'&nbsp;'+i+'.<a href="#" onClick="lookupRate(\''+i+'\');return false;">find</a><input type="text" size="3" maxLength="3" name="DETAILCODE'+i+'" id="DETAILCODE'+i+'" onKeyPress="return isNumber(event);" class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="10" maxLength="10" name="QUANTITY'+i+'" id="QUANTITY'+i+'" isNotEmpty(this);"class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("align", "center");
					if (i == 1)
					{	   td.innerHTML ='&nbsp;'
					}else{ td.innerHTML ='<input type="checkbox" name="DUP'+i+'" id="DUP'+i+'" class="InputText"/>'
					}
					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="8" name="DATE'+i+'" id="DATE'+i+'" class="InputText"/>' 
								
					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="3" maxLength="3" name="RPTNUM'+i+'" id="RPTNUM'+i+'" class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("nowrap", "nowrap");
					td.innerHTML =	'$<input type="text" size="10" maxLength="10" name="RATE'+i+'" id="RATE'+i+'" class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="80" maxlength="80" name="DESCRIPTION'+i+'" id  ="DESCRIPTION'+i+'" class="InputText"/>'   
				}

				var tbody = document.getElementById("tbRates")
				var obj = g.rates;
				for (var i in obj )
				{
					if (obj.hasOwnProperty(i)) 
					{
						var thisItem = obj[i];
					}

					tr = tbody.insertRow(tbody.rows.length);

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("width", "5%");
					td.innerHTML =	'<a href="#" onclick="loadRate('+thisItem.DETAILCODE+')">'+thisItem.DETAILCODE+'</a>';

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("style", "text-align:right;width:10%;");
					td.innerHTML =	"$"+thisItem.RATE;

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("style", "text-align:left;width:55%;");
					td.innerHTML =	thisItem.DESCRIPTION;

				}
			}

			function clearForm(form)
			{
				for (var i = 0; i < form.elements.length; i++)
			    {
				    var element = form.elements[i];
					var type = element.type;
			        if (type == "checkbox" || type == "radio")
				    {
						element.checked = false;
				    }
					else if (type == "hidden" || type == "password" || type == "text" ||
						     type == "textarea")
			        {
					        element.value = "";
				    }
					else if (type == "select-one" || type == "select-multiple")
			        {
						element.selectedIndex = 0
			        }
				}
			    return false;
			}
		</script>
	</head>
	<body onload="loadRateDiv()">
		<form id="testDiv">
			<div id="MenuBar" nowrap="nowrap">
				&nbsp;&nbsp;<span class="MenuTitle">Test Div Control</span>&nbsp;&nbsp;<input type="button" value="Clear Form" onclick="clearForm(this.form)" />
			</div>
			<!-- end Menu bar -->

			<div id="topDiv" style="width:95%;left:15px;white-space:nowrap;border:5px ridge #ff6600;padding:7px;background-color: #ccffcc;background-image:linear-gradient(to top, #ccff99 0%, White 100%);">
				<table align="center" border="1">
					<tr><td>&nbsp;</td><td><input type="text" size="8" class="subHeading" readonly/></td><td align="right">&nbsp;</td><td><input type="text" class="InputText" size="50" readonly/></td>
					</tr><tr><td>&nbsp;</td><td nowrap="nowrap"><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td>&nbsp;</td>
					</tr><tr><td>&nbsp;</td><td nowrap="nowrap"><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td><input type="text" size="9" class="InputText" readonly/></td>
					</tr><tr><td>&nbsp;</td><td><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td><input type="text" size="50" class="InputText" readonly/></td>
					</tr><tr><td>&nbsp;</td><td><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td><input type="text" size="50"  class="InputText" readonly /></td></tr>
				</table>
			</div>
			<div id="bottomDiv" style="width:95%;top:175px;left:15px;white-space: nowrap;border:5px ridge #ff6600;padding:7px;background-color: #ccffcc;background-image:linear-gradient(to top, #00ffff 5%, #ffff99 65%);">
				<table id="detailTable" align="center" border="2" cellpadding="1" cellspacing="0">
					<tbody id="detailTB">
						<tr><td align="center">Code</td><td align="center">Quantity</td><td align="center">Repeat<br /> Date & <br />Rpt. #</td><td align="center">Date<br />(mm/dd/yy)</td><td align="center">Report #</td><td align="center">Rate</td><td align="left">Description</td></tr>
				 </tbody>
				</table>
			</div>
			<div id="ratesDiv" style="position:fixed; border:5px ridge #006600; top :25; left:250; height:300; width:700px; overflow: scroll; background-color: #ccffcc; background-image:linear-gradient(to top, #ccff00 0%, White 100%); z-index:99; visibility: hidden;">
				<table  id="rateTable" class="table1" style="margin:auto; width:100%;">
					<thead>
						<tr>
							<td colspan="5" align="center">Lookup Rates In <font color="red"><span id="rtName"></span></font>&nbsp;&nbsp;<span style="font-family:arial; font-size:8pt; font-weight:100;"><a href="#" onclick="document.getElementById('ratesDiv').style.visibility = 'hidden';">close rate table</a></span></td>
						</tr>
						<tr>
							<th scope="col">Detail<br/>Code</th>
							<th scope="col">Rate</th>
							<th scope="col">Description</th>
						</tr>
					</thead>
					<tbody id="tbRates">
					</tbody>
				</table>	
			</div>
		</form>
	</body>
</html>

                            Comment

                            • Dormilich
                              Recognized Expert Expert
                              • Aug 2008
                              • 8694
                              #8
                              after some extended trial and error, I found the problem.

                              you fell into a semantic trap. closing the popup table is triggered as follows:
                              Code:
                              <a href="#" onclick="document.getElementById('ratesDiv').style.visibility = 'hidden';">close rate table</a>
                              translation into actions:
                              - on click, set visibility to hidden.
                              - jump to anchor # (no anchor found, using default (top))

                              solution: do not use an <a> element (or at least one without the href attribute). you have CSS at your disposal to style any element to make it look like a link.

                              side note, do not use <font>, use CSS.

                              PS. sorry for the long wait, work was eating up time to think
                              Last edited by Dormilich; Jul 3 '13, 08:29 AM.

                                Comment

                                • Claus Mygind
                                  Contributor
                                  • Mar 2008
                                  • 571
                                  #9
                                  Thanks Dormilich, works very nicely.

                                  Per your suggestion removed the href="#" from the anchors on the rate table pop div. Inserted a new css style class "simAnchor" giving me the look of a hyper link and changing the cursor to a pointer when it hovers over the link.

                                  Code:
                                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Test Div Control</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

		<style type="text/css">
			body {margin:0px; background-color:#e4e2d3;}
			table {border-spacing:0}
			tbody {font-size:10pt; color:#333333;}

			table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collapse:separate;}
			.table1 thead th{color:#fff; text-shadow:1px 1px 1px #568F23;border:1px solid #93CE37; border-bottom:3px solid #9ED929; background-color:#9DD929; background:-webkit-gradient( linear, left bottom, left top, color-stop(0.02, rgb(123,192,67)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(158,217,41)) ); background: -moz-linear-gradient( center bottom, rgb(123,192,67) 2%, rgb(139,198,66) 51%, rgb(158,217,41) 87% ); -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -moz-border-radius:5px 5px 0px 0px; border-top-left-radius:5px; border-top-right-radius:5px; }
			.table1 thead th:empty{ background:transparent; border:none; }
 
			.table1 tfoot td{color: #9CD009; font-size:32px; text-align:center; padding:5px 0px; text-shadow:1px 1px 1px #444; }
			.table1 tfoot th{color:#666;}

			.table1 tbody td{text-align:center; background-color:#DEF3CA; border: 2px solid #E7EFE0; -moz-border-radius:2px; -webkit-border-radius:2px;border-radius:2px; color:#000000; text-shadow:1px 1px 1px #fff;}
			.MenuTitle	{font-size: 14pt; color: red; font-weight: 200; }
			.MenuButtonText	{font-size: 8pt;}
			.InputText      {font-size: 8pt;}
			.subHeading     {color: red;font-size: 12pt; font-weight: 900;}
			.templateText	{color: #339900;}
			.arialText		{text-align:center; font-family:arial; font-size:8pt;font-weight:900;}
			[B].simAnchor		{text-decoration:underline; color:blue;font-weight:900;cursor:pointer;}[/B]

			#MenuBar {position: fixed; white-space: nowrap; top: 0px; left: 1px; width: 99%; background-color: #CCFFFF; background-image:linear-gradient(to bottom, #CCFFFF 0%, White 100%); color: black; border: #0000FF solid 1px; padding-left: 10px; z-index: 150; }
			#topDiv {position: absolute; white-space: nowrap; left: 0%; top: 25px; width: 99%; color: #333333; padding:5px; font-size: 10pt; overflow: hidden; z-index: 98; }
			#bottomDiv {position: absolute; white-space: nowrap; left: 0%; top: 600px; width: 99%; color: #333333; padding:5px; font-size: 10pt; overflow: hidden; z-index: 98; }
		</style>
		<script type="text/javascript" language="JavaScript1.2" src="/ABC/js/_Navigation.js"></script>
		<script type="text/javascript" language="JavaScript"    src="/ABC/js/popCalander.js"></script>
		<script language="JavaScript">

			var g = {};
			g.rates = new Object();
			g.rates['110'] = {"DETAILCODE":"110","RATE":"110.00","DESCRIPTION":"Description 1"} ;
			g.rates['120'] = {"DETAILCODE":"120","RATE":"37.50","DESCRIPTION":"Description 2"}  ;
			g.rates['130'] = {"DETAILCODE":"130","RATE":"345.00","DESCRIPTION":"Description 3"} ;
			g.rates['140'] = {"DETAILCODE":"140","RATE":"410.00","DESCRIPTION":"Description 4"} ;
			g.rates['150'] = {"DETAILCODE":"150","RATE":"567.00","DESCRIPTION":"Description 5"} ;
			g.rates['160'] = {"DETAILCODE":"160","RATE":"333.33","DESCRIPTION":"Description 6"} ;
			g.rates['170'] = {"DETAILCODE":"170","RATE":"222.00","DESCRIPTION":"Description 7"} ;
			g.rates['180'] = {"DETAILCODE":"180","RATE":"890.27","DESCRIPTION":"Description 8"} ;
			g.rates['190'] = {"DETAILCODE":"190","RATE":"610.00","DESCRIPTION":"Description 9"} ;
			g.rates['200'] = {"DETAILCODE":"200","RATE":"17.00","DESCRIPTION":"Description 10"} ;
			g.rates['210'] = {"DETAILCODE":"210","RATE":"22.00","DESCRIPTION":"Description 11"} ;
			g.rates['220'] = {"DETAILCODE":"220","RATE":"150.00","DESCRIPTION":"Description 12"};
			g.rates['230'] = {"DETAILCODE":"230","RATE":"11.00","DESCRIPTION":"Description 13"} ;
			g.rates['240'] = {"DETAILCODE":"240","RATE":"10.00","DESCRIPTION":"Description 14"} ;
			g.rates['250'] = {"DETAILCODE":"250","RATE":"17.00","DESCRIPTION":"Description 15"} ;
			g.rates['260'] = {"DETAILCODE":"260","RATE":"22.00","DESCRIPTION":"Description 16"} ;
			g.rates['270'] = {"DETAILCODE":"270","RATE":"150.00","DESCRIPTION":"Description 17"};
			g.rates['280'] = {"DETAILCODE":"280","RATE":"11.00","DESCRIPTION":"Description 18"} ;
			g.rates['290'] = {"DETAILCODE":"290","RATE":"11.00","DESCRIPTION":"Description 19"} ;

			function lookupRate(lineNo){
				document.getElementById("ratesDiv").style.visibility = 'visible';
				g.thisLineItem = lineNo;
			}

			function loadRate(rateItem){
				document.getElementById("DETAILCODE"+g.thisLineItem).value = g.rates[rateItem].DETAILCODE;
				document.getElementById("RATE"+g.thisLineItem).value = g.rates[rateItem].RATE;
				document.getElementById("DESCRIPTION"+g.thisLineItem).value = g.rates[rateItem].DESCRIPTION;
				document.getElementById("QUANTITY"+g.thisLineItem).select();
				document.getElementById("QUANTITY"+g.thisLineItem).focus();
				document.getElementById("ratesDiv").style.visibility = "hidden";
			}

			function loadRateDiv()
			{
				//load rates
				var tr, td;
				var tbody = document.getElementById("detailTB")
				for (var i = 1; i < 61; i++ )
				{
					//make new row
					tr = tbody.insertRow(tbody.rows.length);

					//make new cell
					td = tr.insertCell(tr.cells.length);
					//set cell attributes
					td.setAttribute("nowrap", "nowrap");
					//add cell content
					td.innerHTML =	'&nbsp;'+i+'.<a href="#'+i+'" onClick="lookupRate(\''+i+'\');return false;">find</a><a id='+i+'></a><input type="text" size="3" maxLength="3" name="DETAILCODE'+i+'" id="DETAILCODE'+i+'" onKeyPress="return isNumber(event);" class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="10" maxLength="10" name="QUANTITY'+i+'" id="QUANTITY'+i+'" isNotEmpty(this);"class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("align", "center");
					if (i == 1)
					{	   td.innerHTML ='&nbsp;'
					}else{ td.innerHTML ='<input type="checkbox" name="DUP'+i+'" id="DUP'+i+'" class="InputText"/>'
					}
					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="8" name="DATE'+i+'" id="DATE'+i+'" class="InputText"/>' 
								
					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="3" maxLength="3" name="RPTNUM'+i+'" id="RPTNUM'+i+'" class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("nowrap", "nowrap");
					td.innerHTML =	'$<input type="text" size="10" maxLength="10" name="RATE'+i+'" id="RATE'+i+'" class="InputText"/>'

					td = tr.insertCell(tr.cells.length);
					td.innerHTML =	'<input type="text" size="80" maxlength="80" name="DESCRIPTION'+i+'" id  ="DESCRIPTION'+i+'" class="InputText"/>'   
				}

				var tbody = document.getElementById("tbRates")
				var obj = g.rates;
				for (var i in obj )
				{
					if (obj.hasOwnProperty(i)) 
					{
						var thisItem = obj[i];
					}

					tr = tbody.insertRow(tbody.rows.length);

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("width", "5%");
					td.innerHTML =	'<a  onclick="loadRate('+thisItem.DETAILCODE+')" [B]class="simAnchor"[/B]>'+thisItem.DETAILCODE+'</a>';

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("style", "text-align:right;width:10%;");
					td.innerHTML =	"$"+thisItem.RATE;

					td = tr.insertCell(tr.cells.length);
					td.setAttribute("style", "text-align:left;width:55%;");
					td.innerHTML =	thisItem.DESCRIPTION;

				}
			}

			function clearForm(form)
			{
				for (var i = 0; i < form.elements.length; i++)
			    {
				    var element = form.elements[i];
					var type = element.type;
			        if (type == "checkbox" || type == "radio")
				    {
						element.checked = false;
				    }
					else if (type == "hidden" || type == "password" || type == "text" ||
						     type == "textarea")
			        {
					        element.value = "";
				    }
					else if (type == "select-one" || type == "select-multiple")
			        {
						element.selectedIndex = 0
			        }
				}
			    return false;
			}
		</script>
	</head>
	<body onload="loadRateDiv()">
		<form id="testDiv">
			<div id="MenuBar" nowrap="nowrap">
				&nbsp;&nbsp;<span class="MenuTitle">Test Div Control</span>&nbsp;&nbsp;<input type="button" value="Clear Form" onclick="clearForm(this.form)" />
			</div>
			<!-- end Menu bar -->

			<div id="topDiv" style="width:95%;left:15px;white-space:nowrap;border:5px ridge #ff6600;padding:7px;background-color: #ccffcc;background-image:linear-gradient(to top, #ccff99 0%, White 100%);">
				<table align="center" border="1">
					<tr><td>&nbsp;</td><td><input type="text" size="8" class="subHeading" readonly/></td><td align="right">&nbsp;</td><td><input type="text" class="InputText" size="50" readonly/></td>
					</tr><tr><td>&nbsp;</td><td nowrap="nowrap"><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td>&nbsp;</td>
					</tr><tr><td>&nbsp;</td><td nowrap="nowrap"><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td><input type="text" size="9" class="InputText" readonly/></td>
					</tr><tr><td>&nbsp;</td><td><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td><input type="text" size="50" class="InputText" readonly/></td>
					</tr><tr><td>&nbsp;</td><td><input type="text" size="60" class="InputText" readonly/></td><td>&nbsp;</td><td><input type="text" size="50"  class="InputText" readonly /></td></tr>
				</table>
			</div>
			<div id="bottomDiv" style="width:95%;top:175px;left:15px;white-space: nowrap;border:5px ridge #ff6600;padding:7px;background-color: #ccffcc;background-image:linear-gradient(to top, #00ffff 5%, #ffff99 65%);">
				<table id="detailTable" align="center" border="2" cellpadding="1" cellspacing="0">
					<tbody id="detailTB">
						<tr><td align="center">Code</td><td align="center">Quantity</td><td align="center">Repeat<br /> Date & <br />Rpt. #</td><td align="center">Date<br />(mm/dd/yy)</td><td align="center">Report #</td><td align="center">Rate</td><td align="left">Description</td></tr>
				 </tbody>
				</table>
			</div>
			<div id="ratesDiv" style="position:fixed; border:5px ridge #006600; top :25; left:250; height:300; width:700px; overflow: scroll; background-color: #ccffcc; background-image:linear-gradient(to top, #ccff00 0%, White 100%); z-index:99; visibility: hidden;">
				<table  id="rateTable" class="table1" style="margin:auto; width:100%;">
					<thead>
						<tr>
							<td colspan="5" align="center">Lookup Rates In <font color="red"><span id="rtName"></span></font>&nbsp;&nbsp;<span style="font-family:arial; font-size:8pt; font-weight:100;"><a href="#" onclick="document.getElementById('ratesDiv').style.visibility = 'hidden';">close rate table</a></span></td>
						</tr>
						<tr>
							<th scope="col">Detail<br/>Code</th>
							<th scope="col">Rate</th>
							<th scope="col">Description</th>
						</tr>
					</thead>
					<tbody id="tbRates">
					</tbody>
				</table>	
			</div>
		</form>
	</body>
</html>
                                  Last edited by Claus Mygind; Jul 5 '13, 12:41 PM. Reason: Highlighting changes

                                    Comment

                                    Previous template Next
                                    Working...