Como obtener dinamicamente el siguiente nivel con JS

junihh · #1 (**permalink**) 31/12/2009, 01:51

Hola señores

En AS2, si quiero obtener el siguiente nivel de una pelicula o clip de pelicula (movieclip), escribo la siguiente linea:

Código:

elmovieclip.getNextHighestDepth();

Eso me devuelve el valor numerico del siguiente nivel disponible, para evitar que si uso un nivel similar en dos objetos generados dinamicamente, se borre accidentalmente el objeto antiguo sustituido por otro nuevo.

Me gustaria aplicar algo similar a un script que estoy preparando en JS que genera dinamicamente tres layers, ya que por el momento estoy poniendo manualmente los niveles en los que se deben crear. Existe algo que se asemeje en JS al metodo usado en AS2 ??

Gracias anticipadas a cualquier informacion, enlace o ayuda que me puedan ofrecer.

kreativodesigns · #2 (**permalink**) 31/12/2009, 03:31

a que te refieres con niveles?

junihh · #3 (**permalink**) 31/12/2009, 07:55

Niveles o levels. Toma como ejemplo a Photoshop o Illustrator. Ambos usan capas (layers) y para lograr que un objeto se vea delante de otro, solo sobrepones las capas y listo. Cada capa es independiente de la otra y nunca se juntan a menos que uses la opcion "Fusionar capas".

Es eso. En Flash, cuando generamos objetos dinamicamente es obligatorio asignarle a cada objeto un nivel de capa distinto a los anteriores, porque como mencione, dos objetos con el mismo nivel de capa se reemplazan.

Solo necesito saber si existe algo similar a "getNextHighestDepth()" para asignar un numero de capa distinto automaticamente a "objeto.style.zIndex". Entiendo que puede ser confuso para quien no sepa AS2, asi que espero haberme explicado esta vez.

kreativodesigns · #4 (**permalink**) 31/12/2009, 08:09

no te sirve el asignarle como tu dices al z-index distintos valores?

Adler · #5 (**permalink**) 31/12/2009, 08:42

Hola

A ver si es lo que "buscas"

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
var nivel = 1;
var PosElementoAlto = 0 ;
var Arr = [];
 
