pasar valores a funciones dentro de anónimas

AlZuwaga · #1 (**permalink**) 25/07/2007, 15:04

No sé si está bien el título, pero no le encuentro la vuelta a pasarle el valor de i de la función original algo() a la función otra_funcion() que está dentro de una función anónima:

Código:

function algo(){
	var coleccion = document.getElementsByTagName('un_tag');
		for (var i = 0, j = coleccion.length; i < j; i++) {
			coleccion[i].onmouseover = function(){otra_funcion(this, i)};
		}
}

¿me expliqué?

Panino5001 · #2 (**permalink**) 25/07/2007, 20:36

A mi esto me funciona correctamente:

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>test</title>

<script>

function algo(){

    var coleccion = document.getElementsByTagName('div');

        for (var i = 0, j = coleccion.length; i < j; i++) {

            coleccion[i].onmouseover = function(){alert(this.id+'--'+i)};

        }

}

</script>

</head>

 
<body onload="algo()">

<div id="a" style="border:thin solid #000;margin:3px;">aaa</div>

<div id="b" style="border:thin solid #000;margin:3px;">bbb</div>

<div id="c" style="border:thin solid #000;margin:3px;">ccc</div>

</body>

</html>

AlZuwaga · #3 (**permalink**) 25/07/2007, 21:35

Hola Panino5001, fijate que lo que devuelve el alert() es a--3, b--3 y c--3. Lo que quisiera es que me devuelva el valor de i en cada vuelta del for... o sea, según tu ejemplo, a--1, b--2 y c--3

En mi ejemplo funcional (no lo tengo acá, mañana veo de postearlo) i SIEMPRE vale 2... que es el valor de coleccion.length (porque tenía 2 elementos que cumplían con el document.getElementsByTagName())

Estoy medio perdido...

Panino5001 · #4 (**permalink**) 25/07/2007, 21:44

A ver ahora... lo que hice es agregarle un atributo al objeto (index):

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>test</title>

<script>

function algo(){

    var coleccion = document.getElementsByTagName('div');

        for (var i = 0, j = coleccion.length; i < j; i++) {

            coleccion[i].index=i;

            coleccion[i].onmouseover = function(){alert(this.id+'--'+i+'--'+this.index)};

        }

}

 
</script>

</head>

 
<body onload="algo()">

<div id="a" style="border:thin solid #000;margin:3px;">aaa</div>

<div id="b" style="border:thin solid #000;margin:3px;">bbb</div>

<div id="c" style="border:thin solid #000;margin:3px;">ccc</div>

</body>

</html>

AlZuwaga · #5 (**permalink**) 25/07/2007, 22:04

Perfecto, Capo di tuti la mafia del JS!!!

Me acabás de sacar un conflicto de mi cabeza... me quedan muchísimos más aún, pero un foro tecnológico no es el lugar indicado para tratarlos

Creo que esta noche dormiré más tranquilo

Saludos

AlZuwaga · #6 (**permalink**) 25/07/2007, 22:11

Aunque... mmm... no sé... ¿qué es lo que específicamente hace el index?
o sea... ¿qué le estoy anexando al TAG coleccion[i] al decirle que su index asuma el valor de i?

Te cuento porque había probado poner coleccion[i].id=i y si pude lograr lo que quería... pero mi intención no era modificar ningún atributo del elemento...

Espero una respuesta antes de ir a dormir o me voy ahora con la posibilidad de tener pesadillas

(

)

AlZuwaga · #7 (**permalink**) 25/07/2007, 22:20

Ya, nada... el atributo index no existe... da lo mismo poner coleccion[i].panino=i y luego rescatarlo con this.panino

Al menos eso deduje... y si es así, puedo ir a dormir tranquilo!!!
Gracias de nuevo

Panino5001 · #8 (**permalink**) 25/07/2007, 23:23

Exacto, podés asignarle cualquier propiedad y ya queda dentro del scope (o como se diga) y ya puede ser rescatada. Es algo que se usa mucho en actionscript con movieClips.

