PDA

Click to See Complete Forum and Search --> : [RESOLVED] Extra Line not wanted

ryanmkilt
10-20-2008, 07:26 AM
Hi, Every time I click one of my 4 buttons, it adds an extra line between my output and my buttons. Below is my listed code:

<body>
<h2>TITLE</h2>
<table class = "element" align="center" width="500">
<tr class = "element">
<td class="element">
<form id="disp" name="disp">
<input type="button" class="button" name="go" id="go" value="button1" onclick="displayTable(); this.disabled=true; document.getElementById('go2').disabled=false; document.getElementById('SortSt').style.display='inline'; document.getElementById('SortD').style.display='inline'"/></div>
</td>
<td class="element">
<form id="disp2" name="disp2">
<input type="button" class="button" name="go2" id="go2" value="Parameters" onclick="displayP(); this.disabled=true; document.getElementById('go').disabled=false; document.getElementById('SortSt').style.display='none'; document.getElementById('SortD').style.display='none';"/></div>
</td>
</tr>
</table>
<table width="1945" border="0">
<tr>
<td class="srtLeft">
<input type="button" value="Sort" id="SortD" style="display:none" onclick="displaySrtD();">
</td>
<td class="srtRight">
<input type="button" value="SortA" id="SortSt" style="display:none" onclick="displaySrtSt();">
</td>
</tr>
</table>
<div id="tbl"></div>
<div id="tabl"></div>
<div id="sortMe"></div>
<div id="sortDb"></div>
</body>

An example of my problem would be:

--BUTTON 1 - (gets clicked)--

OUTPUT COMES HERE (1 line between)

--BUTTON 2 (gets clicked)--


OUTPUT COMES HERE (2 lines between)


....and so on....if you notice there is an extra space between the buttons and the output. One button puts 2 lines of space, 1 does 3, and 1 does 4 lines. I think it has somethign to do w/ the <div> tags. Can anyone help?
Fang
10-21-2008, 09:07 AM
Where is BUTTON 2 ?
Please give a complete document.
gabriele
10-21-2008, 09:19 AM
Your code is a mess ..

you open form elements and close divs..

you do not include the scripts..

please provide the full page code.. otherwise it is impossible to offer any help..
starheartbeam
10-21-2008, 02:35 PM
Yes full code please
and please put your code in tags so that it is easier to read.
ryanmkilt
10-22-2008, 06:24 AM
Here is just about all the code: - when the tables print out, they skip an extra line down. For example when I run DisplayTTT - it is good, but when I run DisplayPpp - it jumps an extra line down, and the same with the other 2. DisplaySss jumps 2 lines down and the last one jumps 3 lines down. I'm almost positive it has something to do with the DIV tags.

body { background-color: white; font-family: Arial}

