Menu
In the following script I have two things I don’t understand:
1.
The ‘Next’ button should float to the right side of the container
but it does a new line before doing so. What interactions am I missing that causes this.
The <B> tag is defined to align the text as centered. It doesn’t.
Are the problems I’m having related is some way?
The only elements I have successfully positioned (centered) are the radio buttons!
[code]
<html>
<head>
<title>Page Control</title>
<script type=”text/javascript”>
var currentPage = 0;
function PgDisplay(setPg,direction) {
var PgColors = [‘yellow’,’cyan’,’orange’,’pink’,’lightgreen’];
var maxPg = PgColors.length;
if (direction != 0) { currentPage = currentPage + direction; }
else { currentPage = setPg; }
if (currentPage < 0) { currentPage = 0; }
if (currentPage >= maxPg) { currentPage = maxPg-1; }
var Pg = ”;
for (var i=0; i<maxPg; i++) {
Pg = ‘Page’+i;
document.getElementById(Pg).style.display = ‘none’;
}
Pg = ‘Page’+currentPage;
document.getElementById(Pg).style.display = ‘block’;
document.getElementById(Pg).style.backgroundColor = PgColors[currentPage];
/* sets currentPage to radio button, if option used */
document.forms[0].RBtnPg[currentPage].checked = true;
currentPage = getRBtnName(‘RBtnPg’); if (currentPage < 0) { currentPage = 0; }
}
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = ”;
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd; // return option index of selection
// comment out next line if option index used in line above
// return str;
}
</script>
<style type=”text/css”>
b { text-align:center; }
#container {
border: 1px solid blue;
width: 500px;
position:fixed; /* relative; alters slightly */
top:50px;
left:300px;
}
.PgCtrl {
height:250px;
display:none;
}
.RBtnCtrl {
width:33%;
margin-left:auto;
margin-right:auto;
/* if used, screws up 3 centering lines above
float:left;
if not used, screws up ‘Next’ button position
*/
}
</style>
</head>
<body onload=”PgDisplay(0,0)”>
<form name=”MyForm” onsubmit=”return false”>
<div id=”container”>
<div id=”Page0″ class=”PgCtrl”><b>Heading of Page 1</b></div>
<div id=”Page1″ class=”PgCtrl”>Contents of Page 2</div>
<div id=”Page2″ class=”PgCtrl”>Information of Page 3</div>
<div id=”Page3″ class=”PgCtrl”>Details of Page 4</div>
<div id=”Page4″ class=”PgCtrl”><b>Comments of Page 5</b></div>
<button onclick=”PgDisplay(0,-1)” style=”float:left”>Back</button>
<!– Optional –>
<div class=”RBtnCtrl”>
<input type=”radio” name=”RBtnPg” value=’0′ onclick=”PgDisplay(this.value,0)” checked>
<input type=”radio” name=”RBtnPg” value=’1′ onclick=”PgDisplay(this.value,0)”>
<input type=”radio” name=”RBtnPg” value=’2′ onclick=”PgDisplay(this.value,0)”>
<input type=”radio” name=”RBtnPg” value=’3′ onclick=”PgDisplay(this.value,0)”>
<input type=”radio” name=”RBtnPg” value=’4′ onclick=”PgDisplay(this.value,0)”>
</div>
<!– –>
<button onclick=”PgDisplay(0,1)” style=”float:right”>Next</button>
</div>
<span style=”clear:both”></span>
</form>
</body>
</html>