Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] duda-problema scroll jquery y sql

Estas en el tema de duda-problema scroll jquery y sql en el foro de Jquery en Foros del Web. Hola amigos, soy nuevo por aqui y espero poder aportar lo maximo posible. Pero ahora os necesito mas que nunca dado que no encuentro la ...
  #1 (permalink)  
Antiguo 30/01/2010, 06:23
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 10 meses
Puntos: 7
duda-problema scroll jquery y sql

Hola amigos, soy nuevo por aqui y espero poder aportar lo maximo posible.

Pero ahora os necesito mas que nunca dado que no encuentro la forma de hacer que funcione esto.

(Si copiais el codigo vereis el funcionamiento)

Para ello este es el codigo que tiene dentro:
Código:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>NOTICIAS</title>
    
	<link rel="stylesheet" href="objetos/rapid.css" type="text/css" />
	
	<script type="text/javascript" src="Scripts/jquery.js"></script>
    
</head>
<body>
  <script type="text/javascript">
noticias_scroll = {
evento: function(){
            setTimeout(noticias_scroll.ejecutar,10000);
        },
ejecutar: function(){
              var total=parseInt($("#min_min li").size());

              for(i=0;i<total;i++){
                  var st=$("#min_min li").eq(i).attr("style");
                  if(st=="display: none;" || st=="DISPLAY: none"){
                      var i_show=i-3;
                      var i_hide=i;
                      $("#min_min li").eq(0).before($("#min_min li").get(total-1));
                      $("#min_min li").eq(i_hide).hide(500);
                      $("#min_min li").eq(i_show).show(500);
                      setTimeout(noticias_scroll.ejecutar,10000);
                      return;
                  }
              }
          }
}
$(document).ready(noticias_scroll.evento);

</script>
<table width="800" border="0" cellspacing="0" cellpadding="0"><tr><td align="center">
<div class="mod-alminuto estirar" align="left"><div class="inn">

    <ul id="min_min">
      
<li class="estirar" style="display:block" > <div class="bubble"><span>Hace 11'</span></div> <div class="mod-txt"><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEXTO 1*</span>  </div></li>

<li class="estirar" style="display:block" ><div class="bubble"><span>Hace 20'</span></div><div class="mod-txt"><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEXTO 2*</span></div></li>

<li class="estirar" style="display:block" ><div class="bubble"><span>Hace 24'</span></div><div class="mod-txt"><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEXTO 3*</span></div></li>
      

<li class="estirar" style="display:none" ><div class="bubble"><span>Hace 32'</span></div><div class="mod-txt"><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEXTO 4*</span>  </div></li>

<li class="estirar" style="display:none" ><div class="bubble"><span>Hace 47'</span></div><div class="mod-txt"><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEXTO 5*</span>  </div></li>

<li class="estirar" style="display:none" ><div class="bubble"><span>Hace 1h</span></div><div class="mod-txt"><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEXTO 6</span>  </div></li>

</ul>

</div>
</div></td>
  </tr>
</table>
</body>
</html>

El problema es que ahora tengo que modificarla para mostrar los datos de una SQL, ya consegui la conexion SQL y que me muestre los datos que me interesan, pero no consigo que vuelva a hacer la animacion esa con los resultados del SQL.

Y este es el codigo que tengo implementado por ahora, claro esta que no se que parametros modificar en el while del sql o en el javascript para que haga lo que necesito...

Código:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Noticias</title>
    
	<link rel="stylesheet" href="objetos/rapid.css" type="text/css" />
	
	<script type="text/javascript" src="Scripts/jquery.js"></script>
    
        
</head>
<body>
<script type="text/javascript">
noticias_scroll = {
evento: function(){
            setTimeout(noticias_scroll.ejecutar,10000);
        },
ejecutar: function(){
              var total=parseInt($("#min_min li").size());

              for(i=0;i<total;i++){
                  var st=$("#min_min li").eq(i).attr("style");
                  if(st=="display: none;" || st=="DISPLAY: none"){
                      var i_show=i-3;
                      var i_hide=i;
                      $("#min_min li").eq(0).before($("#min_min li").get(total-1));
                      $("#min_min li").eq(i_hide).hide(500);
                      $("#min_min li").eq(i_show).show(500);
                      setTimeout(noticias_scroll.ejecutar,10000);
                      return;
                  }
              }
          }
}
$(document).ready(noticias_scroll.evento);

