PDA

Click to See Complete Forum and Search --> : Hiding buttons

russ801
03-18-2003, 10:49 PM
I have a button that I want to make conditionaly invisible, rather than disabled.

Here is what I have:

<SCRIPT language="JavaScript1.2" type="text/javascript">


var r=0
var imgno=0
var composite=null

// create the array to load the full size images , thumbnails and composite pages if applicable
var photos = new Array(
new Array("Images/MarH0022V.jpg","Images/MarH0022T.jpg","CP_MarH1.html"),
new Array("Images/NicM0421V.jpg","Images/NicM0421T.jpg",null),
new Array("Images/DouB0296V.jpg","Images/DouB0296T.jpg","CP_DouB1.html"),
new Array("Images/SteP0004V.jpg","Images/SteP0004T.jpg","CP_SteP.html"),
new Array("Images/DiaJ0468V.jpg","Images/DiaJ0468T.jpg","CP_DiaJ.html"),
new Array("Images/JudL0015V.jpg","Images/JudL0015T.jpg",null)
);


// Preload the images
function setImg() {
var imgAry = new Array();
var imgtn = new Array();
// for each row
for(x=0; x<photos.length; x++) {
imgAry[x] = new Image();//full size images
imgtn[x] = new Image();//thumnails
imgAry[x].src = photos[x][0];
imgtn[x].src = photos[x][1];
}



document['bigimg'].src = photos[0][0];
document['tn0'].src = photos[0][1];
document['tn1'].src = photos[1][1];
document['tn2'].src = photos[2][1];
document['tn3'].src = photos[3][1];
document['tn4'].src = photos[4][1];
document['tn5'].src = photos[5][1];
}

function next() {
window.location="TVHS02.html";
}

// image swap function
function Blowup(r) {
document['bigimg'].src = photos[r][0];
imgno=r;
//alert (imgno)

var cpage = photos[r][2]


//function composite(cpage){
alert (cpage)
if (cpage!=null) {
document.getElementByName('comp').style.visibility = 'visible'
}
else {
document.getElementByName('comp').style.visibility = 'hidden'
}}

//}

onload = setImg;

I get an object does not support this property error. I thought this was the standards way
russ801
03-19-2003, 07:56 AM
the document.getelementbyname line.
Jona
03-19-2003, 05:11 PM
Dave, the last two that return collections may also be specified like this: document.getElementsByTagName('TD')[0] would return the first <TD> in the HTML document.

Just thought I'd throw that in there. :)
russ801
03-20-2003, 05:13 AM
Never noticed that the method was a plural.

Can I just add the ID property to the object?
russ801
03-20-2003, 01:28 PM
That didn't work although I understand more than I did.

After some more research I came up with this:

function Blowup(r) {
document['bigimg'].src = photos[r][0];
imgno=r;
//alert (imgno)

var cpage = photos[r][2]


//function composite(cpage){
//alert (cpage)
if (cpage!=null) {
//alert ('true');
document.forms.namedItem("Comp").style.visibility = 'visible';
}

else {
//alert ('false');
document.forms.namedItem("Comp").style.visibility = 'hidden';
}}

//}



onload = setImg; // no ()


</SCRIPT> </HEAD>
<BODY bgcolor="#474747" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<TABLE width="629" cellspacing="10" cellpadding="5" height="550" class="buttonText">
<COL span="1" valign="middle" align="center" width="5%">
<TBODY>
<TR>
<TD rowspan="4" colspan="3" nowrap valign="middle"><IMG name="bigimg" src=""></TD>
<TD rowspan="4" nowrap></TD>
<TD colspan="2" align="center" width="125"></TD>
<TD></TD>
</TR>
<TR height="96">
<TD height="96" valign="top" align="center"><IMG src="" name="tn0" alt="tn0" height="72" width="48" border="0" onmouseover="Blowup(0);"></TD>
<TD height="96" valign="top" align="center"><IMG src="" name="tn1" alt="tn1" height="72" width="48" border="0" onmouseover="Blowup(1);"></TD>
<TD rowspan="3" height="328"></TD>
</TR>
<TR height="96">
<TD height="96" valign="top" align="center"><IMG src="" name="tn2" alt="tn2" height="72" width="48" border="0" onmouseover="Blowup(2);"></TD>
<TD height="96" valign="top" align="center"><IMG src="" name="tn3" alt="tn3" height="72" width="48" border="0" onmouseover="Blowup(3);"></TD>
</TR>
<TR height="96">
<TD height="96" valign="top" align="center"><IMG src="" name="tn4" alt="tn4" height="72" width="48" border="0" onmouseover="Blowup(4);"></TD>
<TD height="96" valign="top" align="center"><IMG src="" name="tn5" alt="tn5" height="72" width="48" border="0" onmouseover="Blowup(5);"></TD>
</TR>
<TR height="30">
<TD colspan="3" nowrap valign="top" height="26">
<BUTTON name="Comp" type="button" onclick="composite(cpage);">Composite</BUTTON>
</TD>
<TD valign="middle" nowrap height="26"></TD>
<TD colspan="2" valign="top" align="center" width="125" height="26"><IMG src="Bbutton.gif" width="31" height="27" border="0" align="middle"><IMG src="more.gif" width="28" height="12" border="0"> <IMG src="Fbutton.gif" width="31" height="27" border="0" align="middle"></TD>
<TD valign=" middle" height="26"></TD>
</TR>
<TR>
<TD width="360" height="74"></TD>
<TD nowrap valign="middle" height="74"></TD>
<TD nowrap valign="middle" height="74"></TD>
<TD valign="middle" nowrap height="74"></TD>
<TD valign="middle" align="center" height="74"></TD>
<TD valign="middle" align="center" height="74"></TD>
<TD valign="middle" height="74"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

Do I have to add a <Form>... to make this work?
russ801
03-21-2003, 09:41 PM
can u use a form inside of a table?

Many of the examples use DIV but u can't use that in a table
russ801
03-21-2003, 09:51 PM
taking a slightly different tack.

instead of setting the attribute, I want to determine the value of the attribute. If I can do that then I have the correct syntax. I think...

Here are a couple I tried and neither works.

<SCRIPT language="JavaScript1.2" type="text/javascript">
var vis = null
vis = document.getElementById("vcomp").style.visibility
vis = document.forms.namedItem("vcomp").style.visibility
alert (vis)
</SCRIPT></BODY>

Here is the button
<TD valign="top" align="center" colspan="2" height="45" width="98">
<FORM><INPUT type="button" name="Composite" value="Comp" id="vcomp"></FORM>
</TD>

Although I am thinking of going away from the button and just going to an clickable image