td {border: solid #000 1px; width: 150px; font-family: Arial; font-size:14px; background-color: #f5fffa; font-weight: bold}

th {font-weight: bold; border: solid #000 1px; background-color: #CCCCFF; font-size: 14px; font-family: Arial}

.srtRight {border: none; align: right; background-color: white;}

.srtLeft {border: none; align: left; background-color: white;}

.element {border: none; background-color: #FFFFFF}

.element td {border: none}

input.button {width: 12em; height: 2.5em; background-color: green; color: white; font-weight: bold}

</style>

<script language="JavaScript" type="text/javascript">

<!--Function will display ttt.txt-->
function displayTtt() {
document.getElementById('tbl').innerHTML = '';
document.getElementById('tabl').innerHTML = '';
document.getElementById('sortMe').innerHTML = '';
document.getElementById('sortDb').innerHTML = '';
var filename = "ttt.txt";
var txt = IO(filename);
var lines = txt.split(/\r?\n/g);
var header = lines[0].split("|");
var tbl = "<table>\n<tr>";
for (var j = 0; j < header.length; j++) {
tbl += "<th>" + header[j] + "</th>\n";
}
tbl += "</tr>";
for (var i = 1; i < lines.length; i++) {
tbl += "<tr>";
var line = lines[i].split("|");
for (var j = 0; j < line.length; j++) {
tbl += "<td>" + line[j] + "</td>\n";
}
tbl += "</tr>";
}
tbl += "<table>";
var divForTable = document.getElementById("tbl");
divForTable.innerHTML = tbl;
}


<!--Function will display sss.txt-->
function displaySrtSss() {
document.getElementById('tbl').innerHTML = '';
document.getElementById('tabl').innerHTML = '';
document.getElementById('sortMe').innerHTML = '';
document.getElementById('sortDb').innerHTML = '';
var filenamec = "sss.txt";
var txt = IO(filenamec);
var lines = txt.split(/\r?\n/g);
var header = lines[0].split("|");
var sortMe = "<table>\n<tr>";
for (var j = 0; j < header.length; j++) {
sortMe += "<th>" + header[j] + "</th>\n";
}
sortMe += "</tr>";
for (var i = 1; i < lines.length; i++) {
sortMe += "<tr>";
var line = lines[i].split("|");
for (var j = 0; j < line.length; j++) {
sortMe += "<td>" + line[j] + "</td>\n";
}
sortMe += "</tr>";
}
sortMe += "<table>";
var divForTable = document.getElementById("sortMe");
divForTable.innerHTML = sortMe;
}

<!--Function will display ddd.txt-->
function displaySrtDdd() {
document.getElementById('tbl').innerHTML = '';
document.getElementById('tabl').innerHTML = '';
document.getElementById('sortMe').innerHTML = '';
document.getElementById('sortDb').innerHTML = '';
var filenamed = "ddd.txt";
var txt = IO(filenamed);
var lines = txt.split(/\r?\n/g);
var header = lines[0].split("|");
var sortDb = "<table>\n<tr>";
for (var j = 0; j < header.length; j++) {
sortDb += "<th>" + header[j] + "</th>\n";
}
sortDb += "</tr>";
for (var i = 1; i < lines.length; i++) {
sortDb += "<tr>";
var line = lines[i].split("|");
for (var j = 0; j < line.length; j++) {
sortDb += "<td>" + line[j] + "</td>\n";
}
sortDb += "</tr>";
}
sortDb += "<table>";
var divForTable = document.getElementById("sortDb");
divForTable.innerHTML = sortDb;
}


<!--Function will display ppp.txt-->
function displayPpp() {
document.getElementById('tbl').innerHTML = '';
document.getElementById('tabl').innerHTML = '';
document.getElementById('sortMe').innerHTML = '';
document.getElementById('sortDb').innerHTML = '';
var filenamea = "ppp.txt";
var txt = IO(filenamea);
var lines = txt.split(/\r?\n/g);
var header = lines[0].split("|");
var tabl = "<table>\n<tr>";
for (var j = 0; j < header.length; j++) {
tabl += "<th>" + header[j] + "</th>\n";
}
tabl += "</tr>";
for (var i = 1; i < lines.length; i++) {
tabl += "<tr>";
var line = lines[i].split("|");
for (var j = 0; j < line.length; j++) {
tabl += "<td>" + line[j] + "</td>\n";
}
tabl += "</tr>";
}
tabl += "<table>";
var divForTable = document.getElementById("tabl");
divForTable.innerHTML = tabl;
}

<!--Function will read from file and convert to HTML-->
function IO(U, V) {
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, !1);
X.setRequestHeader('Content-Type', 'text/html')
X.send(V ? V : '');
return X.responseText;
}

</script>

</head>

<body>

<table class = "element" align="center" width="500">
<tr class = "element">
<td class="element">
<form id="disp" name="disp">
<input type="button" class="button" name="go" id="go" value="TTT" onclick="displayTtt(); this.disabled=true; document.getElementById('go2').disabled=false; document.getElementById('SortSss').style.display='inline'; document.getElementById('SortDdd').style.display='inline'"/></div>
</td>
<td class="element">
<form id="disp2" name="disp2">
<input type="button" class="button" name="go2" id="go2" value="PPP" onclick="displayPpp(); this.disabled=true; document.getElementById('go').disabled=false; document.getElementById('SortSss').style.display='none'; document.getElementById('SortDdd').style.display='none';"/></div>
</td>
</tr>
</table>
<table width="1126px" border="1">
<tr>
<td class="srtLeft">
<input type="button" value="Sort By DDD" id="SortDdd" style="display:none" onclick="displaySrtDdd();">
</td>
<td class="srtRight">
<input type="button" value="Sort By SSS" id="SortSss" style="display:none" onclick="displaySrtSss();">
</td>
</tr>
</table>
<div id="tbl"></div>
<div id="tabl"></div>
<div id="sortMe"></div>
<div id="sortDb"></div>
</body>
</html>
Fang
10-22-2008, 06:59 AM
Add: table {border-collapse:collapse;}
Change the innerHTML to display (all functions):function displayPpp() {
document.getElementById('tbl').style.display = 'none';
document.getElementById('tabl').style.display = '';
document.getElementById('sortMe').style.display = 'none';
document.getElementById('sortDb').style.display = 'none';
.
.
ryanmkilt
10-22-2008, 07:27 AM
Thanks so much - works perfect now!