...

View Full Version : javascript select divs



mulder
01-05-2012, 12:34 PM
Hello guys, I am working with javascript and currently have the below code set up.

This works well, however I would like to change the "select box" to a "search box"-

When the user enters a search string, the matching DIV appears. If there is no matching DIV then "sorry nothing found" appears.

Is this possible at all?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<=count;i++)
document.getElementById('fleet'+i).style.display = 'none';
if(no>0)
document.getElementById('fleet'+no).style.display = 'block';
}
</script>


<form name="myForm">
<select onchange="show(this)">
<option value="1">Please Choose</option>
<option value="2">120</option>
<option value="3">121</option>
<option value="4">122</option>

</select>
</form>



<div id="fleet1" style="display:block">Please Choose <br>
</div>



<div id="fleet2" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"

bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/120.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>



<div id="fleet3" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"

bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/121.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>

<div id="fleet4" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"

bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/122.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>
</body>
</html>
demo can be seen here:
http://www.nctfleetlist.co.uk/div.php

xelawho
01-05-2012, 03:19 PM
this seems to work. if you are planning on adding alot of fleets to the table I would suggest renaming your divs to match their fleet number, then it will become alot simpler, but if there are just a few, this should do...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
if (showndiv){document.getElementById(showndiv).style.display = 'none';}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
}
document.getElementById(showndiv).style.display = 'block';
}
</script>


<form name="myForm">
<input type="text" id="tb">
<input type="button" value="please choose" onclick="show()">
</form>



<div id="fleet1" style="display:block"><br>
</div>


<div id="fleet2" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W599 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>

</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>


<div id="fleet3" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W601 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>

</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>

<div id="fleet4" style="display:none"> <br>

<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>

</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">122</FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W602 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>

</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>

mulder
01-05-2012, 09:17 PM
That is fantastic, exactly what I was looking for! Thank you so much for your time and effort, I appreciate it!

Just a quick niggle; when the user enters text that is not found (I believe it has been labelled "default" - the text "Sorry, nothing found" is displayed. If the user then searches again and the div is found, the default text remains. Is it easy enough to hide this text once a correct search term has been found? -

Before replying I did try and create a "clear" button, which I hoped would 'hide' the default text, while showing the correct div.
I also looked at the "else if" code ...


} else {
hide();
$('#fleet1').show();

and doing a loop...


for(x=1; x<totalContents; x++) {
if(document.getElementById('fleet3'+x).style.display=='block') {
document.getElementById('fleet1'+x).style.display='none';
} else {
document.getElementById('fleet'+x).style.display='block';
}
}

Still struggling, is there a simpler way to do this?

Many thanks

xelawho
01-05-2012, 09:23 PM
sorry I didn't notice that. there is a simpler way - at the start of the show() function, just change the if statement to this:


if (showndiv){document.getElementById(showndiv).style.display = 'none';
document.getElementById('fleet1').innerHTML="";
}
:thumbsup:

mulder
01-05-2012, 09:59 PM
Cool, that worked but only if I press the "please choose" button twice, (once displays the correct div with the default text and when pressed again the default text is cleared) and notoriously it works flawlessly every time the search is used after the first time

Which is weird; why would it not work as it should? ( I have tested with Chrome and IE)


If you have the time for another quick look the link is below. Don't worry if not, you have done more than enough!!


http://www.nctfleetlist.co.uk/div3.php

Cheers

xelawho
01-05-2012, 10:24 PM
ah, I get it. good thing you're doing the testing on this one :D

so, just take this line out of the if statement:


document.getElementById('fleet1').innerHTML="";

and put it before it (ie, at the start of the function)

and then I think you're good to go.

mulder
01-06-2012, 01:41 PM
That's done it!

Thanks so much for your help, time and effort! I hope you win the 'most helpful member' award, all the best :)

mulder
01-11-2012, 01:49 PM
Hello, me again!

Just wondering, when the above is finished it will contain over 300+ hidden divs thus taking the load time of the page to unrealistic levels.

Is there a way of making it so either;

a) when a user clicks "search" a new page opens and the function displays the correct div
or

b) display a link that, when clicked performs an 'include' function that will display the page that contains the function and divs.

Thanks in advance.

xelawho
01-11-2012, 04:19 PM
I would think carefully about either of those options before going too far down that road.

If I understand what you're proposing, it will mean making 300+ pages of nearly identical content. And possibly the time saved in initial page load will be eaten up as the user has to navigate back and forth between separate pages.

Here's what I would be doing:

Presumably you have all of this information in a database already. Connect the database to the page. On page load (or whenever you decide) the database dumps just the relevant details (Fleet, Registration, Chassis, Body, Seating and Brand) of each available item into the page's "memory" then when the user chooses that fleet number the code constructs one div (the same div, really) and just fills in the relevant blanks.

The page load is much quicker because there will be 1/300th of the html.

It sounds complicated, but it's not, and if you have that database it will probably be the most efficient way to do this (in terms of setup, modifying details later and load times).

That's what I think anyway, without having done speed testing on any of this. Below is a small example with the "database" hardcoded. Let me know what you reckon.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
function show() {
theval=document.getElementById('tb').value;
for (var i=0; i<fleets.length; i++) {
if (fleets[i][0]==theval){
document.getElementById("message").style.display = 'none';
document.getElementById('fleet').innerHTML=fleets[i][0]
document.getElementById('reg').innerHTML=fleets[i][1]
document.getElementById('chassis').innerHTML=fleets[i][2]
document.getElementById('body').innerHTML=fleets[i][3]
document.getElementById('seating').innerHTML=fleets[i][4]
document.getElementById('brand').innerHTML=fleets[i][5]
document.getElementById("table").style.display = 'block';
return;
}
}
document.getElementById("table").style.display = 'none';
document.getElementById("message").style.display = 'block';
}

