shamus245
08-27-2010, 01:21 PM
I have created a page to display table content onclick. So if you choose florida it will display the table content for florida. The issue is that it is displaying the content further and further down on the page. How can I remedy this so all of the tables open up at the top of the page?
Here is some sample code:
JAVASCRIPT
var ids=new Array('states','az','ca','co','ct','dc','fl');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
HTML Basic code
<a href="javascript:switchid('states');">All States</a> <a href="javascript:switchid('az');">AZ</a> <a href="javascript:switchid('ca');">CA</a>
<div id="states" style="display:block;">
<table width="100%" border="0">
<tr>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Location</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Date & Time</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Event</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Venue</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Counselor</font>
</td>
</tr>
<tr>
<td valign="top">
CT, Litchfield
</td>
<td valign="top">
Septemeber 15, 6:30 - 9:00 pm
</td>
<td valign="top">
College Fair
</td>
<td valign="top">
Litchfield HS
</td>
<td valign="top">
test
</td>
</tr>
</table></div>
<!---------------- DC ------------------------>
<div id="dc" style="display:block;">
<table width="100%" border="0">
<tr>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Location</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Date & Time</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Event</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Venue</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Counselor</font>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f1f0f0">
DC, Washingon
</td>
<td valign="top" bgcolor="#f1f0f0">
October 12, 9:00 am - 1:00 pm
</td>
<td valign="top" bgcolor="#f1f0f0">
College Fair
</td>
<td valign="top" bgcolor="#f1f0f0">
Greater Washington DC National Fair
</td>
<td valign="top" bgcolor="#f1f0f0">
test
</td>
</tr>
</table></div>
Here is some sample code:
JAVASCRIPT
var ids=new Array('states','az','ca','co','ct','dc','fl');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
HTML Basic code
<a href="javascript:switchid('states');">All States</a> <a href="javascript:switchid('az');">AZ</a> <a href="javascript:switchid('ca');">CA</a>
<div id="states" style="display:block;">
<table width="100%" border="0">
<tr>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Location</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Date & Time</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Event</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Venue</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Counselor</font>
</td>
</tr>
<tr>
<td valign="top">
CT, Litchfield
</td>
<td valign="top">
Septemeber 15, 6:30 - 9:00 pm
</td>
<td valign="top">
College Fair
</td>
<td valign="top">
Litchfield HS
</td>
<td valign="top">
test
</td>
</tr>
</table></div>
<!---------------- DC ------------------------>
<div id="dc" style="display:block;">
<table width="100%" border="0">
<tr>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Location</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Date & Time</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Event</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Venue</font>
</td>
<td valign="top" bgcolor="#551a8b">
<font color="#FFFFFF">Counselor</font>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f1f0f0">
DC, Washingon
</td>
<td valign="top" bgcolor="#f1f0f0">
October 12, 9:00 am - 1:00 pm
</td>
<td valign="top" bgcolor="#f1f0f0">
College Fair
</td>
<td valign="top" bgcolor="#f1f0f0">
Greater Washington DC National Fair
</td>
<td valign="top" bgcolor="#f1f0f0">
test
</td>
</tr>
</table></div>