</script>


</script>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
    <div class="mod-alminuto estirar" align="left">
  <div class="inn" id="chained">
    
    <?
    $busqueda= @mysql_query("SELECT * FROM noticias ORDER BY fecha DESC LIMIT 0,6");
	if (!$busqueda){
		echo ("Error al seleccionar los elementos de la base de datos, Inténtelo más tarde");
		exit();
	}
	
	echo '<ul id="min_min">';
	while ($row = mysql_fetch_array($busqueda)){
		$fechaformato = explode ("-", $row["fecha"]);
		$fecha = $fechaformato[2]."/".$fechaformato[1]."/".$fechaformato[0];
		$titulo = $row["titulo"];
		$id = $row["id"];
	?>
        <li class="estirar"> <div class="bubble">
			<span>
			<? echo $fecha; ?>
			</span>
			</div> <div class="mod-txt">
			<span>
			<a href="noticias.php?vernoticia=<? echo $id;?>" class="mod-txt">
			    <? echo $titulo; ?>
			    </a>*
			</span></div>
			</li>
            
	<?php
	}
		echo '</ul>';
	?>  
    
    </div>
    </div>

</td>
  </tr>
</table>
</body>
</html>

Me podeis exar un cable??? Muchisimas gracias de antemano

Última edición por tanatos_neon; 04/02/2010 a las 08:53
  #2 (permalink)  
Antiguo 30/01/2010, 10:08
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
Hola tanatos_neon. Bienvenido al foro.

Muevo tu tema al foro de Frameworks desde Javascript.

Saludos,
  #3 (permalink)  
Antiguo 30/01/2010, 11:02
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: duda-problema scroll jquery y sql

Yo lo unico que veo en el enlace es un listado con efecto de subrayado en mouseover. Al menos en Opera.

Pero si mal no entiendo tu pregunta, estas agregando dinamicamente algunos items. Como hacer para que tengan el mismo efecto asignado? De esto se hablo ya mucho en las ultimas semanas por aqui. Usa el metodo .live()
  #4 (permalink)  
Antiguo 31/01/2010, 04:03
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: duda-problema scroll jquery y sql

Cita:
Iniciado por mayid Ver Mensaje
Yo lo unico que veo en el enlace es un listado con efecto de subrayado en mouseover. Al menos en Opera.

Pero si mal no entiendo tu pregunta, estas agregando dinamicamente algunos items. Como hacer para que tengan el mismo efecto asignado? De esto se hablo ya mucho en las ultimas semanas por aqui. Usa el metodo .live()

Hola Mayid, gracias por la respuesta. Por lo que he probado esta accion de javascript no funciona en Opera, en el resto sin problemas, por si no lo ves cn Opera.

Imagino que el .live() se establece despues de var st=$("#min_min li").eq(i).attr("style").live();

Me equivoco?¿, lo que no se es que tipo de ordenes ponerle :S

Lo que veo es que en el primer codigo a los <li> le asignan a los 3 primeros un <li class="estirar" style="display:block" > y a los siguientes un <li class="estirar" style="display:none" >

Segun veo en el javascript esto es lo que crea las ordenes para la modificacion y la "rotacion" de noticias.

El kit de la cuestion es que en el codigo 2 se ha creado solo un <li class="estirar"> he probado a ponerle el style="display:block" y claro, como manda ese style a los 7 valores que he creado todo se bloquea, y si le pongo el display:none, pues todos desaparecen....

Si sq no se como leches arreglarlo :S


La otra opcion que pense era reutilizar el codigo uno, con sus 6 <li> y modificar todo a esto:
Código:
<li class="estirar" style="display:block" > <div class="bubble"><span><? echo $fecha; ?></span></div> <div class="mod-txt"><span>
<? echo $titulo; ?></span>  </div></li>

<li class="estirar" style="display:block" ><div class="bubble"><span><? echo $fecha; ?></span></div><div class="mod-txt"><span>
<? echo $titulo; ?></span></div></li>

