Grow your CSS skills. Land your dream job.

Vertical, looping news ticker?

  • # August 27, 2009 at 5:27 am

    I can’t figure how to create a vertical, looping news ticker with Malsup’s cycle.

    The first problem is that I need to show all (x) elements at a time, not just one. Removing the first and appending it at the bottom is fine but how do I make it keep on scrolling up, smoothly?

    I’m a bit lost, would like some good directions.

    Thanks!

    # August 27, 2009 at 11:51 am

    you need to post a link to your site, post your code, or post a link to the site where you got the code. The more information you post, the easier it will be to help you and you will get the help faster.

    # August 27, 2009 at 5:00 pm

    Sorry, I should have expressed myself more clearly. What I need is ideas to how this could be solved. I think I should be able to code most of it myself once I get the idea.

    Let’s take a simple unordered list as example. It needs to:

    – Continuously scroll li-elements up
    – When a li is scrolled out of view it should be moved to the bottom e.g. save .html() to a var and append it.

    .. and nothing else really? Only difference from most sliders is that it needs to show several elements at a time – not just one.

    # August 27, 2009 at 5:08 pm

    have you looked at using jquery for this? I know of no script that does this kind of thing, but jquery might handle it. Most people in web design would tell you not to use a scroller because it annoys visitors. You might do better with a scroller that is user controlled.

    http://blog.freelancer-id.com/index.php … -in-jquery

    scroll down to the center of the page and watch the demo on this one.

    http://docs.jquery.com/Tutorials:Scroll … eader#Demo

    # August 28, 2009 at 2:12 am

    Aye, it’s for jQuery. And it’s for an 42" monitor hanging on a wall :)

    That demo shows most of what I’d like to do but can’t really use that technique, since it relies on absolute positioning and doesn’t scroll continuosly.

    Thanks for the answer!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".