fleets=[["120","W599 PTO","M920","OPTARE","B33F","Network Green" ],
["121","W601 PTO","M920","OPTARE","B33F","Network Green"],
["122","W602 PTO","M920","OPTARE","B33F","Network Green"]
]

</script>


<form name="myForm">
<input type="text" id="tb">
<input type="button" value="please choose" onclick="show()">
</form>



<div id="message" style="display:none">Sorry, not found.<br>
</div>


<div id="table" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" id="fleet" width="14%" bgcolor="#FFFFFF">
<FONT class="font"></FONT></TD>
<TD valign="middle" id="reg" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font"></FONT>
</TD>
<TD valign="middle" id="chassis" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font"></TD>
<TD valign="middle" id="body" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font"></font>

</TD>
<TD valign="middle" align="center" id="seating" width="12%" bgcolor="#FFFFFF">
<FONT class="font"></font>
</TD>
<TD valign="middle" align="center" id="brand" width="19%" bgcolor="#FFFFFF">
<font class="font"><font color="#348017"></a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>

mulder
01-12-2012, 12:57 PM
yes that could work well; certainly in its "hardcoded" form. I have to admit the info is not in a database already, but that can be done; if i remember rightly, is it something like...


<?php
$host = 'localhost';
$dbUser = 'username';
$dbPass = 'password';
$db = 'db_name';
mysql_connect("$host", "$dbUser", "$dbPass") or die(mysql_error());
mysql_select_db("$db") or die(mysql_error());

$result = mysql_query("SELECT fleet,reg,chassis,body,seating,brand" ) or die(mysql_error());
while($row = mysql_fetch_array( $result )) {
print "what would I put here?";
}
?>

I'm a bit ruff around the edges with mysql

mulder
01-12-2012, 02:47 PM
OK, i have set up a few records in mysql and have coded the html to display the record of fleet 120. How do I now merge what you posted earlier with the "hardcode" with the actual db code below:


<html>
<body>
<?php
$username="xxx";
$password="xxx";
$database="xxx";

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM fleet WHERE fleet = 120";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</tr>

<?php
$i=0;
while ($i < $num) {

$f1=mysql_result($result,$i,"fleet");
$f2=mysql_result($result,$i,"reg");
$f3=mysql_result($result,$i,"chassis");
$f4=mysql_result($result,$i,"body");
$f5=mysql_result($result,$i,"seating");
$f6=mysql_result($result,$i,"brand");
?>

<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
</tr>

<?php
$i++;
}
?>
</body>
</html>

xelawho
01-12-2012, 04:26 PM
I don't know much about php, but I think you can do it this way. If not, post back and maybe someone who understands php better can help you out...



<script type="text/javascript">

var fleets = [];


<?php
$username="xxx";
$password="xxx";
$database="xxx";

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * FROM fleet WHERE fleet = 120";
$result=mysql_query($query);

while($row = mysql_fetch_array($result))
{
$fleet = $row['fleet'];
$reg = $row['reg'];
$chassis = $row['chassis'];
$body = $row['body'];
$seating = $row['seating'];
$brand = $row['brand'];
?>
// switch to JavaScript code for simplicity
obj={fleet:"<?php echo $fleet;?>",
reg:"<?php echo $reg;?>",
chassis:"<?php echo $chassis;?>",
bod:"<?php echo $body;?>",
seating:"<?php echo $seating;?>",
brand:"<?php echo $brand;?>"
}
fleets.push(obj);
}
<?php
}
?>


function show() {
theval=document.getElementById('tb').value;
for (var i=0; i<fleets.length; i++) {
if (fleets[i].fleet==theval){
document.getElementById("message").style.display = 'none';
document.getElementById('fleet').innerHTML=fleets[i].fleet;
document.getElementById('reg').innerHTML=fleets[i].reg;
document.getElementById('chassis').innerHTML=fleets[i].chassis
document.getElementById('body').innerHTML=fleets[i].bod;
document.getElementById('seating').innerHTML=fleets[i].seating;
document.getElementById('brand').innerHTML=fleets[i].brand;
document.getElementById("table").style.display = 'block';
return;
}
}
document.getElementById("table").style.display = 'none';
document.getElementById("message").style.display = 'block';
}

</script>


<form name="myForm">
<input type="text" id="tb">
<input type="button" value="please choose" onclick="show()">
</form>



<div id="message" style="display:none">Sorry, not found.<br>
</div>


<div id="table" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" id="fleet" width="14%" bgcolor="#FFFFFF">
<FONT class="font"></FONT></TD>
<TD valign="middle" id="reg" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font"></FONT>
</TD>
<TD valign="middle" id="chassis" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font"></TD>
<TD valign="middle" id="body" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font"></font>

</TD>
<TD valign="middle" align="center" id="seating" width="12%" bgcolor="#FFFFFF">
<FONT class="font"></font>
</TD>
<TD valign="middle" align="center" id="brand" width="19%" bgcolor="#FFFFFF">
<font class="font"><font color="#348017"></a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>
</body>
</html>

mulder
01-13-2012, 12:48 PM
The above didn't work; however I have now found a solution to what I wanted; Using a form of lightbox script, when clicking on a link a new window opens loading the page that contains the hidden divs.

For anyone in the future wanting to know the solution search online for "greybox"



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/greybox/";
</script>

<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" src="greybox/static_files/help.js"></script>
<link href="greybox/static_files/help.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<a href="div3.php" title="Search" rel="gb_page_center[720, 300]">Search</a>
</body>
</html>

Thank you so much for your help, wouldn't have ever got this far without you. It is appreciated!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum