6

Possible Duplicate:
Implementing circular scroller in jquery

I want to create vertical scroller, which will work exactly like marquee. But I want it to be continuous, like when we use marquee the whole content comes back only after it completely goes up, but I want it to be continuous.

this is what I have... http://jsfiddle.net/JWfaf/1/

I want only in one direction and keep on scrolling. I hope I have cleared what I want to achieve

HTML

<div class="con">
   <ul>
      <li></li>
      <li></li>
      <li></li>
       <li></li>
   </ul>
</div>​

JavaScript

function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "+=250px"},
{
    duration: speed,
    complete: function ()
    {
        targetElement.animate({ marginTop: "-=250px" },
        {
            duration: speed,
            complete: function ()
            {
                animatethis(targetElement, speed);
            }
        });
    }
});
};

animatethis($('.con ul li:first-child'), 10000);​
Community
  • 1
  • 1
vikas devde
  • 11,691
  • 10
  • 35
  • 42
  • @RobertKoritnik I checked the questions, but the answers are not solving the problem, most of the links posted in those answers are broken. – vikas devde Nov 04 '12 at 19:15
  • @vikasdevde: Accepted answer's links are still both working and show vertical circular scrolling what you'er after. In a bit different variety but I'm sure they'd be helpful if you checked code into detail. – Robert Koritnik Nov 04 '12 at 19:58
  • 1
    @vikasdevde: why wait for this question answers? There're other questions of yours that have been sufficiently answered and should be accepted. **Go and do your part if you want us to do ours...** – Robert Koritnik Nov 04 '12 at 20:01

2 Answers2

13

Working Demo : http://jsfiddle.net/rNXs9/1/

HTML : 

<div id="verticalScroller">
    <div>1 Lorem ipsum dolor sit</div>
    <div>2 Lorem ipsum dolor sit</div>
    <div>3 Lorem ipsum dolor sit</div>
    <div>4 Lorem ipsum dolor sit</div>
</div>
​

CSS: 

#verticalScroller {
    position: absolute;
    width:52px;
    height: 180px;
    overflow: hidden;
}

#verticalScroller > div {
    position:absolute;
    width:50px;
    height:50px;
}
​

JS : 

window.verticalScroller = function($elem) {
    var top = parseInt($elem.css("top"));
    var temp = -1 * $('#verticalScroller > div').height();
    if(top < temp) {
        top = $('#verticalScroller').height()
        $elem.css("top", top);
    }
    $elem.animate({ top: (parseInt(top)-60) }, 600, function () {
      window.verticalScroller($(this))
    });
}


$(document).ready(function() {
    var i = 0;
    $("#verticalScroller > div").each(function () {
          $(this).css("top", i);
          i += 60;
          window.verticalScroller($(this));
    });
});

​
Pranav 웃
  • 8,469
  • 6
  • 38
  • 48
  • 2
    Awwww you beat me to it :P. I forked your version so it has linear easing. http://jsfiddle.net/howderek/N9PWn/ – howderek Nov 04 '12 at 20:32
  • @howderek you made it clean and flawless... – vikas devde Nov 05 '12 at 13:47
  • @howderek can I have little more favor, I have now added stop function to stop animation on hover, but cant figure out how to resume animation after mouseout. http://jsfiddle.net/testtracker/4whf6/2/ – vikas devde Nov 05 '12 at 14:29
  • I won't be able to get on SO with a comp for a while (right now im on kindle) but you should try wrapping the animation in an if statement that allows the animation to run if a var `running` is equal to 1. Then use the mouseover and mouseout to make `running` 0 and 1 – howderek Nov 05 '12 at 21:06
  • Nice solution. I've extended it a bit, and allowed variable item height, scroll pauses on mouse over, and multiple marquees per page: https://jsfiddle.net/y3uoepxx/ . I've also published it as a JQuery plugin on Github: https://github.com/aoloe/jquery-verticalscroll . – a.l.e Feb 11 '17 at 22:50
  • It was a great help. Though, I have found that the scrolling divs get overlapped when more than 4 child divs are used for scrolling. Here is changed version http://jsfiddle.net/82jge5v5/2/ – Tolsee Mar 31 '17 at 10:25
2

Here you are fine sir.

The Code

JS:

function animatethis(targetElement, speed) {
    $(targetElement).animate({ marginTop: "300px"},
    {
        duration: speed,
        complete: function ()
        {
            $(targetElement).css('marginTop','-450px');
            animatethis(targetElement, speed);
        }
    });
};

animatethis($('.con ul li:first-child'), 10000);​

CSS:

ul{display:block;width:110px;float:left;height:310px;background:#eee;overflow:hidden;}
li{display:block;width:100px;height:100px;background:#DDD;border-bottom:1px solid #FFF;margin-bottom:5px;}
.con{display:block;width:200px;height:300px;overflow:hidden;}

HTML:

<a href="#" class="click">click</a>
<div class="con">
<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>   
</ul></div>​
howderek
  • 2,224
  • 14
  • 23