CODEWITHSUNDEEP
jqueryscrolleffectsslide
Auxiliary
Auxiliary

Reputation: 2757

JQuery: scrolling animation problem

I've written these 2 JQuery functions which are supposed to take 9 blocks with IDs set from "C1" to "C9" and scroll them upwards until they reach the top and then each block that reaches the top should go back and start again. The strange thing is each time they start over the space between the blocks gets larger until everything gets messed up. I'm new to JQuery and I would appreciate any help or even better ideas on how I should do this. This is the code:

<html> 
    <head> 
        <title>Some JQuery Practice</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <link rel="stylesheet" href="style1.css" type="text/css">
        <style>
            #BOX{
                position:absolute;
                width:700px;
                height:200px;
                top:100px;
                overflow:hidden;
                background-color:#D3C79D;
                -moz-border-radius:30px;
            }
            .content{

                font-family:Tahoma;
                font-size: 11px;
                position:relative;
                width:660px;
                top:200px;
            }
        </style>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script>
            function OneGoesUp(target){
                if(target.position().top == 0){
                    target.css({"top":"270"});
                }
                target.animate({
                    "top": "-=1"
                }, 10, function(){OneGoesUp(target)});
            }
            function GoUp(){
                for(var i=1;i<10;i++){
                    var str = "#c";
                    str += i;
                    $(str).text(str);
                    OneGoesUp($(str));
                }
            }
        </script>
    </head>
    <body onload="GoUp();"> 
        <div id="BOX">
        <div id="c1" class="content"><p>Lorem ipsum</p></div>
        <div id="c2" class="content"><p>Lorem ipsum</p></div>
        <div id="c3" class="content"><p>Lorem ipsum</p></div>
        <div id="c4" class="content"><p>Lorem ipsum</p></div>
        <div id="c5" class="content"><p>Lorem ipsum</p></div>
        <div id="c6" class="content"><p>Lorem ipsum</p></div>
        <div id="c7" class="content"><p>Lorem ipsum</p></div>
        <div id="c8" class="content"><p>Lorem ipsum</p></div>
        <div id="c9" class="content"><p>ghghjghjghj</p></div>
        </div>

    </body>
</html>

The GoUp() function gets called once and that's when the page loads. Do I have to use the Cycle plugin for such an effect? Thanks in advance.

Upvotes: 0

Views: 446

Answers (2)

ayan sil
ayan sil

Reputation: 91

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Smooth Scrolling</title>
    <style type="text/css">
        .container{
            width:300px;
            margin:0 auto;  
                  }
        .section{
            margin-top:60px;
                }
    .navigation{
        position: fixed;
        background:white;
        padding:20px 20px;
        width:100%;
        margin-top:0px;
        top:0px;
    }
</style>
</head>
<body>
<div class="container">
<div class="navigation">
    <a href="#html">HTML</a>
    <a href="#javascript">JavaScript</a>
    <a href="#jquery">jQuery</a>
    <a href="#php">PHP</a>
    <a href="#css">CSS</a>
</div>
<div class="section">
    <h1 id="html">HTML</h1>
            <p>
            put your text about html here


            </p>
</div>
<div class="section">
    <h1 id="javascript">JavaScript</h1>
    <p>
            put your javascript details here.
            </p>
</div>
<div class="section">
    <h1 id="jquery">jQuery</h1>
    <p>
            Put your details about javascript here
            </p>

</div>
<div class="section">
    <h1 id="php">PHP</h1>
    <p>
            put your details about php here
            </p>

</div>
<div class="section">
    <h1 id="css">CSS</h1>
    <p>put your details </p>

</div>      
</div>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 <script>
$(document).ready(function() {
    $('a[href^="#"]').click(function(event) {
        var id = $(this).attr("href");
        var offset = 60;
        var target = $(id).offset().top - offset;

        $('html, body').animate({scrollTop:target}, 3000);
        event.preventDefault();
    });
});
</script>
</body>
</html>

Upvotes: 0

darma
darma

Reputation: 4747

It should be easier with absolute position on the .content class (this way positions on the screen are more consistent and don't depend one on each other among the div.content elements, so i suggest you update your CSS accordingly), and then the following modifications in the JS :

<script type="text/javascript">
$(document).ready(
    function(){
        $('.content').each(function(i){
            $(this).text($(this).attr('id'));
            $(this).css('top', 15*i + 'px'); //initial position, Y-space of 15px beteween each div
            OneGoesUp($(this));
        });
    }
);

function OneGoesUp(target){
    if(parseInt(target.css('top')) == 0){
        target.css({'top':'270px'});
    }
    target.animate({
        "top": "-=1"
    }, 10, function(){OneGoesUp(target)});
}
</script>

and finally remove onload from the body tag.

Upvotes: 1

Related Questions