<li class="estirar" style="display:block" ><div class="bubble"><span><? echo $fecha; ?></span></div><div class="mod-txt"><span>
<? echo $titulo; ?></span></div></li>
      

<li class="estirar" style="display:none" ><div class="bubble"><span><? echo $fecha; ?></span></div><div class="mod-txt"><span>
<? echo $titulo; ?></span>  </div></li>

<li class="estirar" style="display:none" ><div class="bubble"><span><? echo $fecha; ?></span></div><div class="mod-txt"><span>
<? echo $titulo; ?></span>  </div></li>

<li class="estirar" style="display:none" ><div class="bubble"><span><? echo $fecha; ?></span></div><div class="mod-txt"><span>
<? echo $titulo; ?></span>  </div></li>
Pero lo que no sabia era como indicarle que en cada $fecha y cada $titulo queria un valor menos de la tabla sql....

Si sabeis como hacer eso nos quitamos de todo el lio del Javascript dado que esto ultimo funciona pero claro, ahora solo me muestra todos los valores 1 del sql.


Alomejor os hago un lio, pero no se como darlo mas detallado....



Gracias a todos de antemano.



JavierB, gracias por moverlo, no sabia que habia distintas subsecciones

Última edición por tanatos_neon; 31/01/2010 a las 06:11
  #5 (permalink)  
Antiguo 31/01/2010, 08:07
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: duda-problema scroll jquery y sql

Ahi lo vi en Explorer, en Firefox y en Opera. En todos se ve igual (le falta estilo), pero vi que se movía. Igual, el comportamiento es medio incomprensible.

A ver si lo veo claro:

Por cada elemento nuevo (venido desde mysql), hay que ocultar el elemento superior e insertar el nuevo abajo. Es eso?
  #6 (permalink)  
Antiguo 31/01/2010, 09:34
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: duda-problema scroll jquery y sql

Cita:
Iniciado por mayid Ver Mensaje
Ahi lo vi en Explorer, en Firefox y en Opera. En todos se ve igual (le falta estilo), pero vi que se movía. Igual, el comportamiento es medio incomprensible.

A ver si lo veo claro:

Por cada elemento nuevo (venido desde mysql), hay que ocultar el elemento superior e insertar el nuevo abajo. Es eso?

Lo unico que busco es que yo le doy la orden $busqueda= @mysql_query("SELECT * FROM noticias ORDER BY fecha DESC LIMIT 0,6");

El div lo configuro para que solo me muestre 3 noticias en plan.

---- TITULO1 ---- NOTICIA1 ----
---- TITULO2 ---- NOTICIA2 ----
---- TITULO3 ---- NOTICIA3 ----

Lo que quiero es que despues de 5 segundos haga esto

---- TITULO6 ---- NOTICIA6 ----
---- TITULO1 ---- NOTICIA1 ----
---- TITULO2 ---- NOTICIA2 ----

Despues de otros 5 segundos esto

---- TITULO5 ---- NOTICIA5 ----
---- TITULO6 ---- NOTICIA6 ----
---- TITULO1 ---- NOTICIA1 ----

Y asi sucesivamente hasta volver a lo primero

Se comprende? es lo mas sencillo del mundo, pero no consigo configurarlo con el sql....

Última edición por tanatos_neon; 01/02/2010 a las 06:39
  #7 (permalink)  
Antiguo 01/02/2010, 04:56
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: duda-problema scroll jquery y sql

algo asi?

Código HTML:
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        var i = 6;
        function insertarNoticia()
        {
            $('#contenedor div:last').hide('slow', function () {
                $(this).remove();
            });
            $('#contenedor').prepend("<div>nota "+(i++)+"</div>");
        }

        $(document).ready(function(){
            setInterval("insertarNoticia()",1000);
        });
    </script>
<style>
    div>div{height:20px; width:100px; background-color:red; margin:5px}
</style>
</head>
<body>
    <div id="contenedor">
        <div>nota 5</div>
        <div>nota 4</div>
        <div>nota 3</div>
        <div>nota 2</div>
        <div>nota 1</div>
    </div>
</body>
</html> 
  #8 (permalink)  