var info = {
captura_objeto : function(idnombre) {
    if (ns6)
    {
    return document.getElementById(idnombre);
    }
    else if (ie4)
    {
    return document.all[idnombre];
    }
    else if (ns4)
    {
    return document.layers[idnombre];
    }
    else
    {
    return null;
    }
},
 
 
Evento : function(elemento,nomevento,funcion) {
    if (elemento.attachEvent)
    {
        var fct=function(){
            funcion.call(elemento,window.event);
        }
        elemento.attachEvent('on'+nomevento,fct);
        return true;
    }
    else  
        if (elemento.addEventListener)
        {
        elemento.addEventListener(nomevento,funcion,false);
        return true;
        }
        else
        return false;
},
 
 
init: function(){
var ref = info.captura_objeto('lasLigas').getElementsByTagName('A');
    for (var i = 0; i < ref.length; i++) {
var infodiv = info.captura_objeto('info_menu_'+ref[i].id);
        if (document.Element || document.body) {
            info.altura = infodiv.scrollHeight;
        } else {
            info.altura = infodiv.clientHeight;
        }
            infodiv.style.display = 'none';
            infodiv.style.zIndex = 0;
                    info.Evento(ref[i], 'click', function() {info.efecto_largo(this.id)});
    }
},
 
 
PosicionAbsolutaElemento: function(element)  {
var window_height =  parseInt(((screen.height) / 2) - info.altura);
var window_width = parseInt(((screen.width) / 2) - 150);
 
    if (typeof element == "string")
        element = info.captura_objeto(element)
            if (!element) return { top:0,left:0 };
var y = 0;
var x = 0;
            while (element.offsetParent) {
                    x += element.offsetLeft;
                    y += element.offsetTop;
                element = element.offsetParent;
     }
    return {top:y, left:x, height:window_height, width: window_width};
 
},
 
    
efecto_largo: function(id){
            if(info.captura_objeto('info_menu_'+id).style.display == 'none'){
                    clearInterval(info.intervalo);
                info.despliega_largo(id);
        info.abierto_largo = false;
//alert(info.abierto_largo);
            }else{
                    clearInterval(info.intervalo);
                    info.recoge_largo(id);
        info.abierto_largo = true;
//alert(info.abierto_largo);
            }
},
    
 
despliega_largo: function(id){
Arr.unshift(id);
//alert(Arr);
    for (var i = 0; i < Arr.length; i++) {
var infodiv = info.captura_objeto('info_menu_'+Arr[i]);
var PosElemento = info.PosicionAbsolutaElemento(Arr[i]);
        if (i == 0) {
PosElementoAlto = PosElemento.top;
            infodiv.style.height = '1px';
            infodiv.style.display = 'block';
            infodiv.style.zIndex = nivel;
            infodiv.style.left = parseInt(PosElemento.width) +'px';
            infodiv.style.top = parseInt(PosElemento.height - PosElementoAlto) +'px';
                    info.intervalo = setInterval(function(){ info.redimenciona_largo(info.altura,id); }, 1);
            nivel ++;
//alert(parseInt(PosElementoAlto))
        } else {
var izq_arr = parseInt(20 * i)  
            infodiv.style.left = parseInt(PosElemento.width - izq_arr) +'px';
            infodiv.style.top = parseInt((PosElemento.height) - (PosElementoAlto + izq_arr)) +'px';
        }
    }
},
    
 
recoge_largo: function(id){
//alert(id)
var infodiv = info.captura_objeto('info_menu_'+id);
var i, encaja;
    for (i = 0; i < Arr.length; i++) {
        if (Arr[i] == id) {
                encaja = i;
    break;
        }
    }
    for (var j = 0; j < Arr.length; j++) {
        if (j > encaja ) {
var infodiv2 = info.captura_objeto('info_menu_'+Arr[j]);
var PosElemento = info.PosicionAbsolutaElemento('info_menu_'+Arr[j]);
            infodiv2.style.left = parseInt(PosElemento.left + 20) +'px';
            infodiv2.style.top = parseInt(PosElemento.top + 20) +'px';
 
        }
    }
    Arr.splice(encaja, 1);
            infodiv.style.height = info.altura + 'px';
    info.intervalo = setInterval(function(){ info.redimenciona_largo(0,id); }, 1);
},
    
 
redimenciona_largo: function(limite,id){
var infodiv = info.captura_objeto('info_menu_'+id);
    inicial = parseInt(infodiv.style.height);
            actual = Math.ceil((limite - inicial) / 4);
            inicial += actual;
            infodiv.style.height = inicial + 'px';
        if (parseInt(inicial) >= (limite - 5) && parseInt(inicial) <= (limite + 5)) {
            if (info.abierto_largo == false) {
                infodiv.style.height = limite + 'px';
                clearInterval(info.intervalo);
            } else {
                infodiv.style.height = '0px';
                infodiv.style.display = 'none';
                clearInterval(info.intervalo);
            }
        }
},
   
 
z_Index : function(id){
// RECOGER
var infodiv = info.captura_objeto('info_menu_'+id);
var i, encaja;
    for (i = 0; i < Arr.length; i++) {
        if (Arr[i] == id) {
                encaja = i;
    break;
        }
    }
//alert(encaja);
    for (var j = 0; j < Arr.length; j++) {
        if (j > encaja) {
var infodiv2 = info.captura_objeto('info_menu_'+Arr[j]);
var PosElemento = info.PosicionAbsolutaElemento('info_menu_'+Arr[j]);
            infodiv2.style.left = parseInt(PosElemento.left + 20) +'px';
            infodiv2.style.top = parseInt(PosElemento.top + 20) +'px';
 
        }
    }
    Arr.splice(encaja, 1);
 
 
//MOSTRAR
Arr.unshift(id);
 
    for (var i = 0; i < Arr.length; i++) {
var PosElemento = info.PosicionAbsolutaElemento(Arr[i]);
var infodiv = info.captura_objeto('info_menu_'+Arr[i]);
//if (PosElemento.top == 0) PosElemento.top = 9;
        if (i == 0) {
            infodiv.style.zIndex = nivel;
            infodiv.style.left = parseInt(PosElemento.width) +'px';
            infodiv.style.top = parseInt(PosElemento.height - (PosElemento.top + PosElementoAlto)) +'px';
            nivel ++;
//alert(parseInt(PosElementoAlto))
        } else {
//var infodiv = info.captura_objeto('info_menu_'+Arr[i]);
var izq_arr = parseInt(20 * i)
            infodiv.style.left = parseInt(PosElemento.width - izq_arr) +'px';
            infodiv.style.top = parseInt(PosElemento.height - (PosElementoAlto + izq_arr)) +'px';
        }
    }
},
 
abierto_largo : true, 
abierto_ancho : true
}
 
