Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a news ticker

I'd like to have a news ticker that scrolls from right to left that is easy to add a delete items.

It'd be ideal if I could use jQuery or raw JavaScript if I have to.

Is there a jQuery plugin or a way I can get a news ticker?

After research, I've noticed that a lot of them scroll from top to bottom and not from right to left.

The point of the news ticker is that it's easy to add or remove items, and when you hover, the ticker stops and then resumes when the mouse is not over it.

Update

I've just found liScroll - http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

http://htmlmarquee.com/ looks pretty good too

like image 249
user1658756 Avatar asked Sep 10 '12 10:09

user1658756


2 Answers

If you need a functionality like a Ticker, maybe Left to Right or Top to Bottom, you could simple use the html marquee tag. Use javascript or jquery to update it's content dynamically as you feed comfortable.

You can also alter its motion behavior with onmouseover and onmouseout events, like

    <marquee behavior="scroll" direction="right" 
        onmouseover="this.stop();" 
        onmouseout="this.start();">
            Hover to stop!
    </marquee>

You can play with this at htmlmarquee.com. Check it.
You can see other available options for motion control here.

like image 147
mtk Avatar answered Oct 12 '22 23:10

mtk


Though the <marquee>-element, as suggested by mtk, will work in most browsers, it is not standard HTML and should not be used, if standards-compliance is an issue. You should then use the appropriate CSS-styles!

You can then put your content in almost any HTML-element and just "marquee" it around as you like.

like image 28
I'm with Monica Avatar answered Oct 12 '22 22:10

I'm with Monica