PDA

View Full Version : Ajuda HTML-DHTML

Delta
31-08-2005, 21:29
Fiz uma página em HTML/DHTML com alguma coisa em javascript

trata-se de um menu

no IE6 funciona impecavelmente
no Mozilla aparece tudo desconfigurado

que comandos estou a dar que são incompatíveis ?


==================
Código da página
==================

<html>
<head>
<STYLE>

a {color:#D4D4D4;font-family:Times New Roman;font-weight:bold;text-decoration:none}

#menuprincipal {position:absolute;top:90;left:350;z-index:10}
#menu1 {position:absolute;left:3;top:31;visibility:hidden }
#bckgrd1 {position:absolute;left:15;top:15;z-index:0;filter:alpha(opacity=70)}
#menu2 {position:absolute;left:115;top:31;visibility:hidd en}
#bckgrd2 {position:absolute;left:15;top:15;z-index:0;filter:alpha(opacity=70)}
#menu3 {position:absolute;left:227;top:31;visibility:hidd en}
#bckgrd3 {position:absolute;left:15;top:20;z-index:0;filter:alpha(opacity=70)}
#menu4 {position:absolute;left:339;top:31;visibility:hidd en}
#bckgrd4 {position:absolute;left:15;top:15;z-index:0;filter:alpha(opacity=70)}
#menu5 {position:absolute;left:452;top:31;visibility:hidd en}
#bckgrd5 {position:absolute;left:15;top:15;z-index:0;filter:alpha(opacity=70)}
#mapbox {position:absolute;left:10;top:30;visibility:hidde n;z-index:12}
#bckgrdmap {position:absolute;left:15;top:20;z-index:0;filter:alpha(opacity=70)}
</STYLE>
<title></title>
</head>

<SCRIPT Language="JavaScript">

function showmenu(id) {
document.all(id).style.visibility='visible';
}

function hidemenu(id) {
document.all(id).style.visibility='hidden';
}



</SCRIPT>

<body>

<table id="menuprincipal" width="520">
<tr>
<td width="100">
<table bgcolor="#FF0000" border="2" width="100" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr>
<td id="m1" style="cursor:hand" onmouseover="showmenu('menu1');this.bgColor='#AA0000';" onmouseout="hidemenu('menu1');this.bgColor='#FF0000';"><center><a href="#">Novas</a></center>

<!-- SUBMENU 1 -->
<DIV id="menu1">
<DIV style="position:absolute;z-index:4">
<table border="2" bgcolor="#FF0000" width="180" height="200" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="./usadas.htm">Lista de Usados</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="./usadas.htm">Lista de Usados</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="./usadas.htm">Lista de Usados</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="./usadas.htm">Lista de Usados</center></a></td></tr>
</table>
</DIV>
<DIV id="bckgrd1">
<table border="0" bgcolor="#804040" width="180" height="203">
<tr><td>&nbsp;</td></tr>
</table>
</DIV>
</DIV>
</td>
</tr>
</table>
</td>
<td width="5">&nbsp;</td>
<td width="100">
<table bgcolor="#FF0000" border="2" width="100" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr>
<td id="m2" style="cursor:hand" onmouseover="showmenu('menu2');this.bgColor='#AA0000';" onmouseout="hidemenu('menu2');this.bgColor='#FF0000';"><center><a href="#">Usadas</a></center>

<!-- SUBMENU 2 -->

<DIV id="menu2">
<DIV style="position:absolute;z-index:4">
<table border="2" bgcolor="#FF0000" width="180" height="30" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="./usadas.htm">Lista de Usados</center></a></td></tr>
</table>
</DIV>
<DIV id="bckgrd2">
<table border="0" bgcolor="#804040" width="180" height="32">
<tr><td>&nbsp;</td></tr>
</table>
</DIV>
</DIV>

</td>
</tr>
</table>
</td>
<td width="5">&nbsp;</td>
<td width="100">
<table bgcolor="#FF0000" border="2" width="100" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr>
<td id="m3" style="cursor:hand" onmouseover="showmenu('menu3');this.bgColor='#AA0000'" onmouseout="hidemenu('menu3');this.bgColor='#FF0000'"><center><a href="#">Acessórios</a></center>

<!-- SUBMENU 3 -->

<DIV id="menu3">
<DIV style="position:absolute;z-index:4">
<table border="2" bgcolor="#FF0000" width="180" height="320" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Acessórios</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Bagagem</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Blusões</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Botas</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Calças</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Capacetes</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Fatos</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Impermeáveis</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Luvas</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Óculos</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Protecções</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Outros</center></a></td></tr>
</table>
</DIV>
<DIV id="bckgrd3">
<table border="0" bgcolor="#804040" width="180" height="320">
<tr><td>&nbsp;</td></tr>
</table>
</DIV>
</DIV>


</td>
</tr>
</table>
</td>
<td width="5">&nbsp;</td>
<td width="100">
<table bgcolor="#FF0000" border="2" width="100" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr>
<td id="m4" style="cursor:hand" onmouseover="showmenu('menu4');this.bgColor='#AA0000'" onmouseout="hidemenu('menu4');this.bgColor='#FF0000'"><center><a href="#">Serviços</a></center>

<!-- SUBMENU 4 -->

<DIV id="menu4">
<DIV style="position:absolute;z-index:4">
<table border="2" bgcolor="#FF0000" width="180" height="60" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="http://www.cetelem.pt/">Concessão de Crédito</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'"><center><a href="servicos.htm">Mais Serviços</center></a></td></tr>
</table>
</DIV>
<DIV id="bckgrd4">
<table border="0" bgcolor="#804040" width="180" height="65">
<tr><td>&nbsp;</td></tr>
</table>
</DIV>
</DIV>


</td>
</tr>
</table>
</td>
<td width="5">&nbsp;</td>
<td width="100">
<table bgcolor="#FF0000" border="3" width="100" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr>
<td id="m5" style="cursor:hand" onmouseover="showmenu('menu5');this.bgColor='#AA0000'" onmouseout="hidemenu('menu5');this.bgColor='#FF0000'"><center><a href="#">Links</a></center>

<!-- SUBMENU 5 -->

<DIV id="menu5">
<DIV style="position:absolute;z-index:4">
<table border="2" bgcolor="#FF0000" width="180" height="140" BORDERCOLORLIGHT="#FF8080" BORDERCOLORDARK="#AA0000">
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'" onclick="javascript:window.open('http://www.yamaha-motor.pt')"><center><a href="#">Yamaha</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'" onclick="javascript:window.open('http://www.yamaha-racing.com')"><center><a href="#">Yamaha Racing</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'" onclick="javascript:window.open('http://www.motorcycledaily.com')"><center><a href="#">Motorcycle Daily</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'" onclick="javascript:window.open('http://www.cyclenews.com')"><center><a href="#">Cycle News</center></a></td></tr>
<tr><td onmouseover="this.bgColor='#AA0000'" onmouseout="this.bgColor='#FF0000'" onclick="javascript:window.open('http://motojornal.pt')"><center><a href="#">Moto Jornal</center></a></td></tr>
</table>
</DIV>
<DIV id="bckgrd5">
<table border="0" bgcolor="#804040" width="180" height="145">
<tr><td>&nbsp;</td></tr>
</table>
</DIV>
</DIV>

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

</body>
</html>
Lancaster
31-08-2005, 23:25
Heyas all...

Fiz uma página em HTML/DHTML com alguma coisa em javascript

trata-se de um menu

no IE6 funciona impecavelmente
no Mozilla aparece tudo desconfigurado

que comandos estou a dar que são incompatíveis ?



No mozzila aparece-te tudo desconfigurado, porque não existe a função "document.all(variavel)", tens que usar a "document.getElementById(variavel)", por isso é que aparece tudo desconfigurado...ou seja basta substituir na função show e hide o document.all por o document.getElementById..e fica bom..

Se no Mozilla (que tb deve ter a Javascript Console, vês que nesta aparece que a document.all() não está definida...

Porquê? Boa pergunta...mas eu arriscava a dizer que é culpa do IE por não respeitar os standards...e como toda a gente vê isso no IE o document.all passa bem..agora em FF é que tá quieto...

Hasta all e espero ter ajudado...

PS: Curti o script...vou guardar para dar uma olhadela nisso...
Delta
02-09-2005, 19:51
Continua a não funcionar muito bem no Mozilla, se alguém puder dar uma ajuda...

No IE6 funciona muito bem, para já serve-me

é um DROP-DOWN Menu 100% compatível com ASP.NET/VB.NET, isto é, pode-se associar Web Forms Buttonlinks para controlar os acessos a cada ponto de menu ( como eu tenho que fazer agora ). Basta substituir as hiperligações pelos buttonlinks...

Deu-me imenso trabalho, não encontrava nada FREE na web que fosse 100% compatível com VB.NET

Podeis ver o menu a funcionar em : (só funciona o link para o Home) USAR o IE6

pwp.netcabo.pt/falmartins/index.htm
Delta
04-09-2005, 14:24
!!! EUREKA !!!

consegui a pôr a funcionar no IE6 e no Mozilla 1.0.6

:)))