Antiguo 01/02/2010, 06:34
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: duda-problema scroll jquery y sql

Hola Dany_s

gracias por tu respuesta.

No esta mal la funcion que indicas, lo que veo es que suma los valores y no es eso lo que me interesa, posiblemente el codigo que comentas es el que me vale, pero como lo configuro y encima le añado el tema del SQL?¿

Pongo la tabla completa de lo que quier conseguir.

Abres la web y ves esto
Código:
---- TITULO 1 ---- TEXTO 1 ----
---- TITULO 2 ---- TEXTO 2 ----
---- TITULO 3 ---- TEXTO 3 ----
Pasan 5 segundos

Código:
---- TITULO 6 ---- TEXTO 6 ----
---- TITULO 1 ---- TEXTO 1 ----
---- TITULO 2 ---- TEXTO 2 ----
Otros 5 segundos

Código:
---- TITULO 5 ---- TEXTO 5 ----
---- TITULO 6 ---- TEXTO 6 ----
---- TITULO 1 ---- TEXTO 1 ----
Otros 5 segundos

Código:
---- TITULO 4 ---- TEXTO 4 ----
---- TITULO 5 ---- TEXTO 5 ----
---- TITULO 6 ---- TEXTO 6 ----
Otros 5 segundos

Código:
---- TITULO 3 ---- TEXTO 3 ----
---- TITULO 4 ---- TEXTO 4 ----
---- TITULO 5 ---- TEXTO 5 ----
Otros 5 segundos

Código:
---- TITULO 2 ---- TEXTO 2 ----
---- TITULO 3 ---- TEXTO 3 ----
---- TITULO 4 ---- TEXTO 4 ----
Otros 5 segundos y volvemos a empezar...

Código:
---- TITULO 1 ---- TEXTO 1 ----
---- TITULO 2 ---- TEXTO 2 ----
---- TITULO 3 ---- TEXTO 3 ----
Creo que es facil :S solo que a todo eso hay que añadirle sql....

MIL GRACIAS A TODOS!!!
  #9 (permalink)  
Antiguo 01/02/2010, 08:23
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: duda-problema scroll jquery y sql

claro ahi solo suma para ver como hace el cambio

vos tenes solo 6 noticias y esas van rotando? no vas a agregar noticias nuevas?
  #10 (permalink)  
Antiguo 01/02/2010, 08:55
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: duda-problema scroll jquery y sql

Lo nuevo, que viene de mysql, se recibe con ajax. Leete esto:
http://www.anieto2k.com/2009/08/18/5...ax-con-jquery/

Lo tuyo es de noticias en tiempo real, y hay que consultar cada tantos segundos a la base de datos? O solo hay que consultar una vez, al cargar la pagina, y de los x resultados y mostrando solo 3 a la vez?
  #11 (permalink)  
Antiguo 01/02/2010, 15:29
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: duda-problema scroll jquery y sql

Dany_s: Solo se van a poner 6 noticias, al agregar mas al SQL pues las ira mostrando en bloques de 6.

Mayid: Es la segunda cosa que comentas

O solo hay que consultar una vez, al cargar la pagina, y de los x resultados y mostrando solo 3 a la vez?


Gracias por vuestras rapidas respuestas
  #12 (permalink)  
Antiguo 01/02/2010, 15:36
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: duda-problema scroll jquery y sql

Cita:
pero como lo configuro y encima le añado el tema del SQL?
Lo mas facil es imprimirlo con PHP.

En cuanto a configurarlo, no se. A ver que dice Dany.
  #13 (permalink)  
Antiguo 01/02/2010, 16:23
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: duda-problema scroll jquery y sql

el tema de php y mysql creo que ya lo tenes no? ya recuperas de la bd y lo imprimis en algun lado?

si es asi con eso ya te podes crear un archivo y que te devuelva un json http://es.wikipedia.org/wiki/JSON
crear un json con php es sencillo, aca tenes unos ejemplos http://blog.unijimpe.net/crear-json-con-php/ y para leerlo es con ajax como dijo mayid.
En la doc de jquery tenés un ejemplo llamando a un json de flickr http://api.jquery.com/jQuery.getJSON/

si no es json puede ser un xml, como quieras