AlZuwaga · #9 (**permalink**) 26/07/2007, 13:00

Hola nuevamente.
Acá dejo la implementación de la función en cuestión. La modifiqué un poco desde ayer porque me pareció mejor de esta manera. Igualmente debe ser 100% mejorable. Estoy aprendiendo y me gustaría algún que otro posible feddback. Se trata de un generador de tooltips.

Código:

<!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>azTT ToolTip</title>
<script type="text/javascript">

function getElementsByClassName(strClass, strTag, objContElm) {
//Obtenida de: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
  strTag = strTag || "*";
  objContElm = objContElm || document;    
  var objColl = objContElm.getElementsByTagName(strTag);
  if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
  var arr = new Array();                              
  var delim = strClass.indexOf('|') != -1  ? '|' : ' ';   
  var arrClass = strClass.split(delim);    
  for (var i = 0, j = objColl.length; i < j; i++) {                         
    var arrObjClass = objColl[i].className.split(' ');   
    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
    var c = 0;
    comparisonLoop:
    for (var k = 0, l = arrObjClass.length; k < l; k++) {
      for (var m = 0, n = arrClass.length; m < n; m++) {
        if (arrClass[m] == arrObjClass[k]) c++;
        if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
          arr.push(objColl[i]); 
          break comparisonLoop;
        }
      }
    }
  }
  return arr; 
}


function prepara_tooltips(){
	var coleccion = getElementsByClassName('azTT');
		for (var i = 0; i < coleccion.length; i++) {
			if(coleccion[i].title != ''){
				titulo = coleccion[i].title;
				coleccion[i].title = '';
				nuevo_span = document.createElement('span');
				nuevo_span_texto = document.createTextNode(titulo);
//				nuevo_span_texto = document.createTextNode(coleccion[i].textContent);
				nuevo_span.appendChild(nuevo_span_texto);
				nuevo_span.setAttribute('id', 'azTT' + i)
				nuevo_span.style.display = 'none';
				nuevo_span.style.position = 'absolute';
				nuevo_span.style.border = '1px solid #000000';
				nuevo_span.style.background = '#FFCC00';
				nuevo_span.style.top = coleccion[i].offsetTop + 20 + 'px';
				nuevo_span.style.left = coleccion[i].offsetLeft + 5 + 'px';
				nuevo_span.style.padding = '2px';
				coleccion[i].parentNode.insertBefore(nuevo_span, coleccion[i]);
				// GRACIAS a Panino5001 (http://www.forosdelweb.com/member.php?u=65984)
				coleccion[i].paninoIndex = 'azTT' + i;
				coleccion[i].onmouseover = function(){tooltipsOn(this.paninoIndex)};
				coleccion[i].onmouseout = function(){tooltipsOff(this.paninoIndex)};
			}
		}
}

function tooltipsOn(azTT){
	document.getElementById(azTT).style.display = 'block';
}

function tooltipsOff(azTT){
	document.getElementById(azTT).style.display = 'none';
}

window.onload = prepara_tooltips;
</script>
</head>

<body>
<h1>azTT ToolTips</h1>
<p>Se trata de un generador de tooltips que utiliza <dfn title="Javascript" class="azTT">JS</dfn> para rescatar el atibuto title de todos los elementos que tengan una clase <dfn title="Cascade Style Sheet" class="azTT">CSS</dfn> llamada azTT. Sale a ra&iacute;z del  mensaje <a href="http://www.forosdelweb.com/showthread.php?t=507336" target="_blank">Descripci&oacute;n emergente en imageboton</a> publicado en <strong class="azTT" title="Foros del Web">FDW</strong> y no es m&aacute;s que un ejercicio que me servir&aacute; para aprender un poco.</p>
<p>Aplicado sobre una imagen:<br /><img src="http://www.forosdelweb.com/fdwtheme/mdw-powered.gif" alt="Maestros del Web" title="Maestros del Web" class="azTT" /></p>
<fieldset>
<legend>Aplicado sobre los input's</legend>
<form id="form1" name="form1" method="post" action="">
  <label for="usuario">Usuario</label>
  <input type="text" name="usuario" id="usuario" class="azTT" title="Introduzca su nombre de usuario" /><br />
  <label for="password">Password</label>
  <input type="text" name="password" id="password" class="azTT" title="Introduzca su contraseña" /><br />
  <input type="submit" name="enviar" value="Enviar" id="enviar" class="azTT" title="Presione aquí para ingresar" />
  <br />
