Create scrolling (running)news ticker using Jquery Posted by vuluganck | at Saturday, May 09, 2009

Hello everyone, have you ever seen this kind of tip ? I am sure you have seen it on some websites , or you have known how to make it on blogger.But let me explain to you what is the different from the old and this.

I don't know where the old running text come from , but I am sure that is not attractive much, you will be dizzy when you look at the running text.So that is the difference ,with this post, I will guide you how to make a completely new Scrolling news ticker with smooth effect that you will not be dizzy anymore.

• View live demo


• Download

That's it ! Now lets go to make it:
1.First you have to add this script code before your </head> tag :

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>


2.There are 2 types of scrolling :
-If you want the scrolling to stop when the cursor is over it, use this code and add it before the </body> tag or paste it in HTML/Javascript in Layout.

<DIV ID="TICKER" STYLE="overflow:hidden; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
Your text here!
</DIV>
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>

-If you don't want the ticker stop when the cursor is over it , try this code add paste at the same place I told you above:

<DIV ID="TICKER" STYLE="overflow:hidden; width:520px">
Your text here
</DIV>
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>

Note:
-Download the js file above (click on Download link), you will get 1 js file, upload it to your favorite host and get the direct link, i offer you some good hosts as 110mb.com, hotlinkfiles.com...Then paste the link instead of the red code.
-You have to put long text,if your texts are not long enough, it will not run!

Ok now , if you want to change a little bit about the "scrolling text" style , you have to open the webticker_lib.js file then look for these lines:

TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;

You can edit the file webticker_lib.js and change the values for the following variables:

TICKER_RIGHTTOLEFT

Set to true if the text is in Arabic, Hebrew or other right-to-left writing language.

TICKER_SPEED

Set the scrolling speed. Default value is 2.

TICKER_STYLE

Set the default style for the scrolling text.

TICKER_PAUSED

When this variable is set to true, the scrolling ticker is paused.
This value can be changed at runtime, for example when the mouse is over the ticker.

Now you have owned one of the greatest tip for blogger.If you have any problem please leave a comment below I will help you.Please subscribe me to get more these tips.
Zen


Requirements:Jquery
Website: http://www.mioplanet.com/
Developer : Mioplanet
Convert to Blogger: Zenplate