Menu
The following code is a template for a larger project.
I will be replacing the “TEXT FILE” with information from a AJAX file load.
(I have that part loading the text file correctly so I think I have eliminated that as a source of error).
The code is self contained as I have commented out the links to the CSS (followed by the CSS file contents internally).
[COLOR=”Red”][SIZE=”5″]Here’s my problem.
If you execute the script, the extra long initial display in the “PageInfo” div section wraps as expected. ?
If you select the TEST FILE and click on the “Setup” button, the information within the <div> is replaced with the text information as expected, but now it does not wrap correctly within the PageInfo section as previously shown upon entering the program. The text extends beyond the limits of the orange box and I don’t see what I’m doing wrong. 😮
The internal string simulates the contents of the AJAX load and both versions do the same type of display problem (no wrap).
You can use the ‘<<‘, ‘<‘, ‘>’ and ‘>>’ buttons to see other displays.
Any ideas where I’m going wrong or should I post to the CSS forum instead? ?
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”viewport” content=”width=device-width”>
<head>
<title>Review</title>
<!– link href=”review.css” type=”text/css” rel=”stylesheet” –>
<style type=”text/css”>
/* OpticsReview.css */
.TArea { display:none; }
.PageInfo {
height:300px;
width:290px;
min-height:50%;
border:1px solid blue;
background-color:orange;
}
@media print { body { font-size: 16pt } }
@media screen { body { font-size: 20px } }
@media handheld { body { font-size: 24px } }
@media screen, print { body { line-height: 1.2 } }
</style>
<script type=”text/javascript”>
var recs = [];
var PagePtr = [];
var currPage = 0;
function SetupReview() {
PagePtr = [];
recs = [];
recs = document.getElementById(‘TArea’).value.split(/rn|n/g);
// alternative attemptsss
// var re = new RegExp(“rn|n”,’g’);
// recs = document.getElementById(‘TArea’).value.split(re);
recs.pop();
recs.unshift(‘n’);
PagePtr.push(0);
for (var i=0; i<recs.length; i++) { if (recs[i] == ”) { PagePtr.push(i); } }
currPage = 0;
PageDisplay();
}
function PageDisplay() {
var str = ”;
var tmp = ”;
var start = PagePtr[currPage];
var stop = PagePtr[currPage+1];
for (i=start+1; i<stop; i++) {
tmp = recs[i].replace(/t/g,’ ’);
tmp = tmp.replace(/s/g,’ ’);
str += tmp+'<br>’;
}
document.getElementById(‘PageInfo’).innerHTML = str;
}
function firstPage() {
currPage = 0;
PageDisplay();
}
function prevPage() {
if (currPage < 1) { currPage = 0; }
else { currPage–; }
PageDisplay();
}
function nextPage() {
if (currPage < PagePtr.length-2) { currPage++; }
else { currPage = PagePtr.length-2; }
PageDisplay();
}
function lastPage() {
currPage = PagePtr.length-2;
PageDisplay();
}
</script>
</head>
<body>
<noscript><h1>Javascript must be enabled to utilize this Review.</h1></noscript>
Load file:
<select onchange=”LoadFile(this.value)”>
<option value=””>Select file</option>
<option value=””>TEST FILE</option>
</select>
<button onclick=”SetupReview()”>Setup</button>
<br>
<button onclick=”firstPage()”> << </button>
<button onclick=”prevPage()”> < </button>
<button onclick=”nextPage()”> > </button>
<button onclick=”lastPage()”> >> </button>
<!– <span id=”debug”></span> –>
<div id=”PageInfo” class=”PageInfo”>
This is a extra long piece of code that should wrap around in the designated display area.
I have intentionally made it very long to show that the wrap function works correctly at this point.
</div>
<script type=”text/javascript”>
function LoadFile(fname) {
TestDivDisplay(); return;
}
</script>
<script type=”text/javascript”>
function TestDivDisplay() {
var tstr = ”;
tstr += ‘ANTERIOR STRUCTURES and EYELIDSn’;
tstr += ‘n’;
tstr += ‘Authors:tTBAtTBAtTBAtTBAtTBAn’;
tstr += ‘n’;
tstr += ‘1. Placement position of the eye in the orbitn’;
tstr += ‘n’;
tstr += ‘Closer lateral than medialn’;
tstr += ‘Closer to the roof than the floorn’;
tstr += ‘Orbit is 5x bigger than the eyetAllows for orbital fat protectionn’;
tstr += ‘n’;
tstr += ‘2. Layers (tunics) of the Globe (3) in the human eyen’;
tstr += ‘n’;
tstr += ‘* Outer Tunic t Fibrous Tunicn’;
tstr += ‘* Middle Tunic t Vascular Tunicn’;
tstr += ‘* Inner Tunic t Sensory Tunicn’;
tstr += ‘** periosteum t layer of the dura mater that lines the orbitn’;
tstr += ‘n’;
tstr += ‘3. Outer Layer of the Globe n’;
tstr += ‘n’;
tstr += ‘* Outer Tunic – Fibrous Tunicn’;
tstr += ‘to Cornean’;
tstr += ‘* Constant diametern’;
tstr += ‘to Scleran’;
tstr += ‘* Varied diametern’;
tstr += ‘* Surrounded by Tenon’s capsulen’;
tstr += ‘* A layer of dura mater that wraps around the globe on top of the sclera, under the bulbar conjunctivan’;
tstr += ‘to Inserts at limbusn’;
tstr += ‘to Fibrous and tough collagenn’;
tstr += ‘n’;
document.getElementById(‘TArea’).value = tstr;
SetupReview();
}
</script>
<textarea id=”TArea” class=”TArea” rows=”30″ cols=”60″></textarea>
</body>
</html>