ahora si en la página ya imprimis las noticias no hace falta json ya solo tendrias que hacer el efecto con jquery

otra podria ser usar un plugin, como este http://www.ezjquery.com/cgi-bin/webapp.rb?r=access fijate el Easy News 1.0.6 o busca otro plugin

ahora tengo que salir quiza mañana a la mañana te paso un ejemplo
  #14 (permalink)  
Antiguo 01/02/2010, 17:43
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: duda-problema scroll jquery y sql

Lo de usar un plugin de noticias es lo mejor, de verdad.

EN cuanto a json, o xml... yo diria que mejor ninguno. Que imprimas directamente el html. Pero ahora que veo tu primer mensaje... a eso ya lo tenes resuelto:
Cita:
<li class="estirar" style="display:none" ><div class="bubble"><span><? echo $fecha; ?></span></div><div class="mod-txt"><span>
<? echo $titulo; ?></span> </div></li>
Me confundi cuando dijistes:
Cita:
Creo que es facil :S solo que a todo eso hay que añadirle sql....
  #15 (permalink)  
Antiguo 01/02/2010, 18:46
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: duda-problema scroll jquery y sql

bueno hice un ejemplo de cada uno

desde el html directo

Código HTML:
<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $( function (){
            //Busco los ultimos 3 div y los oculto
            $('#resultados>div:gt(2)').hide();
            function actualizar (){
                //Busco el ULTIMO div hijo directo de resultados y lo escondo
                $('#resultados>div:visible:last').slideUp(300);
                //Busco el ultimo div hijo directo de resultados y lo agrego al principio, luego lo muestro
                $('#resultados>div:hidden:last').prependTo('#resultados').slideDown(600);
            }
            //Ejecuto la funcion actualizar cada 2 segundos
            setInterval(actualizar, 2000);
        });
        </script>
        <style>
            #resultados {width:300px; font-size:12px; font-family:arial}
            .noticias{height:130px}
            .titulo{font-size:14px; font-weight:600}
        </style>
    </head>
<body>
    <div id="resultados">
        <div class='noticias'><div class='titulo'>1. Blackberry 9700 llega este mes a la Argentina</div><div class='resumen'>01-01-2010 - La compaña canadiense RIM, confirmó que el modelo 9700, sucesor del Blackberry Bold 9000, llegará a la Argentina en las primeras semanas de este mes. Quizás uno de los cambios más transcendentales de este nuevo modelo, es la eliminación de la clásica...</div></div>
        <div class='noticias'><div class='titulo'>2. Todos contra el iPad</div><div class='resumen'>01-01-2010 - La firma Fujitsu analiza iniciar acciones legales contra Apple por el uso del nombre. Mientras tanto, una empresa china asegura que la tablet es una copia. Desde su presentación la semana pasada, el iPad de Apple desató una ola de comentarios a favor y...</div></div>
        <div class='noticias'><div class='titulo'>3. Apple le marca la cancha a Google</div><div class='resumen'>01-01-2010 - Además del magnetismo que genera cada uno de sus anuncios, el mundo de Apple siempre gira en torno al misterio ya la falta de información oficial. Esto genera que existan todo tipo de rumores y declaraciones polémicas en torno a la compaña de la...</div></div>
        <div class='noticias'><div class='titulo'>4. Firefox ya está disponible para Maemo de Nokia</div><div class='resumen'>01-01-2010 - Firefox para móviles ya puede usarse en la plataforma Maemo de Nokia. Así lo ha anunciado hoy la Fundación Mozilla, que ha optimizado su navegador en movilidad para que los poseedores de un Nokia N900 puedan acceder a Internet a través de...</div></div>
        <div class='noticias'><div class='titulo'>5. Del papel al iPad</div><div class='resumen'>01-01-2010 - Dos bombas seguidas. Una. Apple presenta su iPad, un todo en uno que cambiará nuestro entretenimiento. Dos. El escritor Ian McEwan firma un acuerdo con Amazon por el que dobla sus derechos de autor. Los contenidos tradicionales tiemblan: el futuro es...</div></div>
        <div class='noticias'><div class='titulo'>6. Debutó en Argentina la nueva familia de procesadores Intel Core 2010</div><div class='resumen'>01-01-2010 - Diseñados tanto para PCs de escritorio y móviles, y ofrecen un desempeño inteligente para reproducir música, videos, películas y utilizar juegos. Los primeros equipos pueden conseguirse en Garbarino y Compumundo. El coloso informático Intel anunció que...</div></div>
    </div>
