Problema con Event JavaScript

Moises22 · #1 (**permalink**) 30/01/2007, 11:28

Hola Amigos.

He recojido un menu muy curioso y adaptable, muy interesante y que podeis aprovechar ya que lo pongo.

El problema es que en Mozilla como supuse trata el window.event de distinta forma. He mirado varios articulos de como utilizarlo pero no he dado con la tecla para poder adaptarlo a MOZILLA.

El codigo es muy sencillo y por eso lo recomiendo. Lo tratare de ir explicando:

Esto se incluye en la cabecera(entre <HEAD> y </HEAD>)

Código HTML:

<script language="JavaScript1.2">

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(){
   if(!document.all){
      return
	  }
   if (window.event.srcElement.id=="foldheader") {
      var srcIndex = window.event.srcElement.sourceIndex
      var nested = document.all[srcIndex+1]
      if (nested.style.display=="none") {
         nested.style.display=''
         window.event.srcElement.style.listStyleImage="url(open.gif)"
      }
      else {
         nested.style.display="none"
         window.event.srcElement.style.listStyleImage="url(fold.gif)"
      }
   }
}

document.onclick=change

</script>

Las listas del menu se incluyen muy facilmente en el BODY así:

Código HTML:

<ul>
<li id="foldheader">Desplegable numero 1</li>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><a href="http://www.midireccion.com"><b><u>Una de las direcciones</u></b></a></li>
         <li><a href="http://www.midireccion2.com"><b><u>Otra Direccion de las mias</u></b></a></li>
      </ul>
<li id="foldheader">Desplegable numero 2</li>
...
</ul>

Además podemos añadir estilos a estas listas de manera facil:

Código HTML:

<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>

¿QUE FALLA Y COMO ARREGLARLO PARA QUE FUNCIONE BIEN EN MOZILLA?

Si doy con la solución tb la pondré aquí para que todos podamos disfrutar de este recurso.

Un saludo y muchas gracias

Moises22 · #2 (**permalink**) 31/01/2007, 05:40

¿Nadie puede ayudarme en esto?

No se si me explicado muy mal o es muy enreversado.

capa · #3 (**permalink**) 31/01/2007, 07:39

uhmm. prueba con este.
function change(ev){
ev = ev ||window.event;
}

luego me cuentas..

Moises22 · #4 (**permalink**) 31/01/2007, 09:39

Lo he implementado asi, aunque no se si es lo que me sugerias:

Código HTML:

<script language="JavaScript1.2">
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(ev){
	ev = ev ||window.event; 
   if(!document.all){
      return
	  }
   if (ev.srcElement.id=="foldheader") {
      var srcIndex = ev.srcElement.sourceIndex
      var nested = document.all[srcIndex+1]
      if (nested.style.display=="none") {
         nested.style.display=''
         ev.srcElement.style.listStyleImage="url(open.gif)"
      }
      else {
         nested.style.display="none"
         ev.srcElement.style.listStyleImage="url(fold.gif)"
      }
   }
}

document.onclick=change
</script>

Si esto es lo que me sugerias no funciona, aunque entiendo que la solucion va por ahí segun lo que he leido.

¿Que puede ocurrir?

Mil Gracias por Adelantado.

ibme74 · #5 (**permalink**) 31/01/2007, 13:47

No soy un experto en Javascript pero creo que ese

Código HTML:

if(!document.all){
      return
	  }

debe desaparecer.

Moises22 · #6 (**permalink**) 01/02/2007, 03:27

No funciona.

Cuando hago eso da un error JavaScript el Documento.

Pero muchisimas gracias por intentar ayudar.

capa · #7 (**permalink**) 02/02/2007, 17:45

Hola, lo he revisado tu script, no creo que sea necesario usar el evento para onClik, esa acción lo puedes hacer con el mismo ratón al hacer clic, por otro lado puedes hacer onload en window, de la función que refieras a los elementos, luego puedes asignar lo eventos a caca elemento
algo como este:

elementos[].onmousedown = function() {
this. elementos[].style.display = 'block' ;
}

Lo revisare bien. :D

capa · #8 (**permalink**) 02/02/2007, 17:56

me parece que quieres este escript:

Código HTML:

<html>
<head>
<script type="text/javascript">
function SwitchMenu(obj){
var openImg = new Image();
openImg.src = "files/images/iconos/HS-S0.gif";
var closedImg = new Image();
closedImg.src = "files/images/iconos/HS-S1.gif";
	if(document.getElementById){
	var el = document.getElementById(obj);
	var objImg = document.getElementById(obj+'img');

	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 
		if(el.style.display != "block"){ 
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") 
				ar[i].style.display = "none";
				var ar2 = document.getElementById('sub'+(i+1)+'img')
				ar2.src = closedImg.src;
			}
			for (var i=1; i<ar.length+1; i++){

			}
			el.style.display = "block";
			objImg.src = openImg.src;
		}else{
			el.style.display = "none";
			objImg.src = closedImg.src;
		}
	}
}

</script>
</head>
<body>
<div style="height: 225px;" id="masterdiv">
<div onClick="SwitchMenu('sub1')"><img id="sub1img" src="S1.gif" align="middle" border="0">Acceso Alumnos</div>
 <span style="display: block;" class="submenu" id="sub1"> 
	<li><a href="#">Date de alta</a></li>
	<li><a href="#">Accede a tu cuenta</a></li>
 </span> 
<div onClick="SwitchMenu('sub2')"><img src="S1.gif" border="0" align="middle" id="sub2img">Acceso Centros</div>
 <span style="display: none;" class="submenu" id="sub2"> 
 	<li><a href="#">Dé de alta su centro</a></li>
	<li><a href="#">Acceda a su cuenta</a></li>
 </span> 
<div onClick="SwitchMenu('sub3')"><img id="sub3img" src="S1.gif" align="middle" border="0">Quienes somos</div>
 <span style="display: none;" class="submenu" id="sub3">
	<li><a href="#">Nuestra empresa</a></li>
	<li><a href="#">Contacte con nosotros</a></li>
 </span> 
<div onClick="SwitchMenu('sub4')"><img id="sub4img" src="S1.gif" align="middle" border="0">Nuestros servicios</div>
 <span style="display: none;" class="submenu" id="sub4">
	<li><a href="#">¡Publicite sus cursos !</a></li>
	<li><a href="#">Formación Cooperativa</a></li>
	<li><a href="#">Alquiler de Aula Virtual</a></li>
	<li><a href="#">Novedades y artículos</a></li>
	<li><a href="#" target="_blank">Ofertas de Trabajo</a></li>
 </span>
</div>
</body>
</html>

la encontré por otro lado no recuerdo el site, pero lo tenia en mis archivos, espero que te sirva.

hasta pronto.

Moises22 · #9 (**permalink**) 07/02/2007, 06:39

Muchisimas gracias CAPA.

Es justo lo que necesitaba.

Gracias a todos por vuestra ayuda.

capa · #10 (**permalink**) 16/02/2007, 15:50

Vale que te aya sido útil, hay estamos para echarnos las manitos.
Cooperar mutuamente