Foros del Web » Programando para Internet » Javascript »

Por qué no funciona en Netscape?

Estas en el tema de Por qué no funciona en Netscape? en el foro de Javascript en Foros del Web. Este menú funciona perfectamente en IE y Opera, pero en Netscape es un desastre. Alguien sabe si hay algo mal o es solo un problema ...
  #1 (permalink)  
Antiguo 11/08/2005, 20:02
 
Fecha de Ingreso: febrero-2005
Mensajes: 23
Antigüedad: 19 años, 6 meses
Puntos: 0
Pregunta Por qué no funciona en Netscape?

Este menú funciona perfectamente en IE y Opera, pero en Netscape es un desastre.
Alguien sabe si hay algo mal o es solo un problema de Netscape?

Inserto el código para que lo vean

Gracias
Edg



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
a
{text-decoration: none;}

.title
{position: absolute;
width: 110px;
height: 20px;
left: 5px;
z-index: 10;
border-left: 1px solid #c9dbed;
border-right: 1px solid #336699;
border-top: 1px solid #c9dbed;
border-bottom: 1px solid #336699;
background-color: #6c97c4;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;}

.submenu
{
position: absolute;
left: 5px;
width: 108px;
border-left: 1px solid #336699;
border-right: 1px solid #c9dbed;
border-top: 1px solid #336699;
border-bottom: 1px solid #c9dbed;
background-color: #a7c5e2;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #6C97C4;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #000099;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<script language="JavaScript">

<!-- Begin
var nom = 2; // Number of menus
var usePictures = 1; // use pictures? 1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "images/opened.gif";
}
else if (document.all) {
document.all(pic).src = "images/opened.gif";
}
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "images/closed.gif";
}
else if (document.all) {
document.all(pic).src = "images/closed.gif";
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
// End -->
</script>
<span class="title" id="title1" style="top: 50px">

<p style="margin-top: 2px"><a href="#"
onclick="javascript: toggle(1,70); return false">
<img
src="images/closed.gif" border="0" name="pic1" width="7" height="7">Buscadores</a> </p>
</span>

<span class="submenu" id="submenu1" style="top: 70px">

<p style="margin-left: 4px; margin-top: 2px; margin-bottom: 2px">
<a href="http://www.google.com.ar/" target="_blank">Google</a><br>
<a href="http://ar.yahoo.com/" target="_blank">Yahoo</a><br>
<a href="http://www.ubbi.com/" target="_blank">Ubbi</a><br>
<a href="http://www.altavista.com/" target="_blank">Altavista</a><br>
<a href="buscadores.htm" >mas >>></a></p>

</span> <span class="title" id="title2" style="top: 74px">

<p style="margin-top: 2px"> <a href="#"
onclick="javascript: toggle(2,58); return false">
<img
src="images/closed.gif" border="0" name="pic2" width="7" height="7">Sitios Oficiales</a> </p>

</span> <span class="submenu" id="submenu2" style="top: 94px">

<p style="margin-left: 4px; margin-top: 2px; margin-bottom: 2px">
<a href="http://www.laplata.gov.ar" target="_blank">La Plata</a><br>
<a href="http://www.gba.gov.ar" target="_blank">Buenos Aires</a><br>
<a href="http://www.info.gov.ar/" target="_blank">Argentina</a><br>
<a href="sitios_oficiales.htm" > mas >>></a></p>
</span>

</body>
</html>
  #2 (permalink)  
Antiguo 13/08/2005, 02:58
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años
Puntos: 381
Hola Edgardo2,

lo que sucede es que ese código tiene más años que la injusticia.

comprueba si document.all a lo que NS devuelve false y después si document.layers a lo que NS también devuelve false por lo tanto no entra a leer ningún código.

Te sugiero busques alguno más actualizado

un saludo
  #3 (permalink)  
Antiguo 13/08/2005, 11:08
 
Fecha de Ingreso: febrero-2005
Mensajes: 23
Antigüedad: 19 años, 6 meses
Puntos: 0
Gracias tunait, lo que sucede es que tengo muy poca idea sobre js.
He encontrado algunos códigos parecidos pero ninguno como este “arcaico”.
¿no sabrías decirme donde puedo encontrar algunos menús de este tipo?

Saludos
Edg
  #4 (permalink)  
Antiguo 14/08/2005, 02:55
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años
Puntos: 381
mmm... es que no sé qué hace exactamente el script ¿qué es lo que buscas?
  #5 (permalink)  
Antiguo 14/08/2005, 20:34
 
Fecha de Ingreso: febrero-2005
Mensajes: 23
Antigüedad: 19 años, 6 meses
Puntos: 0
Bueno, te subo una página de muestra para que veas el funcionamiento el script

Gracias por tu atención

http://ar.geocities.com/sexta_seccion/

Edg
  #6 (permalink)  
Antiguo 15/08/2005, 04:31
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años
Puntos: 381
mmmseguramente deben de haber un montón de script que hagan eso pero ni idea de dónde encontrarlo.

Igual para hacer eso se puede hacer de una forma bastante simple, mira si hacerlo así te sirve

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
a
{text-decoration: none;}

.abierto, .cerrado{
width: 110px;
height: 20px;
left: 5px;
z-index: 10;
border-left: 1px solid #c9dbed;
border-right: 1px solid #336699;
border-top: 1px solid #c9dbed;
border-bottom: 1px solid #336699;
background-color: #6c97c4;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
margin-top: 2px;
padding-left: 20px;
}
.abierto{
	background:url(images/opened.gif) no-repeat left top;
}
.cerrado{
	background:url(images/closed.gif) no-repeat left top;
}
.submenu
{
	width: 108px;
	border-left: 1px solid #336699;
	border-right: 1px solid #c9dbed;
	border-top: 1px solid #336699;
	border-bottom: 1px solid #c9dbed;
	background-color: #a7c5e2;
	font-family: verdana, helvetica, sans-serif;
	font-size: 10px;
	display: none;
	padding-left: 4px; 
	padding-top: 2px; 
	padding-bottom: 2px;
	margin-left: 10px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #6C97C4;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #000099;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
-->
</style>
</head>

<body>
<script language="JavaScript">

<!-- 
function abrir(n){
	el1 = document.getElementById('submenu' + n)
	el2 = document.getElementById('title' + n)
	el1.style.display = el1.style.display == 'none' ? 'block' : 'none';
	el2.className = el2.className == 'cerrado' ? 'abierto' : 'cerrado';
}

// -->
</script>
<div id="Menu">
<div class="cerrado" id="title1">
<a href="#" onClick="abrir(1); return false">
Buscadores</a> 
</div>   

<div class="submenu" id="submenu1" style="display: none"> 
<a href="http://www.google.com.ar/" target="_blank">Google</a><br>
<a href="http://ar.yahoo.com/" target="_blank">Yahoo</a><br>
<a href="http://www.ubbi.com/" target="_blank">Ubbi</a><br> 
<a href="http://www.altavista.com/" target="_blank">Altavista</a><br>
<a href="/NautaWeb/buscadores.htm" >mas >>></a>
</div> 
<div class="cerrado" id="title2"> 
 <a href="#" onClick="abrir(2); return false">Sitios Oficiales</a> 
</div>
<div class="submenu" id="submenu2" style="display: none">                                                           
<a href="http://www.laplata.gov.ar" target="_blank">La Plata</a><br>
<a href="http://www.gba.gov.ar" target="_blank">Buenos Aires</a><br>
<a href="http://www.info.gov.ar/" target="_blank">Argentina</a><br>
<a href="/NautaWeb/sitios_oficiales.htm" > mas >>></a>
</div>
</div>
</body>
</html>
las imágenes se incluyen dentro de los css (lo puse en negritas)

mira si así e sirve
  #7 (permalink)  
Antiguo 15/08/2005, 08:42
 
Fecha de Ingreso: febrero-2005
Mensajes: 23
Antigüedad: 19 años, 6 meses
Puntos: 0
Muy amble tunait
Funciona perfectamente y resulta ser mucho mas simple, haré algunas modificaciones en las css por cuestiones de aspecto y probaré posicionarlo en distintos lugares de la página.

Muy bueno, habrá que estudiar js…!

Después te cuento

Edg
  #8 (permalink)  
Antiguo 15/08/2005, 12:04
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años
Puntos: 381
Estupendo

si necesitas algún cable me avisas.

Yá me contarás

Un saludo
  #9 (permalink)  
Antiguo 15/08/2005, 15:20
 
Fecha de Ingreso: febrero-2005
Mensajes: 23
Antigüedad: 19 años, 6 meses
Puntos: 0
Te cuento tunait

Es perfecto y mucho más sencillo de modificar que el anterior.
Solo por abusar de tu amabilidad, ¿Se podría lograr que cuado un submenú esté abierto, al abrir otro submenú, se cierre el anterior?

Quedó así

http://ar.geocities.com/sexta_seccion/

Muy bueno lo tuyo

Edg
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:08.