</body>
</html> 


y este con json, suponemos que el json se creó con php y que genera lo siguiente

Código HTML:
{
    "noticias": [
        {"titulo":"1. Blackberry 9700 llega este mes a la Argentina", "resumen":"La compaña canadiense RIM, confirmó que el modelo 9700, sucesor del Blackberry Bold 9000, llegará a la Argentina en las primeras semanas de este mes. Quizás uno de los cambios más transcendentales de este nuevo modelo, es la eliminación de la clásica...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_1_0_t&usg=AFQjCNEH6ir-KCYMH-bAbmIT-ZNjdpWBSw&cid=8797375699050&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fblogs.perfil.com%2Fconexion%2F%3Fp%3D1743"},
        {"titulo":"2. Todos contra el iPad", "resumen":"La firma Fujitsu analiza iniciar acciones legales contra Apple por el uso del nombre. Mientras tanto, una empresa china asegura que la tablet es una copia. Desde su presentación la semana pasada, el iPad de Apple desató una ola de comentarios a favor y...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_2_0_t&usg=AFQjCNGDGuAhTODGfsU-hezv5xU-DChZcQ&cid=8797375696209&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.lavoz.com.ar%2F10%2F02%2F01%2Fsecciones%2Fciudadanos%2Fnota.asp%3Fnota_id%3D587690"},
        {"titulo":"3. Apple le marca la cancha a Google", "resumen":"Además del magnetismo que genera cada uno de sus anuncios, el mundo de Apple siempre gira en torno al misterio ya la falta de información oficial. Esto genera que existan todo tipo de rumores y declaraciones polémicas en torno a la compaña de la...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_3_0_t&usg=AFQjCNFC0h2W9F5jpV5pE4IFLoKBDXImxA&cid=8797375702670&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.lanacion.com.ar%2Fnota.asp%3Fnota_id%3D1228389"},
        {"titulo":"4. Firefox ya está disponible para Maemo de Nokia", "resumen":"Firefox para móviles ya puede usarse en la plataforma Maemo de Nokia. Así lo ha anunciado hoy la Fundación Mozilla, que ha optimizado su navegador en movilidad para que los poseedores de un Nokia N900 puedan acceder a Internet a través de...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_5_0_t&usg=AFQjCNEr8yEwGNsRx5m2RQH6qM4tP77tSA&cid=8797375662007&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.itespresso.es%2Fes%2Fnews%2F2010%2F02%2F01%2Fmaemo-firefox"},
        {"titulo":"5. Del papel al iPad", "resumen":"Dos bombas seguidas. Una. Apple presenta su iPad, un todo en uno que cambiará nuestro entretenimiento. Dos. El escritor Ian McEwan firma un acuerdo con Amazon por el que dobla sus derechos de autor. Los contenidos tradicionales tiemblan: el futuro es...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_6_0_t&usg=AFQjCNFrbX198du6JO9rko_EQ3Miuta9lg&cid=8797375658330&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.abc.es%2F20100131%2Fmedios-redes-web%2Fpapel-ipad-201001310843.html"},
        {"titulo":"6. Debutó en Argentina la nueva familia de procesadores Intel Core 2010", "resumen":"Diseñados tanto para PCs de escritorio y móviles, y ofrecen un desempeño inteligente para reproducir música, videos, películas y utilizar juegos. Los primeros equipos pueden conseguirse en Garbarino y Compumundo. El coloso informático Intel anunció que...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_7_0_t&usg=AFQjCNGfN7UHCxgeOPJvRgLjAduJMEG2mw&cid=8797375700985&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.canal-ar.com.ar%2Fnoticias%2Fnoticiamuestra.asp%3FId%3D8486"},
    ]
}
y este el html con el código que lo lee
Código HTML:
<html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $( function (){

            //Leo el archivo json.tx
            $.getJSON('json.txt', function(data) {
                //Recorro las noticias y obtengo los valores
                jQuery.each(data.noticias, function (i, val){
                    titulo = val.titulo;
                    resumen = val.resumen;
                    fecha = val.fecha;
                    url = val.url;
                    //Agrego al div #resultados el cuerpo de cada noticia concatenando con las variables donde almacené los valores, seguido busco los últimos 3 div hijos y los oculto
                    $('#resultados').append("<div class='noticias'><div class='titulo'>"+titulo+"</div><div class='resumen'>"+fecha+" - "+resumen+"</div></div>").find('>div:gt(2)').hide();
                });
            });
            function actualizar (){
                //Busco el ULTIMO div hijo de resultados y lo escondo
                $('#resultados>div:visible:last').slideUp(300);
                //Busco el ultimo div hijo de resultados y lo agrego al principio, luego lo muestro
                $('#resultados>div:hidden:last').prependTo('#resultados').slideDown(600);
            }
            //Ejecuto la funcion actualizar cada 2 segundos
            setInterval(actualizar, 2000);
        });
        </script>
        <style>
            #resultados {width:300px; font-size:12px; font-family:arial}
            .noticias{height:130px}
            .titulo{font-size:14px; font-weight:600}
        </style>
    </head>
