I am having trouble animating a div on the same page as the div that is not animating. Here is my code:
Page 2
<?php
mysql_connect('127.0.0.1', 'root', '');
mysql_select_db('table');
$query = mysql_query("SELECT * FROM `blog`");
?>
<script>
$('.post').click(function() {
var value = $(this).attr('rel');
$('.load_post').html('Loading...').load('load_post.php?value='+value);
$('.load_post').animate({"left": "-=1500px"}, "slow");
$(".posts").animate({"left": "-=1500px"}, "slow");
$(".blog_posts").animate({"left": "-=1500px"}, "slow");
});
</script>
<?php
while ($rows = mysql_fetch_array($query)){
$id = $rows['id'];
$date = str_replace("-", "/", $rows['date']);
$title = stripslashes($rows['title']);
?>
<a href="#" class="post" rel="<?php echo $id; ?>"> <h2 style="padding:0px; margin:0px;"><?php echo $title; ?></h2></a>
<h6 style="padding:0px; margin:0px;"><?php echo $date; ?></h6>
<?php
}
?>
Page 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
include 'body/head.php';
?>
<body>
<?php
include 'body/nav.php';
?>
<script>
$(document).ready(function() {
$('.blog_posts').load('blog_feed.php');
});
</script>
<div style="position:absolute; top:90px; left:1px; width:550px; background-color:lightblue;">
<h1>Blog Posts</h1>
<div class="blog_posts">
</div>
<div class="load_post" style="position:absolute; top:250px; left:1500px; width:550px; background-color:lightblue;">
</div>
</div>
</body>
</html>
I do not have anymore ideas of why this could be happening. Can anyone figure out this issue? Thanks for helping.
