Home/ Questions/Q 985217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T05:07:58+00:00

I’ve written these 2 JQuery functions which are supposed to take 9 blocks with

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0