<body>
    <div id="resultados"></div>
</body>
</html> 
Es solo buscar la última noticia oculta, agregarlo al principio y colocarla visible, luego buscar la última noticia visible y ocultarla
  #16 (permalink)  
Antiguo 02/02/2010, 03:29
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: duda-problema scroll jquery y sql

Dany_s

MILLON de gracias, esto es lo que buscaba fervientemente!! modifique un poco tu codigo para que mostarse lo que deseaba, quedo asi:

Código:
 <html>
    <head>
        <title>Ejemplo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $( function (){

            //Leo el archivo json.txt
            $.getJSON('json.txt', function(data) {
                //Recorro las noticias y obtengo los valores
                jQuery.each(data.noticias, function (i, val){
                    titulo = val.titulo;
                    fecha = val.fecha;
                    url = val.url;
                    //Agrego al div #resultados el cuerpo de cada noticia concatenando con las variables donde almacené los valores, seguido busco los últimos 3 div hijos y los oculto
                    $('#resultados').append("<div class='noticias'><a href="+url+"><div class='fecha'>"+fecha+" - "+titulo+"</div></a></div>").find('>div:gt(2)').hide();
                });
            });
            function actualizar (){
                //Busco el ULTIMO div hijo de resultados y lo escondo
                $('#resultados>div:visible:last').slideUp(300);
                //Busco el ultimo div hijo de resultados y lo agrego al principio, luego lo muestro
                $('#resultados>div:hidden:last').prependTo('#resultados').slideDown(600);
            }
            //Ejecuto la funcion actualizar cada 2 segundos
            setInterval(actualizar, 2000);
        });
        </script>
        <style>
            #resultados {width:800px; font-size:12px; font-family:arial}
            .noticias{height:20px}
            .titulo{font-size:14px; font-weight:600}
	    .fecha{font-size:14px; font-weight:600}
        </style>
    </head>
<body>
    <div id="resultados"></div>
</body>
</html>

La ultima duda para finalizar esto.

Segui la guia que se indica aqui: [URL="http://blog.unijimpe.net/crear-json-con-php/"]JSON[/URL]

y cree esto:
Código:
 <?
	require("conexion.php"); *//Esto no es autentico, no vale para el acceso a mi bbdd
	require("json.php");
?>

 <? $json = new Services_JSON;

      $queEmp = "SELECT * FROM urgente ORDER BY fecha DESC";
	  
      $resEmp = mysql_query($queEmp, $bd) or die(mysql_error());
	  
      $totEmp = mysql_num_rows($resEmp);
	  
      while ($rowEmp = mysql_fetch_assoc($resEmp)) {

          $data[] = $rowEmp;

      }

      echo $json->encode($data);

?>


Y guarde el json.php y el data.php en la misma ubicacion que este archivo. Pero nada, me da error. Imagino que hay que modificar algo en el json.php, pero ando perdido. (imagino que tambien hay que definir el $data a donde guarda...)