info.Evento(window, 'load', info.init); 
</script>
</head>
<body>
<div id="lasLigas">
<a href="javascript:void(0);" id="1">MOTOCICLETAS</a> ||
<a href="javascript:void(0);" id="2">COCHES</a> ||
<a href="javascript:void(0);" id="3">AVIONES</a> ||
<a href="javascript:void(0);" id="4">BARCOS</a>
</div>
 
<div id="info_menu_1" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(1)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(1)" title="Cierra">X</a></span> MUESTRAS DE MOTOCICLETAS<br /><br />
Un texto que quiero ocultar y mostrar con el botón 1<br />
Un texto que quiero ocultar y mostrar con el botón 1<br />
Un texto que quiero ocultar y mostrar con el botón 1
</div>
 
 
<div id="info_menu_2" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(2)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(2)" title="Cierra">X</a></span> MUESTRAS DE COCHES<br /><br />
Un texto que quiero ocultar y mostrar con el botón 2<br />
Un texto que quiero ocultar y mostrar con el botón 2<br />
Un texto que quiero ocultar y mostrar con el botón 2
</div>
 
 
<div id="info_menu_3" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(3)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(3)" title="Cierra">X</a></span> MUESTRAS DE AVIONES<br /><br />
Un texto que quiero ocultar y mostrar con el botón 3<br />
Un texto que quiero ocultar y mostrar con el botón 3
</div>
 
 
<div id="info_menu_4" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(4)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(4)" title="Cierra">X</a></span> MUESTRAS DE BARCOS<br /><br />
Un texto que quiero ocultar y mostrar con el botón 4<br />
Un texto que quiero ocultar y mostrar con el botón 4<br />
Un texto que quiero ocultar y mostrar con el botón 4
</div>
</body>
</html>

Suerte

junihh · #6 (**permalink**) 31/12/2009, 08:53

@kreativodesigns: La pregunta de si hay un metodo para aplicar un valor automatico es para evitar hacerlo manual, que es el metodo que estoy usando ahora.

@Adler: Mucho codigo para algo tan simple

Creo que me vere forzado a usar la forma como aplicaba los niveles cuando me inicie con Flash: elnivel++;

Gracias a ambos por sus ideas y ayuda.

buzu · #7 (**permalink**) 31/12/2009, 09:05

Javascript no tiene un método para obtener el siguiente nivel. En actionscript eso es muy útil por que puedes hacer muchas cosas sin preocuparte que un elemento tenga cierta nivel que sea inferior a otro elemento y por lo tanto que quede detras de ese otro elemento en caso de que se superpongan. Afortunadamente el Javascript podemos simular dicho comportamiento sin necesidad de hacer tanto circo.
Cuando escribes HTML, el elemento que aparece al final del documento, es el elemento con nivel más alto, por lo que lo único que tendrías que hacer es mover el elemento que quieres que tenga el nivel más alto al final del documento. Esto sirve siempre y cuando no modifiques directamente el z-index de ningún otro elemento.
En caso de que tengas que modificar el z-index de algun otro elemento, lo que tendrías que hacer es objeto que te lleve un record sobre los z-index de los elementos. Esto te va a agilizar mucho las cosas, en comparación con tener que estar obteniendo el z-index de cada elemento cada que necesites calcular el nivel más alto.