Não esquecer de fazer refresh no caso terem feito o cach da página

http://pwp.netcabo.pt/falmartins/index.htm

código simples e 100% compatível com ASP.NET/VB.NET, basta :

incluir a tag FORM antes de tudo o resto, com a opção target para o iframe (ibody)
substituir os links por web forms buttonlinks

e voilá !!!

digam-me a vossa opinião, principalmente se funciona :)
T0utatis
04-09-2005, 14:58
Aqui em firefox os menus funcionam bem também, experimentei também o antigo e realmente não funcionava. Aquele logotipo todo pixelizado é que não está com nada! =P
Delta
04-09-2005, 15:06
Aquele logotipo todo pixelizado é que não está com nada! =P



tens razão

já tentei fazer um banner no PSP com Gradients e incluir um logo com melhor resolução

o pior é que ao maximizar o browser perde qualidade

como é que resolvo isso ? sou fraco em tratamento gráfico :(
eXcept
04-09-2005, 17:22
a mim só me aparece um link para 1 mail :|
Delta
04-09-2005, 17:53
está indisponível porque me deu imenso trabalho, e há empresas que ganham fortunas com estas merdas

olhem aqui :

http://www.udm4.com/licensing/download/

este menu foi comprado pela Pioneer (basta ver o source) :

www.pioneerelectronics.com

O meu menu é muito simples e 100% compatível com ASP.NET/VB.NET

o novo link é este :

http://pwp.netcabo.pt/falmartins/techzonept.htm

disponível apenas para este fórum, por enquanto...

SÓ PEÇO QUE ME DÊEM O VOSSO FEEDBACK, SE FUNCIONA NOS VOSSOS BROWSERS

Atenção que só funciona o HOME e LINKS
kingdom
04-09-2005, 18:13
Tudo a funcionar a 100% por aqui....está mesmo muito porreiro o menu...

Cumps
eXcept
04-09-2005, 20:20
100% funcional em Firefox 1.06
Mitnick
04-09-2005, 20:42
Por aqui tambem funciona a 100% em FireFox e Internet Explorer 6.
TuxBoss
05-09-2005, 14:37
Firefox 1.06 a funcionar a 100%.

Opinião:
Tens de tratar do banner rapidamente :)
O menu tá mt fixe, mas pessoalmente acho q ficava mais bonito se os buttons fossem mais pequenos.
De resto mt bom.
Delta
06-09-2005, 22:01
A continuação da história....