</form>
</fieldset>
</body>
</html>

Saludos

Panino5001 · #10 (**permalink**) 26/07/2007, 20:05

A mi me parece bien. Sólo le hice un ajuste para las imágenes, porque son los elementos que por su altura permiten tocar el tooltip con el mouse y cuando eso pasa el tooltip parpadea como loco. A ver qué te parece:

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>azTT ToolTip</title>

<script type="text/javascript">

 
function getElementsByClassName(strClass, strTag, objContElm) {

//Obtenida de: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/

  strTag = strTag || "*";

  objContElm = objContElm || document;    

  var objColl = objContElm.getElementsByTagName(strTag);

  if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;

  var arr = new Array();                              

  var delim = strClass.indexOf('|') != -1  ? '|' : ' ';   

  var arrClass = strClass.split(delim);    

  for (var i = 0, j = objColl.length; i < j; i++) {                         

    var arrObjClass = objColl[i].className.split(' ');   

    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;

    var c = 0;

    comparisonLoop:

    for (var k = 0, l = arrObjClass.length; k < l; k++) {

      for (var m = 0, n = arrClass.length; m < n; m++) {

        if (arrClass[m] == arrObjClass[k]) c++;

        if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {

          arr.push(objColl[i]); 

          break comparisonLoop;

        }

      }

    }

  }

  return arr; 

}

 
 
function prepara_tooltips(){

    var coleccion = getElementsByClassName('azTT');

        for (var i = 0; i < coleccion.length; i++) {

            if(coleccion[i].title != ''){

                titulo = coleccion[i].title;

                coleccion[i].title = '';

                nuevo_span = document.createElement('span');

                nuevo_span_texto = document.createTextNode(titulo);

//                nuevo_span_texto = document.createTextNode(coleccion[i].textContent);

                nuevo_span.appendChild(nuevo_span_texto);

                nuevo_span.setAttribute('id', 'azTT' + i)

                nuevo_span.style.display = 'none';

                nuevo_span.style.position = 'absolute';

                nuevo_span.style.border = '1px solid #000000';

                nuevo_span.style.background = '#FFCC00';

                if(coleccion[i].nodeName=='IMG')AJUSTE=-1;else AJUSTE=1;

                nuevo_span.style.top = coleccion[i].offsetTop + 20*AJUSTE + 'px';

                nuevo_span.style.left = coleccion[i].offsetLeft + 5 + 'px';

                nuevo_span.style.padding = '2px';

                coleccion[i].parentNode.insertBefore(nuevo_span, coleccion[i]);

                // GRACIAS a Panino5001 (http://www.forosdelweb.com/member.php?u=65984)

                coleccion[i].paninoIndex = 'azTT' + i;

                coleccion[i].onmouseover = function(){tooltipsOn(this.paninoIndex)};

                coleccion[i].onmouseout = function(){tooltipsOff(this.paninoIndex)};

            }

        }

}

 
function tooltipsOn(azTT){

    document.getElementById(azTT).style.display = 'block';

}

 
function tooltipsOff(azTT){

    document.getElementById(azTT).style.display = 'none';

}

 
window.onload = prepara_tooltips;

</script>

</head>

 
<body>

<h1>azTT ToolTips</h1>

