No hay manera de añadir un efecto fade in

[franjgg]

Hola amigos como estais,

Vereis, tengo este codigo "comet" que recupera de la BD entradas conforme se van guardando y funciona bien, la cosa es que al mostrarlas noticias va recuperando las muestra rapidamente y me gustaria añadirle un efecto de fade in.

He intentado adaptar el codigo para hacerlo posible pero por mas que pruebo es imposible no funiona, a ver si alguien sabe como se podria añadir.

El javascritp:

Código Javascript:

var xmlhttp = function()
    {
        var a;try{a = new XMLHttpRequest();}
        catch(e){try{a = new ActiveXObject('Msxml2.XMLHTTP');}
        catch(e){try{a = new ActiveXObject('Microsoft.XMLHTTP');}
        catch(e){alert('Your browser doesn\'t support ajax');a=false;}
        }}return a;
    };  
    window.onload = function()
    {
        var a = new comet();
    };  
    var comet = function()
    {
        var a = new xmlhttp();
        a.open('post',window.location+"?"+Math.random()+"="+Math.random(), true);
        a.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        a.onreadystatechange = function()
        {
            if(a.readyState == 4)
            {
                document.getElementById('content').innerHTML = a.responseText;
                window.setTimeout(function(){
                    a = new comet();                    
                },1000);
                
            }
        };
        a.send('algo=algo');                
    };
 

y el php

Código PHP:

  if($_POST)    
{  
    set_time_limit(0);      
    header("Edge-control: no-store");  
    sleep(1);   
    session_start();  
        Tecnologia_noticias 
    if (!$conexion) 
      { 
      die('Could not connect: ' . mysql_error()); 
      } 
 
    mysql_select_db("esfera10_rss", $conexion); 
 
 
 
echo     $notificaciones = "select * from ".$_SESSION['Categoria'].'_noticias'." where id_noticia > '".$_SESSION["f"]."' order by id_noticia desc";                  
    $notificaciones = mysql_query($notificaciones, $conexion);   
            while($rs=mysql_fetch_array($notificaciones))   
              {   
                echo $rs['titulo'].'<br>';                                                           
                            } 
                             
    mysql_close($conexion);     
    exit(); 
}  
   

Código HTML:

<div id="content">
 
 
        Cargando...
                    
 
        </div>
 

Un saludo amigos

[chinanzio]

Perdona , con que queres usar el fadeIn y cuando ?

[franjgg]

Hola chinanzio como estas,

Pues me gustaria que al mostrar la noticia en vez de hacerlo de golpe lo hiciese con el efecto fade,


Explico un poco el codigo la parte javascript es el comet que se encarga de recuperar la noticia cuando se guarda algo en la BD, el php es como la muestra con la consulta, y el html es el div que esta referido al javacritp para mostrarlas.

Un saludo amigo

[chinanzio]

algo asi ?
content tiene que tener display: none;
Estoy suponiendo que usas jQuery

Código Javascript:

var xmlhttp = function() {
    var a;
    try {
        a = new XMLHttpRequest();
    } catch (e) {
        try {
            a = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            try {
                a = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e) {
                alert('Your browser doesn\'t support ajax');
                a = false;
            }
        }
    }
    return a;
};
window.onload = function() {
    var a = new comet();
};
var comet = function() {
    var a = new xmlhttp();
    a.open('post', window.location + "?" + Math.random() + "=" + Math.random(), true);
    a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    a.onreadystatechange = function() {
        if (a.readyState == 4) {
            var content = document.getElementById('content');
            content.innerHTML = a.responseText;
            $(content).fadeIn("slow", function() {
                window.setTimeout(function() {
                    a = new comet();
                }, 1000);
            });
        }
    };
    a.send('algo=algo');
};
 

[franjgg]

Hola amigo,

Si estoy usando JQuery, he implementado su codigo y ahora hace el efecto face cuando esta mostrando el echo de la consulta pero cuando recupera las noticias sigue mostrandolas de golpe.

Un saludo y mil gracias amigo

[chinanzio]

Asi ?

Código Javascript:

var xmlhttp = function() {
    var a;
    try {
        a = new XMLHttpRequest();
    } catch (e) {
        try {
            a = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            try {
                a = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e) {
                alert('Your browser doesn\'t support ajax');
                a = false;
            }
        }
    }
    return a;
};
window.onload = function() {
    var a = new comet();
};
var comet = function() {
    var a = new xmlhttp();
    a.open('post', window.location + "?" + Math.random() + "=" + Math.random(), true);
    a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    a.onreadystatechange = function() {
        if (a.readyState == 4) {
            var content = document.getElementById('content');
            $(content).fadeOut("slow", function() {
                content.innerHTML = a.responseText;
                $(content).fadeIn("slow", function() {
                    window.setTimeout(function() {
                        a = new comet();
                    }, 1000);
                });
            });
        }
    };
    a.send('algo=algo');
};
 

[franjgg]

Amigo ahora va un poco mejor, cuando recupera las noticias aparecen con el efecto fade in pero al segundo o dos segundos desaparece y vuleve aparecer, creo que es por que cada segundo la funcion donde esta el efecto fade esta comprobando si hay cambios en la BD.