Panino5001 · #8 (**permalink**) 31/12/2009, 09:26

Es bastante diferente a actionScript (donde tampoco es muy recomendable usar getNextHighestDepth, mejor usar DepthManager, pero claro, es cuestión de gustos).
En javascript, sólo los elementos posicionados con propiedad position diferentes a static son susceptibles de manejar z-index (zIndex para javascript). Además, el valor máximo de z-index varía para los diferentes navegadores: http://softwareas.com/whats-the-maximum-z-index.
Otra cuestión a considerar para poder acceder a los valores de z-index es si se definieron con el atributo style o si se definieron en hojas de estilo o tags style. Si se definieron con style podrías acceder a su valor con elemento.style, pero si no, tandrías que usar los estilos computados (getComputedStyle o currentStyle para explorer).
Pero en general, podrías usar algo como esto para emular esa funcionalidad:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style>
#dd{ position:absolute; z-index:200}
</style>
<script>
function css(o,prop){
    if(window.getComputedStyle){
        return document.defaultView.getComputedStyle(o,null).getPropertyValue(prop);
    }else{
        var re = /(-([a-z]){1})/g;
        if (prop == 'float') prop = 'styleFloat';
        if (re.test(prop)) {
            prop = prop.replace(re, function () {
                return arguments[2].toUpperCase();
            });
        }
        return o.currentStyle[prop] ? o.currentStyle[prop] : null;
    }
}  
function getNextHighestDepth(){
    var col=document.getElementsByTagName('*'),l=col.length,i,mx=0,t;
    for(i=0;i<l;i++){
        t=parseInt(css(col[i],'z-index'));
        if(t && t>mx)
            mx=t;
    }
    return mx+1;
}
onload=function(){
    alert(getNextHighestDepth());
}
</script>
</head>

<body>
<div id="pp" style="position:absolute; z-index:100">Colocar aquí el contenido para  id "pp"</div>
<div id="dd">Colocar aquí el contenido para  id "dd"</div>
<p>nada</p>

</body>
</html>

Panino5001 · #9 (**permalink**) 31/12/2009, 09:33

Edito: igualmente, escucha a Buzu (

) que tiene mucha razón acerca de lo del rendimiento.

junihh · #10 (**permalink**) 31/12/2009, 10:09

@buzu: Estoy preparando un script que crea tres capas para mostrar mensajes de alerta: Un div con fondo negro-transparente, un div con el mensaje de alerta y finalmente una imagen como boton de cerrar. Crei que estaba obligado a aplicar el zIndex, pero luego de probar lo que mencionas que siempre el ultimo elemento en la pagina es el de mayor posicion, veo que realmente no es necesario el zIndex. De plano lo quite

@Panino5001: Los elementos que mencione a @buzu son creados dinamicamente y no uso CSS preescrito, la apariencia de los div la aplico directamente via la funcion. De todos modos esas funciones que pones estan muy interesantes, asi que si no te molesta las querre tener guardadas por ahi si en algun momento mas adelante las necesito.

Muchisimas gracias por sus respuestas porque me han servido bastante.

junihh · #11 (**permalink**) 31/12/2009, 10:15

Disculpen por olvidar algo importante: Feliz año para todos

buzu · #12 (**permalink**) 31/12/2009, 15:28

Pues como te decía, no es necesario tanto circo. Algunas veces es mejor saber como trabaja HTMl y el DOM. Yo generalmente no uso z-index, pero puede resultar muy útil. Por ejemplo, sin el z-index hacer algo como lo que hago en http://imbuzu.wordpress.com/2009/12/...en-javascript/ sería más laborioso.

Por otro lado, estar acá para ver la función de panino (Hola amigo) ha sido muy educativo. Aun que tiene el problemilla que te comentaba sobre rendimiento, y más por que el DOM es una pesadilla cuando se trata de rendimiento.

Feliz año a todos.

Amigo Panino, un placer coincidir después de tanto tiempo.