<p>Se trata de un generador de tooltips que utiliza <dfn title="Javascript" class="azTT">JS</dfn> para rescatar el atibuto title de todos los elementos que tengan una clase <dfn title="Cascade Style Sheet" class="azTT">CSS</dfn> llamada azTT. Sale a ra&iacute;z del  mensaje <a href="http://www.forosdelweb.com/showthread.php?t=507336" target="_blank">Descripci&oacute;n emergente en imageboton</a> publicado en <strong class="azTT" title="Foros del Web">FDW</strong> y no es m&aacute;s que un ejercicio que me servir&aacute; para aprender un poco.</p>

<p>Aplicado sobre una imagen:<br /><img src="http://www.forosdelweb.com/fdwtheme/mdw-powered.gif" alt="Maestros del Web" title="Maestros del Web" class="azTT" /></p>

<fieldset>

<legend>Aplicado sobre los input's</legend>

<form id="form1" name="form1" method="post" action="">

  <label for="usuario">Usuario</label>

  <input type="text" name="usuario" id="usuario" class="azTT" title="Introduzca su nombre de usuario" /><br />

  <label for="password">Password</label>

  <input type="text" name="password" id="password" class="azTT" title="Introduzca su contraseña" /><br />

  <input type="submit" name="enviar" value="Enviar" id="enviar" class="azTT" title="Presione aquí para ingresar" />

  <br />

</form>

</fieldset>

</body>

</html>

AlZuwaga · #11 (**permalink**) 26/07/2007, 20:55

GHola.
No lo he probado, mañana lo haré, pero te cuento que me di cuenta de eso :)
Estuve probando un par de cosas para hacer que el tooltip aparezca según la posición X+x e Y+x del mouse y que al mover éste el tooltip también lo haga, pero me está funcionando medio para la merda. No tengo las cosas acá, siempre olvido traerlas... mañana seguiré con ello y seguramente preguntaré cómo resolverlo ;)

Nos vemos

caricatos · #12 (**permalink**) 27/07/2007, 04:16

Hola:

¡Interesante tema!
En las FAQs aparte de haber una par de temas sobre tooltips (uno mío), hay un sistema para obtener las coordenadas del ratón... y para que el cuadro pueda moverse, la asignación de coordenadas (top, left) debería realizarse desde el propio evento, así que en principio aparte de cambiar el display habría que calcular esas coordenadas (y considerar el body.scrollLeft/Top)... y también definir el mousemove.

Saludos

AlZuwaga · #13 (**permalink**) 27/07/2007, 11:18

Hola caricatos, efectivamente de la faq obtuve el script para obtener las coordenadas del ratón :)

Lo puse así, pero no me está funcionando como debiera o quisiera:

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>azTT ToolTip</title>
<script type="text/javascript">
var mousePos

function getElementsByClassName(strClass, strTag, objContElm) {
//Obtenida de: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
  strTag = strTag || "*";
  objContElm = objContElm || document;    
  var objColl = objContElm.getElementsByTagName(strTag);
  if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
  var arr = new Array();                              
  var delim = strClass.indexOf('|') != -1  ? '|' : ' ';   
  var arrClass = strClass.split(delim);    
  for (var i = 0, j = objColl.length; i < j; i++) {                         
    var arrObjClass = objColl[i].className.split(' ');   
    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
    var c = 0;
    comparisonLoop:
    for (var k = 0, l = arrObjClass.length; k < l; k++) {
      for (var m = 0, n = arrClass.length; m < n; m++) {
        if (arrClass[m] == arrObjClass[k]) c++;
        if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
          arr.push(objColl[i]); 
          break comparisonLoop;
        }
      }
    }
  }
  return arr; 
}


