.mouseover con php

[juan007]

Hola compañeros(as) bueno antes que todo agradecer desde este mismo momento cualquier ayuda que puedan prestarme.

Les comento estoy desarrollando un calendario de eventos en php con jquery, tengo desarrollado el ingreso del evento a la base de datos y tengo desarrollado el calendario osea lo muestro y tambien los dias que hay eventos los pinto de un color.

Mi idea es que cuando pase el mouse por esos dias que estan pintados osea que tienen eventos asignados para ese mes me aparesca algo similar a un tooltip donde dentro de este tooltip me aparesca el nombre del evento y su descripcion...por ejemplo : 14 de febrero dia de los enamorados y en su descripcion algo asi cena a la luz de las velas restorant playa x a las 22:00 hrs.

De esta forma rescato los eventos en php.

Código PHP:

  $objBD->consultar($query); 
while($row_event = $objBD->obtendatos()){ 
    if (!isset($events[intval($row_event['day'])])) { 
        //$events = ''; 
        $events[intval($row_event['day'])] = '';  
    }else{ 
        $events[intval($row_event['day'])] .= '<li> 
           <span class="title">'.stripslashes($row_event['eventTitle']).'</span> 
           <span class="desc">'.stripslashes($row_event['eventContent']).'</span> 
        </li>'; 
    } 
}  
   

Y de esta otra forma los muestro en el calendario aquellos dias que tienen evento.

Código PHP:

  if(array_key_exists($day,$events)){ 
    //adding the date_has_event class to the <td> and close it 
    echo ' class="date_has_event"> '.$day; 
 
//adding the eventTitle and eventContent wrapped with <span> and <li> to <ul> 
    echo '<div class="events"> 
            <ul>'.$events[$day].'</ul> 
    </div>'; 
                        }  
   

Ahora mi codigo javascript o jquery

Código HTML:

$(".date_has_event").mouseover(function (event) {
	//alert ("Entro");
       
	});

En la ultima parte nose me ocurre como debo hacerlo....si descomento el alert me funciona pero como lo hago para que me muestre ese tooltip como deseo.

Desde ya recibo sugerencias comentarios de como poder realizar esto quizas la mejor forma no es tooltip ....

Bueno gracias por su atencion y ayuda.

Saludos desde Viña del Mar, CHILE.

[mayid]

Podes usar un plugin tooltip que se ajuste a lo que necesitás. Es decir, aprovechando el evento mouse over.

Sino, quizás el atributo title sea suficiente. No se cuanto diseño esperás que tengan tus tips.

[juaniquillo]

Eso creo que es una muy buena solución. Es mejor y menos complicado que buscar los eventos con ajax cuando hagas mouseover.

[juan007]

Gracias por tu pronta respuesta mayid con respecto al plugin que me hablas alguna idea de cual podria ser el mas indicado o alguno que puedas recomendarme.
Y con respecto al atributo title ... no te logro entender.

Nuevamente gracias.

[juan007]

Gracias juaniquillo por tu comentario....pero me podria guiar de como hacerlo a ver si me puedo lanzar por si solo....

[juaniquillo]

si conoces algo de jquery son bastante fáciles de implementar. Aquí te dejo algunos:

http://flowplayer.org/tools/tooltip.html
http://jquery.bassistance.de/tooltip/demo/
http://craigsworks.com/projects/simpletip/

Aquí hay una de esas listas:

http://www.webdesignbooth.com/15-jqu...endly-tooltip/

Si lo vas a hacer como mayid sugiere solo necesitas escribir con php el detalle de tu evento en el title del enlace, o yo pienso que mejor sería si lo sacaras del elemento alt, si el plugin tiene la posibilidad de eso. Pienso que de esa forma sería más semántico si quieres mostrar mas información del evento y no sólo el título.

[juan007]

Gracias juaniquillo por tus comentarios y sugerencias que me has dado pero no logro entender revise todos los links que me publicaste pero no logro ver como desarrollar la idea....

No entiendo como enlazar el resultado de mi php a Tooltip...

Se como llamar o asignar el selector en el cual me muestre el tooltip.

Código HTML:

