Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Collapse Expand with Image
- Thread starter sandra45
- Start date
simonchristieis
Programmer
use this
function hide(e,v){
document.getelementbyid(e).style.visibility = v
}
and call it using
hide('myhtmlelement','visible')
hide('myhtmlelement','hidden')
hth
simon
function hide(e,v){
document.getelementbyid(e).style.visibility = v
}
and call it using
hide('myhtmlelement','visible')
hide('myhtmlelement','hidden')
hth
simon
- Thread starter
- #3
I enclose part of my code below. As you can see, I have a form which will take some data from the text boxes. If the user needs to add data, they will click on the image below test.gif to expand the text and text box. If not, the text and text box and submit/reset buttons will stay hidden. Can you let me know where to insert the code you mention into my code? Thanks.
<FORM action=test.asp method=post name=frmtest id=frmtest>
<table cellpadding=2 cellspacing=3 width="85%" border=0 bgcolor=gold align=center>
<tr>
<td align=middle><font color=white size=5><b>Add Data
<IMG align=absmiddle border=0 hspace=1 style="cursor:hand" src="../test.gif"></b></font></td></tr>
</table>
<table border=0 cellpadding=0 cellspacing=0 width="85%" bgcolor=lightgoldenrodyellow align=center>
<tr>
<td nowrap style="PADDING-left: 35px" width=30% id=1><b>Name</b></td>
<td width="70%"><INPUT maxLength=30 name=txtName size=30 id=2></td>
</tr><tr height=5><td></td></tr>
</form>
<FORM action=test.asp method=post name=frmtest id=frmtest>
<table cellpadding=2 cellspacing=3 width="85%" border=0 bgcolor=gold align=center>
<tr>
<td align=middle><font color=white size=5><b>Add Data
<IMG align=absmiddle border=0 hspace=1 style="cursor:hand" src="../test.gif"></b></font></td></tr>
</table>
<table border=0 cellpadding=0 cellspacing=0 width="85%" bgcolor=lightgoldenrodyellow align=center>
<tr>
<td nowrap style="PADDING-left: 35px" width=30% id=1><b>Name</b></td>
<td width="70%"><INPUT maxLength=30 name=txtName size=30 id=2></td>
</tr><tr height=5><td></td></tr>
</form>
simonchristieis
Programmer
add the function within the head tags:
<head>
<script type="text/javascript">
<!--
function hide(e,v){
document.getelementbyid(e).style.visibility = v
}
//-->
</script>
and use this:
<FORM action=test.asp method=post name=frmtest id=frmtest>
<table cellpadding=2 cellspacing=3 width="85%" border=0 bgcolor=gold align=center>
<tr>
<td align=middle><font color=white size=5><b>Add Data
<a href="javascript:hide('myTable','visible')">
<IMG align=absmiddle border=0 hspace=1 src="../test.gif"></a></b></font></td></tr>
</table>
<table id="myTable" border=0 cellpadding=0 cellspacing=0 width="85%" bgcolor=lightgoldenrodyellow align=center style="visibility:hidden;">
<tr>
<td nowrap style="PADDING-left: 35px" width=30% id=1><b>Name</b></td>
<td width="70%"><INPUT maxLength=30 name=txtName size=30 id=2></td>
</tr><tr height=5><td></td></tr>
</table>
</form>
hth
simon
<head>
<script type="text/javascript">
<!--
function hide(e,v){
document.getelementbyid(e).style.visibility = v
}
//-->
</script>
and use this:
<FORM action=test.asp method=post name=frmtest id=frmtest>
<table cellpadding=2 cellspacing=3 width="85%" border=0 bgcolor=gold align=center>
<tr>
<td align=middle><font color=white size=5><b>Add Data
<a href="javascript:hide('myTable','visible')">
<IMG align=absmiddle border=0 hspace=1 src="../test.gif"></a></b></font></td></tr>
</table>
<table id="myTable" border=0 cellpadding=0 cellspacing=0 width="85%" bgcolor=lightgoldenrodyellow align=center style="visibility:hidden;">
<tr>
<td nowrap style="PADDING-left: 35px" width=30% id=1><b>Name</b></td>
<td width="70%"><INPUT maxLength=30 name=txtName size=30 id=2></td>
</tr><tr height=5><td></td></tr>
</table>
</form>
hth
simon
- Thread starter
- #5
Hi Simon, many thanks. However, I still get an error message:
A Runtime Error occurred.
Line: 0
Error: Object expected.
Microsoft Script Editor points the error to this line:
<HTML><SCRIPT LANGUAGE=javascript>var __w=hide('myTable','visible');if(__w!=null)document.write(__w);
What does it mean? And why does the script open a new window to show the table (with the address: javascript:hide('myTable','visible') vid:1-1), NOT on the same page where the image located?
Regards,
Sandra
A Runtime Error occurred.
Line: 0
Error: Object expected.
Microsoft Script Editor points the error to this line:
<HTML><SCRIPT LANGUAGE=javascript>var __w=hide('myTable','visible');if(__w!=null)document.write(__w);
What does it mean? And why does the script open a new window to show the table (with the address: javascript:hide('myTable','visible') vid:1-1), NOT on the same page where the image located?
Regards,
Sandra
simonchristieis
Programmer
var __w=hide('myTable','visible');
if(__w!=null)document.write(__w);
you are trying to hide an element that has not been created yet.
try this:
<body onload="init">
function init(){
var __w=hide('myTable','visible');
if(__w!=null)document.write(__w);
}
i cant see what you are trying to do - but the function 'hide' does not return anything!
simon
if(__w!=null)document.write(__w);
you are trying to hide an element that has not been created yet.
try this:
<body onload="init">
function init(){
var __w=hide('myTable','visible');
if(__w!=null)document.write(__w);
}
i cant see what you are trying to do - but the function 'hide' does not return anything!
simon
- Thread starter
- #7
Hi Simon, still the same error. I'm trying to have the image to show or hide table together with its contents, based on the code above, the screen will look like this more or less:
Add Data (Image test.gif is here)
Name (txtName text box is here)
So when the user clicks test.gif image, then Name and txtName text box will be shown or hidden.
Regards,
Sandra
Add Data (Image test.gif is here)
Name (txtName text box is here)
So when the user clicks test.gif image, then Name and txtName text box will be shown or hidden.
Regards,
Sandra
simonchristieis
Programmer
You need to simplify.
function hide(f,e){
document.forms(f).elements(e).style.visibility = (document.forms(f).elements(e).style.visibility == 'hidden')?'hidden':'visible';
}
<a href="javascript:hide('myForm','myInput')">
<img border="0" src="myimage.gif">
</a>
<form name="myForm">
<input name="myInput" style="visibility : visible;">
</form>
simon
function hide(f,e){
document.forms(f).elements(e).style.visibility = (document.forms(f).elements(e).style.visibility == 'hidden')?'hidden':'visible';
}
<a href="javascript:hide('myForm','myInput')">
<img border="0" src="myimage.gif">
</a>
<form name="myForm">
<input name="myInput" style="visibility : visible;">
</form>
simon
- Thread starter
- #9
Hi Simon, I still get the same error message. I've changed the code using div instead for all objects inside a form and it seems to work fine. However, does not work in Netscape 7.1 for the following codes:
document.all
document.getElementById
document.layers[obj].visibility = 'visible'
Any idea?
Regards,
Sandra
document.all
document.getElementById
document.layers[obj].visibility = 'visible'
Any idea?
Regards,
Sandra
simonchristieis
Programmer
What's the point in me suggesting something when you are going to do something else anyway - post some code, I dont have time to waste trying to figure out what you are trying to do.
- Status