function prepara_tooltips(){
    var coleccion = getElementsByClassName('azTT');
        for (var i = 0; i < coleccion.length; i++) {
            if(coleccion[i].title != ''){
                titulo = coleccion[i].title;
                coleccion[i].title = '';
                if(coleccion[i].textContent != ''){
                    coleccion[i].style.borderBottom = '1px dashed #FF0000';
                }
                nuevo_span = document.createElement('span');
                nuevo_span_texto = document.createTextNode(titulo);
                nuevo_span.appendChild(nuevo_span_texto);
                nuevo_span.setAttribute('id', 'azTT' + i)
                nuevo_span.style.display = 'none';
                nuevo_span.style.position = 'absolute';
                nuevo_span.style.border = '1px solid #000000';
                nuevo_span.style.background = '#FFCC00';
//                nuevo_span.style.top = coleccion[i].offsetTop + 20 + 'px';
//                nuevo_span.style.left = coleccion[i].offsetLeft + 5 + 'px';
                nuevo_span.style.padding = '2px';
                coleccion[i].parentNode.insertBefore(nuevo_span, coleccion[i]);
                // GRACIAS a Panino5001 (http://www.forosdelweb.com/member.php?u=65984)
                coleccion[i].paninoIndex = 'azTT' + i;
                coleccion[i].onmouseover = function(){tooltipsOn(this, this.paninoIndex)};
                coleccion[i].onmouseout = function(){tooltipsOff(this.paninoIndex)};
            }
        }
}

function tooltipsOn(elem, azTT){
    azTT = document.getElementById(azTT);
    azTT.style.display = 'block';
    azTT.style.top = mousePos.y + 5 + 'px';
    azTT.style.left = mousePos.x + 5 + 'px';
}

function tooltipsOff(azTT){
    azTT = document.getElementById(azTT);
    azTT.style.display = 'none';
}

function mouseMove(ev){
    ev           = ev || window.event;
//    var mousePos = mouseCoords(ev);
    mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

document.onmousemove = mouseMove;
window.onload = prepara_tooltips;
</script>
</head>

<body">
<h1 onclick="alert(mousePos.x)">azTT ToolTips</h1>
<p>Se trata de un generador de tooltips que utiliza <dfn title="Javascript" class="azTT">JS</dfn> para rescatar el atibuto title de todos los elementos que tengan una clase <dfn title="Cascade Style Sheet" class="azTT">CSS</dfn> llamada azTT. Sale a ra&iacute;z del  mensaje <a href="http://www.forosdelweb.com/showthread.php?t=507336" target="_blank">Descripci&oacute;n emergente en imageboton</a> publicado en <strong class="azTT" title="Foros del Web">FDW</strong> y no es m&aacute;s que un ejercicio que me servir&aacute; para aprender un poco.</p>
<p>Aplicado sobre una imagen:<br /><img src="http://www.forosdelweb.com/fdwtheme/mdw-powered.gif" alt="Maestros del Web" title="Maestros del Web" class="azTT" /></p>
<fieldset>
<legend>Aplicado sobre los input's</legend>
<form id="form1" name="form1" method="post" action="">
  <label for="usuario">Usuario</label>
  <input type="text" name="usuario" id="usuario" class="azTT" title="Introduzca su nombre de usuario" /><br />
  <label for="password">Password</label>
  <input type="text" name="password" id="password" class="azTT" title="Introduzca su contraseña" /><br />
  <input type="submit" name="enviar" value="Enviar" id="enviar" class="azTT" title="Presione aquí para ingresar" />
</form>
</fieldset>
</body>
</html>

Lo que hace es... algo así como detectar las coordenadas del roedor al producirse el evento onmouseover establecido en la función prepara_tooltips(). Cuando el ratón entra por primera vez en el elemento que dispara el inmouseover, se muestra el tooltip apareciendo en las coordenadas especificadas (X+5 e Y+5), pero luego, al mover el ratón sobre el elemento y posicionarse éste sobre el tooltip, es cuando nuevamente se dispara el onmouseover produciendo un desplazamiento del tooltip un tanto brusco.

Supongo que debería tener dentro de la función tooltipsOn() la llamada a onmousemove, para que el desplazamiento sea fluido, pero no me está saliendo!!

Alguna sugerencia?

Edit: Tuve que definir var mousePos fuera de toda función para poder acceder a mousePos.x y mousePos.y desde tooltipsOn()... ¿esto tiene sentido?