Feito o menu avancei para a construção de um Web Form. Um form tem caixas de texto, pode ter drop downs e outros elementos...

O resultado :

no Firefox : funcionava
no IE : não

eu explico :

existem "Windowed Elements" que se sobrepõem a todos os layers que uma pessoa possa criar numa página. Os layers ou camadas são controlados pelo zOrder, mas eu bem podia dar um zOrder de 1 milhão...era inútil.

Depois de muitas horas e tentativas e etc, porque eu não queria desistir do meu menu, encontrei uma solução

Esta última versão :
- as sombras foram eliminadas
- No IE funciona bem com WebForms e Flash movies
- No Firefox não funciona com Flash Movies
- Comportamento do Menu mais suave no Mozilla

as várias versões do menu disponíveis aqui :

pwp.netcabo.pt/falmartins/index.htm

Com a última versão experimentem um flash movie no IE e no Firefox :
escolher o link microsoft - > Windows Mobile (1º menu lado esquerdo)
e também os webforms

Depois Experimentem os WebForms com os 2 browsers na Versão 2 do menu, e também 1 flash movie

Quem utiliza flash movies deve ter o cuidado de usar uma opção especial para permitir layers, a Microsoft esqueceu-se
Delta
08-09-2005, 21:30
yesss :009: :009: :009:

vejam isto :

http://www.sothink.com/webtools/dhtmlmenu/

e este comentário :

Auto hide window elements, including Flash, Selected box, IFRAME, and etc.

O meu é melhor, acho que posso pedir 60 euros :lol: :lol: :lol:

mas eu escrevi para lá e dei-lhes a solução