...

View Full Version : Tables displaying further and further down the page



shamus245
08-27-2010, 02: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>

brayaland
08-27-2010, 03:03 PM
Do you want to own some useful iPad software (http://www.ipadsofts.net/product.html) to help you enjoy iPad easier? I know this DVD to iPad Converter (http://www.ipadsofts.net/dvd-to-ipad-converter/) can help you rip DVDs to iPad video formats with best output quality and fastest conversion speed. Or if you get some PDF files and you want to enjoy them on your iPad, then this PDF to ePub Converter (http://www.ipadsofts.net/pdf-to-epub-maker/) is your best choice. And iPad manager for ePub (http://www.ipadsofts.net/ipad-manager-for-epub/) is also nice for you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum