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.

Recommended Answers

All 3 Replies

Member Avatar for LastMitch

I am having trouble animating a div on the same page as the div that is not animating. Here is my code:

What kind of animation is this? I just copy and paste the code and ran it and it's not working because it requires data from the database.

My next question is does this code (to me it looks like a pagination) work without the database?

This animation should work by itself with jQuery. This issue is more related how you load the data.

Can you explain please on how to load the data properly? Is it the .load () or something else?

Member Avatar for LastMitch

Can you explain please on how to load the data properly? Is it the .load () or something else?

If it was all jquery maybe but the errors appear on my server (local host) is more related to php and jquery doesn't work either.

It does look like a pagination.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.