Aunque si hay una forma mas facil de solicitar el json.txt al sql os lo agradeceria, podria integrar directamente el codigo de Dany_s sin problemas.

Un saludo y muchas gracias por vuestra implicacion.
  #17 (permalink)  
Antiguo 02/02/2010, 04:57
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: duda-problema scroll jquery y sql

porque no generas el html directamente y trabajas el efecto con jquery? en vez de llamar a un json, generar e insertar el html y luego trabajar en el efecto

pero igual
que te da error? javascript? php?
el data.php me imagino que es el php que genera el json, no?
modificaste tambien la url para leerla en la función de jquery?
viste la estructura de json generado si es igual al que puse como ejemplo?

porque sin no me equivoco va a empezar algo asi [{"titulo": y no como el ejemplo que es {"noticias":[

y otra cosa, que haciendo un fetch con los resultados de la base de datos te va a generar la estrucutra con los nombres de las columnas de la tabla, o sea que si tenes el titulo en una columna que se llama "titulonoticias" va a generar [{"titulonoticias": y ahi vas a tener que modificar tambien el jquery para leerlo

asi que ejecutá tu php y postea la salida del json


fijate, para mi que te conviene generar el html con las noticias

Última edición por Dany_s; 02/02/2010 a las 05:05
  #18 (permalink)  
Antiguo 02/02/2010, 10:01
 
Fecha de Ingreso: enero-2010
Mensajes: 63
Antigüedad: 14 años, 10 meses
Puntos: 7
Respuesta: duda-problema scroll jquery y sql

POR FIN!!!

Dany_s, finalmente con hacer una combinación de mi primer codigo y del codigo html que hicistes he conseguido que ya todo funcione.

os dejo el codigo ya funcionando a la perfección con los cambios en rojo. (y me deja editar la cantidad de noticias que quiero mostrar).

Código:
<?
	require("conexionbbdd.php"); *// No es real...
?>

<html>
    <head>
        <title>Ejemplo</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $( function (){
            //Busco los ultimos 3 div y los oculto
            $('#resultados>div:gt(2)').hide();
            function actualizar (){
                //Busco el ULTIMO div hijo directo de resultados y lo escondo
                $('#resultados>div:visible:last').slideUp(300);
                //Busco el ultimo div hijo directo de resultados y lo agrego al principio, luego lo muestro
                $('#resultados>div:hidden:last').prependTo('#resultados').slideDown(600);
            }
            //Ejecuto la funcion actualizar cada 10 segundos
            setInterval(actualizar, 10000);
        });
        </script>
        <style>
            #resultados {width:800px; font-size:12px; font-family:arial}
            .titulo{font-size:18px; font-weight:600}
        </style>
    </head>
<body>
     <?
    $busqueda= @mysql_query("SELECT * FROM noticias ORDER BY fecha DESC LIMIT 0,6");
	if (!$busqueda){
		echo ("Error al seleccionar los elementos de la base de datos, Inténtelo más tarde");
		exit();
	}
	//visualizamos en pantalla los resultados
	echo '<div id="resultados">';
	while ($row = mysql_fetch_array($busqueda)){
		$fechaformato = explode ("-", $row["fecha"]);
		$fecha = $fechaformato[2]."/".$fechaformato[1]."/".$fechaformato[0];
		$titulo = $row["titulo"];
		$id = $row["id"];
	?>
        <div class='noticias'><div class='titulo'><? echo $fecha; ?> - <a href="noticias.php?vernoticia=<? echo $id;?>" class="mod-txt"><? echo $titulo; ?></a></div></div>
            
	<?php
	}
		echo '</div>';
	?>
                
</body>
</html>
Espero que esto ayude a mucha gente como me ayudó a mi.

Graciaaaaas a todos de verda
  #19 (permalink)  
Antiguo 02/02/2010, 11:32
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: duda-problema scroll jquery y sql

Está buenísimo que hayas incursionado en json. Ya te servirá para otras cosas.

Por mi parte, no conocía librerías json, asi que voy a estudiar un poco a ver como funcionan.

Que bueno hayas solucionado el tema. Y Dany... que jugador!

Etiquetas: scroll, sql
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:25.