$("miSelector").tooltip({ 
//pero es aca donde nose que hacer (http://flowplayer.org/tools/tooltip.html) revise esa pagina y segun yo ninguna propiedad tengo para que me llame a un php y el resultado de ese php me lo muestre en el Tooltip

});

espero hacerme entender ...y espero tambien no agotar tu paciencia.

[mayid]

Pensalo primeramente desde el html. Cada lugar, es decir cada etiqueta html por donde pases el mouse, y a la que quieras ponerle un tooltip necesita almacenar un texto para mostrar. Para eso se suelen usar los atributos title o alt. Por favor lee algo mas de eso buscando en internet.

Los plugins de jquery pueden mostrar información sobre un elemento. Pero otra vez, ese elemento tiene que tener información que mostrar. Y donde la almacena? Bueno, muy probablemente en el atributo title, o en el alt.

Lo que tenes que tener en claro es que no estamos haciendo una llamada al servidor para que nos traiga información de algo. Eso se puede hacer, con ajax, pero es innecesario. La cosa es mas simple. Imprimis el atributo alt o title la primera vez que cargas la pagina, con PHP, de la misma manera en que imprimis el atributo class:

if(array_key_exists($day,$events)){
//adding the date_has_event class to the <td> and close it
echo ' class="date_has_event" title="Aqui hay un comentario, fijate!"> '.$day;

//adding the eventTitle and eventContent wrapped with <span> and <li> to <ul>
echo '<div class="events" title="Ves que es muy facil!">
<ul>'.$events[$day].'</ul>
</div>';
}

Quizas estés mareado, pero esto es tema de html, basicamente. Solo que estamos sumando PHP y jquery de manera organica, para dinamizar una web.

[juaniquillo]

Como dice mayid, lo que el había sugerido antes es poner lo que quieres que salga en el popup en el elemento title o alt del enlace (<a>) usando PHP. Si por ejemplo usas qTip, que es el que yo mas he usado, puedes ver en el enlace de ejemplo que para title usan este ejemplo:

Código html:

<ul class="subindex"> 
<a href="/projects/qtip/demos/content/default" title="Replace traditional title tooltips">Title attribute</a>
</ul>
 

En el ejemplo hay varios enlaces enlaces dentro del ul. Se escogen todos los enlaces dentro de ese ul. El javascript sería:

Código javascript:

$(document).ready(function()
{
   $('ul.subindex li a[title]').qtip({
      position: {
         corner: {
            target: 'topRight',
            tooltip: 'bottomLeft'
         }
      },
      style: {
         name: 'cream',
         padding: '7px 13px',
         width: {
            max: 210,
            min: 0
         },
         tip: true
      }
   });
});
 

Ahí se hace target a todos los enlaces dentro del 'ul' con clase "subindex", que estén dentro de un 'li' y que tengan un atributo 'title' y se le da la posición y el estilo que se quiera.

[juan007]

Gracias juaniquillo por tu ejemplo te comento que hice las pruebas en base a tu ejemplo y no me funciona ... mi respuesta demoro porque intentaba hacerlo por mi cuenta pero no hubo caso es por eso que recurro nuevamente a su valiosa ayuda.

Voy a tratar de explicar y poner con imagenes todo lo que tengo en este momento.

Asi tengo las llamada amis archivos js

Código HTML:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script src="js/fxCalendario.js" type="text/javascript"></script> 

Ahora pondre la imagen del calendario de como se muestra en el navegador.



Ahora si se fijan hay eventos los dias 20 y 28 pero cuando paso el mouse por ello no me arroja nada no muestra el tooltip.

Ahora tengo una imagen que inspecciono el elemento me pongo en el dia 20 le doy clic derecho y me levanta el firebug ....esto me aparece quizas de algo sirva.



Ahora trato pongo el codigo que intente hacer en base al ejemplo de juaniquillo.

Código HTML:

	 $('div.events').qtip({
      position: {
         corner: {
            target: 'topRight',
            tooltip: 'bottomLeft'
         }
      },
      style: {
         name: 'cream',
         padding: '7px 13px',
         width: {
            max: 210,
            min: 0
         },
         tip: true
      }
   });

