Mostrar informacion detallada de IP

Chico3001 · #1 (**permalink**) 18/12/2011, 17:50

Hola.... estoy aprendiendo JavaScript y quiero desarrollar una funcion para mostrar informacion detallada de unas IPs que tengo en la base de datos

Para comenzar me baje el ejemplo de [URL="http://www.forosdelweb.com/wiki/Javascript:Title_mejorado_%28tooltip%29"]http://www.forosdelweb.com/wiki/Javascript:Title_mejorado_%28tooltip%29[/URL], al implementarlo en una pagina funciona bien, pero al pasarlo a mi aplicacion la funcion move no funciona. Al ver la consola de erorres me dice "error al analizar el valor para TOP, declaracion rechazada"

Alguien me podria explicar a que se debe este error?

Este es el codigo generado de mi pagina:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Administracion de Empresas</title>
	<link rel="stylesheet" type="text/css" href="templates/admin.css" />
	<link rel="shortcut icon" href="logo.ico" />
	<script type="text/javascript" src="include/funciones.js"></script>
</head>
<body>

<div id="header">
	<img src="templates/images/logo.png" width="80" height="80" alt="" title="" />
	<ul id="menu">
		<li><a href="index2.php"><b>Inicio</b></a></li>
		<li><a href="empresa.php"><b>Directorio</b></a></li>
		<li><a href="stats.php"><b>Estadisticas</b></a></li>
		<li><a href="index2.php?action=salir"><b>Salir</b></a></li>

	</ul>
</div>

<div id="contenido">
	<div id="col2">
		<div id="menulat">
			<ul>
				<li><h1>Opciones</h1></li>
				<li>
					<ul>

						<li><a href="stats.php?action=borrar_visitas">Borrar Visitas</a></li>
						<li><a href="index2.php?action=salir">Salir</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div id="col1">

		<div class="directorio">
			<table>
				<thead>
					<tr>
						<th style="width:5%;">#</th>
						<th style="width:10%;">IP</th>
						<th style="width:50%;">Navegador</th>

						<th style="width:15%;">Pagina</th>
						<th style="width:20%;">Fecha</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="0" class="cancel"><table><tr>
							<th ><a href=" "> </a></th>

						</tr></table></td>
					</tr>
				</tfoot>
				<tbody>
					<tr class="odd">
						<td class="center">1</td>
						<td class="center"><span onmouseover="mostrar('127.0.0.1')" onmousemove="mover()" onmouseout="ocultar()">127.0.0.1</span></td>
						<td class="center">Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) G</td>

						<td class="center">/index2.php</td>
						<td class="center">18/dic/2011 - 04:23 PM</td>
					</tr>
					<tr class="even">
						<td class="center">2</td>
						<td class="center"><span onmouseover="mostrar('127.0.0.1')" onmousemove="mover()" onmouseout="ocultar()">127.0.0.1</span></td>
						<td class="center">Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) G</td>

						<td class="center">/entrar.php</td>
						<td class="center">18/dic/2011 - 04:23 PM</td>
					</tr>
				</tbody>
			</table>
			<div id="ayuda"></div>
			<div class="cat_links">
				<ul>

					<li class="current"><a href="stats.php">Visitas</a></li>
					<li><a href="stats.php?action=blanca">Lista Blanca</a></li>
					<li><a href="stats.php?action=negra">Lista Negra</a></li>
				</ul>
			</div>
		</div>
	</div>

</div>
<div class="push"></div>
<div id="footer"></div>
</body>
</html>

zerokilled · #2 (**permalink**) 18/12/2011, 18:12

buenas...
tengo dudas, ¿en cuál navegador y versión te falla? hice pruebas en firefox8 y chrome16, en ambos trabaja bien. he de suponer que el error esta de tu parte, probablemente conflicto entre códigos. además, ¿que tiene que ver dicho script con lo que intentas hacer? de nuevo, he de suponer que estas agregando "juguetitos" a tu aplicación. primero desarrolla tu script y asegurate que todo este funcionando antes de agregar el resto de las cosas superficiales.

Chico3001 · #3 (**permalink**) 18/12/2011, 19:16

Uso firefox 8.. pero ambos ejemplos los probe en el mismo navegador, lo unico que hice fue adaptarlo a mi pagina web en php y alli es donde no funciona...

Efectivamente estoy añadiendo jugetitos, actualmente la pagina me muestra un cuadro con la informacion de las IPs que han visitado la pagina, le doy click a la IP y me abre una nueva pagina que apunta a un servidor externo que da el pais y la ciudad, lo que quiero ir diseñando es una funcion que cuando pase el raton encima (onmousehover) me muestre los datos de la pagina externa en una ventanita auxiliar, y cuando el raton salga de la IP esa ventana se quite

Asi que lo primero que pense fue en adaptar el ejemplo del tutorial, lo copie y lo probe en una pagina externa, luego lo estoy adaptando a mi pagina web y finalmente quiero hacer la funcion que extraiga los datos de la IP, solo que estoy atorado en el segundo paso..

zerokilled · #4 (**permalink**) 18/12/2011, 19:26

¿el segundo paso es la adaptación del tooltip? pues, probablemente tengas alguna referencia erronea y por eso te dice que la declaración fue rechazada. el único caso que conozco de ese reporte en firefox es cuando modificas los estilos. quizas se debe a conflicto de variables. debes velar no utilizar los mismos identificadores: nativos (definidos por javascript), o de otros script que incorpores.

Chico3001 · #5 (**permalink**) 18/12/2011, 19:50

Gracias... voy a revisar el CSS y las variables...

----- Edit -----

Es el Doctype... alguna sugerencia... ?

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Chico3001 · #6 (**permalink**) 18/12/2011, 20:20

ARREGLADO!!! en el doctype 4.01 modo estricto se deben añadir las unidades al alterar las coordenadas (+"px"), aqui les dejo el script por si algun moderador lo puede actualizar...

Código PHP:

          <script type="text/javascript">

            var ns4 = (document.layers)? true:false

            var ie4 = (document.all)? true:false

            var ns6 = (document.getElementById && !document.all) ? true: false;

            var coorX, coorY;

 
            if (ns6) document.addEventListener("mousemove", mouseMove, true)

            if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}

 
            function mouseMove(e)    {

                if (ns4||ns6)    {

                    coorX = e.pageX;

                    coorY = e.pageY;

                }

                if (ie4)    {

                    coorX = event.x;

                    coorY = event.y;

                }

                coorX += document.body.scrollLeft;

                coorY += document.body.scrollTop;

                return true;

            }

 
            function ini()    {

                if (ie4)    document.body.onmousemove = mouseMove;

            }

 
            function mostrar(dato)    {

                with(document.getElementById("ayuda"))    {

                    style.top = coorY + 10+ "px";

                    style.left = coorX + 10+ "px";

                    style.visibility = "visible";

                    innerHTML = dato;

                }

            }

 
            function ocultar()    {

                document.getElementById("ayuda").style.visibility = "hidden";

            }

 
            function mover()    {

                with(document.getElementById("ayuda"))    {

                    style.top = coorY + 10+ "px";

                    style.left = coorX + 10+ "px";

                }

            }

 
        </script>