I aren't sure if this this possible, please could an expert advise?
I have a table that when clicked (an image inside a cell) expands to show a
larger area that will house a search facility, but I wanted the table to
expand slowly almost like it was sliding down (like when you click the
Organise button on the outlook toolbar!), can this be done? I've knocked
something up that is representative of what I was trying to achieve at work
yesterday, I've added 1px borders around the tables so that you can easily
see what is going on, the code works and expands the "search bar" as I am
calling it but if I can make it slide easily I would like to for the visual
appeal it would bring, anyway code below;
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var flag;
var minSize;
var maxSize;
function setPresets(){
flag = false;
minSize = 25;
maxSize = 125;
switchView();
}
function switchView(){
if (flag == false){
for (var i = minSize; i < maxSize; i++){
adjustHeight(i);
}
searchForm.style.display = "block";
flag = true;
}else{
for (var i = maxSize; i > minSize; i--){
adjustHeight(i);
}
searchForm.style.display = "none";
flag = false;
}
}
function adjustHeight(height){
pauseComp(10);
searchBar.height = height;
}
function pauseComp(millis){
// www.sean.co.uk
date = new Date();
var curDate = null;
do{var curDate = new Date();}
while(curDate-date < millis);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="setPresets();">
<TABLE id="searchBar" name="searchBar" width="100%" height="25"
cellpadding="3" cellspacing="0" border="1">
<TR>
<TD align="right" valign="top">
<IMG SRC="file://C:\Inetpub\wwwroot\web.gif" onClick="switchView();">
<TABLE id="searchForm" align="center" width="500" cellspacing="0"
cellpadding="3" border="1">
<TR>
<TD colspan="2">Search facility below...</TD>
</TR>
<TR>
<TD align="right">Term you seek?</TD>
<TD></TD>
</TR>
<TR>
<TD><INPUT type="submit" value="Submit" id="btnSubmit"
name="btnSubmit"></TD>
<TD><INPUT type="reset" value="Reset" id="btnReset"
name="btnReset"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
the pauseComp method I got off a site on the net when I thought adding a
pause would help me, thanks to anyone who takes a look at this and replies,
regards,
J.
