Ragazzi ho un problema e spero davvero che possiate darmi una mano! Sto costruendo una chat che effettua un "refresh interno" tramite l'inner html in ajax. é praticamente pronta solo che vorrei aggiungere un effetto di tipo fade quando un nuovo messaggio viene visualizzato, per rendere l'entrata piu nitida e carina! il fatto è che non riesco a far eseguire una funziona js nel file che viene aggiornato! Avevo pensato di avvalermi di php per mettere in sessione l'id dell'ultimo messaggio cosiche un messaggio nuovo sarebbe di id > di quello precedente.
Come detto non riesco a far quadrare una funziona che richiamo nel file che refresha Non so se si puo fare o meno e/o con quali mezzi!
vi rilascio il codice php che utilizzo! e' quello che viene poi anche mostrato in chat!
chatTime è una funzione php
Effects.fade(".$ry["Id"].", 0, 100, 1000); sarebbe una funziona di un js che viene richiamato nella pagina principale!
Codice PHP:
$fadesession = $_SESSION['Fadechatsession'];
while ($ry = mysql_fetch_array($ris)) {
if($fadesession > $ry["Id"]){
echo "<img src=\"<img src=\"http://www.batsweb.org/Immagini/pixelBianco.gif\" onload=\"Effects.fade(".$ry["Id"].", 0, 100, 1000);\" />";
echo "<div id='".$ry["Id"]."'><font color='#CCCCCC'>".chatTime($ry['data'])."</font> ".$ry['nome'].": [".$ry['loc']."] ".$ry['testo']."</div>";
}else{
echo "<img src=\"<img src=\"http://www.batsweb.org/Immagini/pixelBianco.gif\" onload=\"Effects.fade(".$ry["Id"].", 0, 100, 1000);\" />";
echo "<div id='".$ry["Id"]."'><font color='#CCCCCC'>".chatTime($ry['data'])."</font> ".$ry['nome'].": [".$ry['loc']."] ".$ry['testo']."</div>";
}
$fadesession = $ry["Id"];
}
$_SESSION['Fadechatsession'] = $fadesession;
Questo è il file js che viene richiamato nella pagina principale della chat
Codice PHP:
Effects = {};
Effects.fade = function(id, opacStart, opacEnd, duration, callback)
{
Effects.changeOpacity(0, id);
var speed = Math.round(duration/100);
var timer = 0;
if(opacStart > opacEnd)
{
for(var i=opacStart; i>=opacEnd; i--)
{
setTimeout("Effects.changeOpacity("+ i +", '"+ id +"', "+ opacEnd +", '"+ callback +")", (timer*speed));
timer++;
}
}
else if(opacStart < opacEnd)
{
for(var i=opacStart; i<=opacEnd; i++)
{
setTimeout("Effects.changeOpacity("+ i +", '"+ id +"', "+ opacEnd +", '"+ callback +"')", (timer*speed));
timer++;
}
}
}
Effects.changeOpacity = function(opacity, id, endPoint, callback)
{
var _style = document.getElementById(id).style;
_style.opacity = (opacity / 100);
_style.MozOpacity = (opacity / 100);
_style.KhtmlOpacity = (opacity / 100);
_style.filter = "alpha(opacity=" + opacity + ")";
if(opacity == endPoint && callback != null)
{
eval(callback);
}
}
Effects.onFaded = function()
{
// Add callback code here
}
il risultato che vorrei avere è simile al shoutbox di questo sito [ a destra ]!
http://blog.jalenack.com/ajax/
spero che possiate darmi una mano