PDA

Click to See Complete Forum and Search --> : colapse items

vccarvalho
10-01-2003, 12:20 PM
Hi there! I'm trying to build a script so show hide a <td>, so it will colapse/expand onclick, but I'm having some problems wiht Netscape (as always, why dont ppl stop using it?) It works fine on Opera and IE.

Here's the code:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function show_hide(id) {
if(document.all)
dom = eval("document.all." + id + ".style");
else
dom = eval("document.layers." + id);
if (dom.display == 'none')
{
dom.display = '';
}
else
{
dom.display = 'none';
}
}
//-->
</SCRIPT>

and the table looks like this :
<table>
<tr>
<td bgcolor="ffffcc" width="250" align="right"><a style="cursor:hand;text-decoration:none;color:blue" onClick="hide('contact');">click</a></td>
</tr>
<tr>
<td bgcolor="ccccff" id="contact" width="250">

BTW NS 7.1 does not support the cursor: hand?
thanks to all
pyro
10-01-2003, 12:57 PM
Why would people stop using Netscape? It's superior to M$ IE in many ways (though I prefer Mozilla over Netscape...)

The reason your code does not work is because you use IE propretary code. document.all works only in IE, while the DOM document.getElementById works in all DOM compliant browsers.

Take a look at http://www.webdevfaqs.com/javascript.php#showhide, which will work much better than the code you have above.

And to see why cursor: hand does not work, take a look at http://www.w3.org/TR/REC-CSS2/ui.html#cursor-props. hand is not a valid value for the cursor property. Use cursor: pointer, instead.
vccarvalho
10-02-2003, 12:57 PM
thanks for the help. It's almost working under mozilla now. But as you could see, try running this on ie and mozilla :

<link REL="StyleSheet" HREF="crm.css" type="text/css">
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<script language="JavaScript" src="../lib/swapimg.js"></script>
<script LANGUAGE="JavaScript" TYPE="text/javascript"></script>
<script type="text/javascript">
function show_hide(id) {
dom = document.getElementById(id);
if (dom.style.display == 'none')
{
dom.style.display = 'block';
imgid = "expand" + id;
MM_swapImage(imgid,'','../imagebutton/top2.gif',1);
}
else
{
dom.style.display = 'none';
imgid = "expand" + id;
MM_swapImage(imgid,'','../imagebutton/down2.png',1);
}
}
</script>
<head>
<style>
body, textarea {
scrollbar-base-color:#eeeef;
scrollbar-3dlight-color:#62708A;
scrollbar-arrow-color:#62708A;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#eeeeee;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#aaaaaa;
scrollbar-track-color:#eeeeee;}
</style>
<script>
function abreJanela(type,refNum)
//refNum pode ser usado em dois casos:
//adicao : eh o indice do prospect que sera adicionado um novo contato
//edicao : eh o indice do contato que sera editado
{
switch(type)
{
case "add" :
var url = 'crmEditHistory.php?type=add&prospectno=' + refNum;
break;
case "edit" :
var url = 'crmEditHistory.php?type=edit&historyno=' + refNum;
break;
}
window.open(url,"edtHistory",'scrollbars=yes,width=800,height=320,top=yes');
}
</script>

</head>
<body bgcolor="#eeeef">

<div class='fontTDsmall' valign=bottom><a style='text-decoration:none;cursor: hand' onClick="abreJanela('add',2);"><img src='../imagebutton/add.gif' align='middle' border=0>Adicionar elemento</a></div><br><table cellspacing=1 border=0 align=center width=90% bgcolor=black>
<tr><td bgcolor=336699 align=right><table cellspancing=0 cellpading=0 width=100%><tr><td align=left width=75% class=fontTDverySmall>Usuário : vinicius</td><td align=center width=20% class=fontTDverySmall>Data : 02/10/2003 14:36</td><td align=right width=5%><a style='cursor:hand;color:white' onClick="show_hide('history10')"><img name="expand10" src="../imagebutton/down2.png" border=0></a></td>
</tr></table></td></tr><tr>
<td bgcolor='ffffff' name='history10' id='history10' style='display:none;'>
<table width = 100% cellspacing=1 border = 0>
<tr><td class='fontTDsmall' width=50% align=left><b>Usuário: </b>vinicius</td><td class='fontTDsmall' width=50% align=left><b>Data: </b>02/10/2003 14:36</td></tr><tr><td class='fontTDsmall' width=50% align=left><b>Pessoa contactada: </b>Joao Ubaldo Ribeiro</td><td class='fontTDsmall' width=50% align=left><b>Forma de contato: </b>e-mail</td></tr><tr><td class='fontTDsmall' width=50% align=left><b>Tipo de contato: </b>Apresentação do Produto</td><td class='fontTDsmall' width=50% align=left><b>Objetivo contato: </b>Contato Inicial</td></tr><tr><td class='fontTDsmall' width=100% colspan=2 align=left><b>Índice de satisfação: </b>5</td></tr><tr><td class='fontTDsmall' width=100% colspan=2 align=left><b>Descrição:<br> </b>Usuario foi contactado para apresentacao do produto</td></tr></table>

</td>
</tr>
</table>



</body>
</html>

Could you explain me what`s wrong now?