[jQuery] Refreshing .load with .fadeIn (php/jQuery chatt)
Hello jQuery people!
I just started with jQuery and it's awesome. But im having some
trouble while building this php/jQuery chat. Thought you might be able
to help.
So, my idea was to build a chatt with php and jQuery, and guess what?
It works perfectly! But after hours of watching diffrent jQuery
effects i wanted to add these to my chat.
The setup is as follows
jQuery code ------------------------------------------------
var refreshId = setInterval(function()
{
$('.chattFonster').load('mainChatt.php');
}, 1000);
-------------------------------------------------------------------
html code ----------------------------------------------------
<div class="chattFonster">
</div>
-------------------------------------------------------------------
mainChatt.php ---------------------------------------------
<?php
include "config.php";
if($_SESSION['logged_in'] != TRUE) {
header("Location: index.php");
exit();
}
$sql = "SELECT * FROM chatt WHERE till = 0 OR till = ". $_SESSION
['logged_id'] ." OR agare = ". $_SESSION['logged_id'] ." ORDER BY id
DESC";
$result = mysql_query("$sql");
while($db = mysql_fetch_array($result)) {
$sql2 = "SELECT * FROM anvandare WHERE id = '". $db['agare'] ."'";
$result2 = mysql_query("$sql2");
while($db2 = mysql_fetch_array($result2)) {
?>
<script type="text/javascript">
$(document).ready(function() {
$(".chatt<?php echo $db['id'] ?>").fadeIn();
});
</script>
<?php
?> <div class="chatt<?php echo $db['id']; ?>" type="<?php echo $db
['id']; ?>" style="float: left; <?php if($id[$db['id']] == false) { ?>
display: none; <?php } ?>">
<?php echo "<". $db['tid'] ."> <strong>"; ?>
<a href="profil.php?id=<?php echo $db2['id']; ?>"><?php echo
htmlentities($db2['anvandarnamn']); ?></a>
<?php echo "</strong> : ". $db['meddelande'] ."<br />"; ?>
</div><div class="clear"></div><?php
$id[$db['id'] - 1] = true;
}
}
?>
----------------------------------------------
Forgive me for the messy-ness, but when testing out new stuff it
easily tend to be quite messy >:)
Anyhow, you can see my failed attemp here. But this actually somewhat
works. When a new message
is entered, it starts to fadeIn. Though... it keeps fadeing in
everytime my .load is refreshed.
What i want is that the latest message only fades in once.
Any help? :)