Bueno en el codigo la primera linea aparace esto $('div.events').qtip({ .... eso segun yo no esta correcto ya que no pido que em muetre la propiedad title ....pero era una prueba para ver si me aparecia el tooltip.

Pero antes de eso probe el mismo codigo pero cambiando la primera linea de esta forma:
$('div.events li[title]').qtip({ ....


Tampoco resulto, no quiero abusar de su buena voluntad pero si no respondi antes sus ejemplos y sugerencias fue porque intente hacerlo por mi cuenta....pero ahora no se me ocurre como poder hacerlo....

Bueno gracias por todo.

[juaniquillo]

No has dicho si te algún error, pero hay algo que no entiendo. ¿quieres que te muestre los title del div con la clase "events"? Como está ahora mostrará un tooltip del div:

Código:

$('div.events')

Si lo que quieres es que enseñe los titles de los enlaces u otro elemento dentro de ese div (que es lo que yo creo que debe ser) devería ser:

Código:

$('div.events a')

[juan007]

Haber no me aparece ningun error y mi idea es que muestre en el tooltip lo que contiene el arreglo $events[$day].....y este es el este trozo de codigo.

Código PHP:

   echo '<div class="events">
            <ul>'.$events[$day].'</ul>
    </div>';  
   

Ahora tu me diste un ejemplo con este pedaso de codigo:

$('div.events a')

Pero yo no tengo una etiqueta <a> crees que sea necesario ponerla para solucionar el problema.

Gracias nuevamente.

[juaniquillo]

Yo no se que puede estar dentro de $events[$day] así que no se que es lo que quieres mostrar. Traté de ver la imagen del html que genera php (la captura de pantalla del firebug) pero la imagen es muy pequeña y no puedo discernir que está dentro de los <li>

[juan007]

Haber juaniquillo te cuento que hasta hace unos dias en teoria el arreglo $events[] me traia titulo del evento y la descripcion del evento desde la Base de datos, esta es mi consulta y como lleno el arreglo $events.

Código PHP:

  $events = array(); 
//query the database for events between the first date of the month and the last date of month 
$query="SELECT DATE_FORMAT(eventDate,'%d') AS day,eventContent,eventTitle FROM eventcal WHERE eventDate BETWEEN  '$current_year/$current_month/01' AND '$current_year/$current_month/$total_days_of_current_month'"; 
 
$objBD->consultar($query); 
while($row_event = $objBD->obtendatos()){ 
    if (!isset($events[intval($row_event['day'])])) { 
        $events[intval($row_event['day'])] = '';  
    }else{ 
        $events[intval($row_event['day'])] .= '<li> 
           <span class="title">'.stripslashes($row_event['eventTitle']).'</span> 
           <span class="desc">'.stripslashes($row_event['eventContent']).'</span> 
        </li>'; 
    } 
}  
   

Ahora que tu me preguntaste que tenia almacenado el arreglo $events le hice un echo para que apareciera por pantalla y hacerte un imprimir pantalla y mostrarlo para que lo vieras ...pero me encontre con esta sorpresa.

Notice: Undefined offset: 0 in C:\wamp\www\portal\calendario.php on line 145

Código PHP:

  echo '<div class="events"> 
    <ul>'.$events[$day].'</ul> 
</div>'; 
echo $events['day'];//Con este echo no me muestra nada. 
echo $events[0];//con este echo me arroja el erro Notice: Undifined offset: 0 in...  
   

si te fijas en el codigo aparecen comentadas las lineas con el echo que le hice al arreglo.

Al parecer voy de mal en peor.....cada vez me alejo mas de la solucion.

Gracias nuevamente.

[mayid]

Creo que el problema de PHP esta en que "day" es índice para $row_event. No para $events

Es decir, eso existe como índice:

$events[$row_event['day']]

$row_event['day']

Lo que no existe es esto:

$events['day']

[juaniquillo]

Por favor déjanos el html que aparece en el navegador para poder ver que selector usar. En firefox/explorer dale a "view source", o no sé como en español.

[juan007]

Ahi esta juaniquillo el html que me genera firefox.

Código HTML:

<html>
<head>
<title><?=$current_month_text?></title>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script src="js/fxCalendario.js" type="text/javascript"></script>
</head>
<body>
	<h2>Febrero 2010</h2>

	<table cellspacing="3">
		<thead>
		<tr>
			<th>Dom</th>
			<th>Lun</th>
			<th>Mar</th>
			<th>Mie</th>

			<th>Jue</th>
			<th>Vie</th>
			<th>Sab</th>
		</tr>
		</thead>
		<tr>
			<td class="padding">&nbsp;</td><td> 1</td><td> 2</td><td> 3</td><td> 4</td><td> 5</td><td> 6</td></tr><tr><td> 7</td><td> 8</td><td> 9</td><td> 10</td><td> 11</td><td> 12</td><td> 13</td></tr><tr><td> 14</td><td> 15</td><td> 16</td><td> 17</td><td> 18</td><td> 19</td><td class="date_has_event"> 20<div class="events">

										<ul></ul>
									</div><br />
<b>Notice</b>:  Undefined offset: 0 in <b>C:\wamp\www\portal\calendario.php</b> on line <b>145</b><br />
</td></tr><tr><td> 21</td><td> 22</td><td> 23</td><td> 24</td><td class="today"> 25</td><td> 26</td><td> 27</td></tr><tr><td class="date_has_event"> 28<div class="events">

										<ul></ul>
									</div><br />
<b>Notice</b>:  Undefined offset: 0 in <b>C:\wamp\www\sindicato\calendario.php</b> on line <b>145</b><br />
</td><td class="padding">&nbsp;</td><td class="padding">&nbsp;</td><td class="padding">&nbsp;</td><td class="padding">&nbsp;</td><td class="padding">&nbsp;</td><td class="padding">&nbsp;</td></tr><tr> </tr>
		<!--<tfoot>
			<th>&nbsp;</th>
			<th>&nbsp;</th>
			<th>&nbsp;</th>
			<th>&nbsp;</th>
			<th>&nbsp;</th>
			<th>&nbsp;</th>
			<th>&nbsp;</th>
		</tfoot>-->
	</table>

</body>
</html> 

pero sabes aun me sigue arrojando el problema :
Undefined offset: 0 in C:\wamp\www\portal\calendario.php

Y no entiendo que onda, se que mi error esta aca.

Código PHP:

  $events = array();
//query the database for events between the first date of the month and the last date of month
$query="SELECT DATE_FORMAT(eventDate,'%d') AS day,eventContent,eventTitle FROM eventcal WHERE eventDate BETWEEN  '$current_year/$current_month/01' AND '$current_year/$current_month/$total_days_of_current_month'";

$objBD->consultar($query);
while($row_event = $objBD->obtendatos()){
    if (!isset($events[intval($row_event['day'])])) {
        $events[intval($row_event['day'])] = ''; 
    }else{
        $events[intval($row_event['day'])] .= '<li>
           <span class="title">'.stripslashes($row_event['eventTitle']).'</span>
           <span class="desc">'.stripslashes($row_event['eventContent']).'</span>
        </li>';
    }
}  
   

Pero nose como sulucionarlo...en este momento estoy leyendo sobre los arreglos asociativos, para ver si puedo hacer algo.

Gracias a ambos juaniquillo y mayid.

PD:EL PROBLEMA DE PHP( Undefined offset: 0 in C:\wamp\www\portal\calendario.php) lo trato de resolver he probado con esto:

Código PHP:

  while($row_event = $objBD->obtendatos()){
    $events = array("day"=> $row_event['day'],"eventTitle"=>$row_event['eventTitle'],"eventContent"=>$row_event['eventContent']);
}  
   

PERO ME LOS SOBREESCRIBE .... EL PRIMERO LO GUARDA LUEGO EN VEZ DE INCREMENTAR EL INDICE PARA GENERAR EL OTRO INDICE NUEVO LO ESCRIBE ENCIMA....NO ENTIENDO COMO DECIRLE AL ARREGLO QUE CADA VEZ QUE PASE EL WHILE ME GENRERE UN NUEVO INDICE Y ME DEJE LOS DATOS EN ESE NUEVO INDICE.

[juaniquillo]

Ese es un error PHP del array. Necesitas resolver eso primero que nada ya que no se genera el HTML debido a ese error. Pasa por el foro de PHP, ahí te podrán ayudar mejor con ese error.