un saludo y de nuevo mil gracias

[chinanzio]

Hola, con estas lineas estas haciendo que al segundo se produzca un fadeOut y un fadeIn

Código Javascript:

window.setTimeout(function() {
    a = new comet();
}, 1000);
 

se me ocurre que podrías ejecutar los fade solo si hay cambios ... no termino de entender cual es el efecto que quieres

[franjgg]

Si ese es el efecto que deseo amigo, que realice solo un fade in cuando hay cambios pero no realice el fade out, siento no explicarme bien


Un saludo y mil gracias

[chinanzio]

Asi ?

Código Javascript:

var xmlhttp = function() {
    var a;
    try {
        a = new XMLHttpRequest();
    } catch (e) {
        try {
            a = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            try {
                a = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e) {
                alert('Your browser doesn\'t support ajax');
                a = false;
            }
        }
    }
    return a;
};
window.onload = function() {
    var a = new comet();
};
var comet = function() {
    var a = new xmlhttp();
    a.open('post', window.location + "?" + Math.random() + "=" + Math.random(), true);
    a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    a.onreadystatechange = function() {
        if (a.readyState == 4) {
            var content = document.getElementById('content');
            var cambios = true; // alguna condición con el response
            if (cambios) {
                $(content).fadeOut("slow", function() {
                    content.innerHTML = a.responseText;
                    $(content).fadeIn("slow", function() {
                        window.setTimeout(function() {
                            a = new comet();
                        }, 1000);
                    });
                });
            } else {
                window.setTimeout(function() {
                    a = new comet();
                }, 1000);
            }
        }
    };
    a.send('algo=algo');
};
 

[franjgg]

Si amigo asi esta bien, pero cada segundo esta haciendo el efecto fade out, se podria quitar el fade out y dejar solo el fade in?

[chinanzio]

Iniciado por franjgg

Si amigo asi esta bien, pero cada segundo esta haciendo el efecto fade out, se podria quitar el fade out y dejar solo el fade in?

Si el div está visible el fadeIn no hace nada, por eso puse el fadeOut, para ocultar el div antes de hacer el fadeIn, se entiende ?

[franjgg]

Si entendi amigo, la cosa es que ahora mismo lo que hace es mostrar la noticia con efecto fade in pero al segundo la esta desapareciendo lentamente y volviendo hacer fade in y asi como un buble infinito

[chinanzio]

por eso había puesto la condición

Código Javascript:

var cambios = true; // alguna condición con el response, esta condición la tienes que implementar
if (cambios) {
 

entonces, si hay cambios se producirán los efectos fadeOut y fadeIn, y si no hay cambios solo se volverá a crear un nuevo comet sin ocultar el div de la noticia

[franjgg]

Ah vale vale, antes no habia entendido perdon,

Lo que intentaba hacer es igual que en facebook que cuando entra algo en la BD lo muestra sin refrescar, tal como lo tengo lo muestra bien la cosa es que lo desaparece tras un segundo y no quiero que desaparezca.


Un saludo amigo y de verdad muchas gracias por tu atencion

[franjgg]

Amigo gracias por tu ayuda,

He conseguido que funcione parcialmente como quiero, con este codigo que me escribiste y el display none en el div conseguimos que muestre el efecto fade in pero solo en la primera noticia que recupera las demas las muestra de golpe.

Código Javascript:

var xmlhttp = function() {
    var a;
    try {
        a = new XMLHttpRequest();
    } catch (e) {
        try {
            a = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            try {
                a = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e) {
                alert('Your browser doesn\'t support ajax');
                a = false;
            }
        }
    }
    return a;
};
window.onload = function() {
    var a = new comet();
};
var comet = function() {
    var a = new xmlhttp();
    a.open('post', window.location + "?" + Math.random() + "=" + Math.random(), true);
    a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    a.onreadystatechange = function() {
        if (a.readyState == 4) {
            var content = document.getElementById("content");
                content.innerHTML = a.responseText; 
            $(content).fadeIn("slow", function() {
                
                window.setTimeout(function() {
                    a = new comet();
                }, 1000);
            });
        }
    };
    a.send('algo=algo');
};
 

un saludo amigo

[chinanzio]

Hola franjgg, es lógico que solo haga el fadeIn una sola vez con el código que estás usando. He visto que le sacaste el fadeOut y la condición de si había cambios.
Te lo explico una vez mas.
El fadeIn hace que algo que está invisible se vuelva paulatinamente visible y el fadeOut hace que algo que está visible se vuelva paulatinamente invisible.
Con el codigo que tenes ahora el <div id="content"/> se vuelve paulatinamente visible la primera vez y listo, las siguientes veces ya está visible, por eso el fadeIn no hace nada, por que ya está visible, no hay nada que hacer con el fadeIn, por eso puse el fadeOut, para que antes de usar el fadeIn el div esubiera invisible. El efecto que no querías (el de los fade cada un segundo) se controla con la condición que tenes que implementar.
Saludos