• strict warning: Non-static method view::load() should not be called statically in /home/yimaster/public_html/pras/sites/all/modules/views/views.module on line 842.
  • strict warning: Declaration of views_handler_argument::init() should be compatible with views_handler::init(&$view, $options) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_argument.inc on line 745.
  • strict warning: Non-static method views_many_to_one_helper::option_definition() should not be called statically, assuming $this from incompatible context in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_argument_many_to_one.inc on line 34.
  • strict warning: Non-static method views_many_to_one_helper::option_definition() should not be called statically, assuming $this from incompatible context in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_argument_many_to_one.inc on line 34.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_filter.inc on line 585.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_filter.inc on line 585.
  • strict warning: Declaration of views_handler_filter_boolean_operator::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_filter_boolean_operator.inc on line 149.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/plugins/views_plugin_row.inc on line 135.
  • strict warning: Declaration of views_plugin_row::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/plugins/views_plugin_row.inc on line 135.
  • strict warning: Non-static method view::load() should not be called statically in /home/yimaster/public_html/pras/sites/all/modules/views/views.module on line 842.
  • strict warning: Declaration of views_plugin_style_default::options() should be compatible with views_object::options() in /home/yimaster/public_html/pras/sites/all/modules/views/plugins/views_plugin_style_default.inc on line 25.
  • strict warning: Non-static method view::load() should not be called statically in /home/yimaster/public_html/pras/sites/all/modules/views/views.module on line 842.
  • strict warning: Declaration of views_content_plugin_display_panel_pane::options_submit() should be compatible with views_plugin_display::options_submit(&$form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/ctools/views_content/plugins/views/views_content_plugin_display_panel_pane.inc on line 358.

Create a BBC style news ticker in drupal

80 comments

Update

 

My good friend Bibek has just made a views style plugin utilizing the above technique. For instructions on how to use it see the bottom of the post.

 

If you head over to BBC's Website you will see a nice little type writer style news ticker at the top that displays the latest news. I will be showing you how to create similar news ticker for your drupal site. I would like to thank my friend Geshan for his help. This example is for drupal 6 only for drupal 5 there is a similar module available.

What you will need

  1. A drupal 6 installation

  2. CCK

  3. Views

  4. News Ticker(BBC style) jquery plugin

 

Step1. Create the js files

First you will need to download the News Ticker (BBC style) jquery plugin, download ir here. Place the js file inside a folder js inside your themes directory. Next we need another js file to call the precious file. Create a js file named newstickercall.js and put it inside your js directory. Inside your newstickercall.js file put the following content.

$(document).ready(function() {

if ( $("#news-ticker").length > 0 ) {
var options = {
newsList: "#news-ticker",
startDelay: 10,
placeHolder1: " _"
}
$().newsTicker(options);
}

});

You can download the file at the bottom of the post.

Step2. Include the js files

open your theme.info file and add the following lines to it

 

scripts[] = js/jquery.newsTicker1.2.2.js
scripts[] = js/newstickercall.js
 

You may need to clear your cache for the settings to take effect. To clear your cache goto

Site Configuration-> Performance

Step3. Create your news ticker content type

Create a custom content type called News ticker using CCK. Add some news ticker items.

Step 4. Create a view for the news ticker

Create a view called news_ticker and select view type node.

Add some filters. Select node published and node type as filters and in the node type select News ticker.

In the fields add Node: Title and link this to the node.

In the style select HTML list and select unordered list.

Add a block display

Step 5. Theme your views

For the news ticker to work we need the output of the views to be of the form

<ul id="news-ticker">
<li><a href="#">MakeMineATriple.com</a></li>
<li><a href="http://www.jquery.com">jQuery</a></li>
<li>Or alternatively an item with just text</li>
</ul>

 

So we need to theme the views so that the output from the views is similar to above.

In the basic settings for the block display select Theme: Information. Select style output. It provides a set of codes. Copy the code to a new file.

 

 

Add the id news-ticker to your ul. It should be something like this:

<div class="item-list">
<?php if (!empty($title)) : ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<<?php print $options['type']; ?> id="news-ticker">
<?php foreach ($rows as $id => $row): ?>
<li><?php print $row; ?></li>
<?php endforeach; ?>
</<?php print $options['type']; ?>>
</div>

 

Save the file. The filename should be the last option in your style output list.

 

Put this file in your themes directory.

Again in the theme information select Row style output. Copy the code to a new file like before. Remove all the unnecessary spans and Divs so that only the li element is displayed .It shpuld be something like this:

<?php foreach ($fields as $id => $field): ?>
<?php print $field->content; ?>
<?php endforeach; ?>
 

Save the file.The filename should be the last name in the row style output. It should be something like views-view-fields—news-ticker—block-1.tpl.php.

Put this file in the themes directory as well.

Now in the theme: information click on Rescan template files. It should highlight the newly added files. Click Ok.

 

Step 6. Enable the block

Now go to Blocks and enable the views block.

 

Step 7. See the news ticker in action

Now whenever you go to any page that has the News ticker block enable you should see the news ticker in action.

 

Hope you have enjoyed this article.

 

UPDATE

My good friend Bibek has just made a views style plugin utilizing the above technique. To use the plugin download it . Put it in your modules directory and extract in there. Enable the module. 
In your Views Select Style

Then Select Views Ticker from the list

Give the Delay time and the placeholder Parameters

Save the View and you are good to go.

AttachmentSize
newstickercall.js.txt153 bytes
views-view-fields--news-ticker--block-1.tpl_.php.txt1.03 KB
views-view-list--news-ticker--block-1.tpl_.php.txt643 bytes
views-newsticker-export.txt2.17 KB

80 Responses to "Create a BBC style news ticker in drupal"

Anjhero says:

thnx for this :)

Good post man keep it up, give a link of live demo.

Futureal says:

is this only functional in drupal ?? how to incorporate it in other CMS?

prashant says:

I guess you can incorporate it in other cms since its just a jquery plugin but the methods described above is drupal only...

christina says:

Look like a drupal funtion. i have the same question how to compare it with CMS. DWI lawyers

smn0 says:

your tutorial is very great :)

I have trouble to see my news with my views.

I have only "div_" displayed !!!

Someone can help me plz ?

prashant says:

Can you explain in a bit more detail what the problem is?? them may be I can figure out what the problem is??

dereine says:

What about providing a views display style and provide it as module

Then its much much easier and cooler to use :)

prashant says:

Ya I guess that wud be cool...  :)

Silur says:

Hello,
at first sry for my bad english ^^

I have created the ticker @ this tutorial but i can't click the titel to come to the full text and a other problem is i cant edit the colors from this block !?!?

pls help!

lg
Sili

prashant says:

To link the ticker to the full text in the views in the fields in the option for the Node: Title select link this field to the node...and you can change the color using css...

Silur says:

when i change:

<?php if (!empty($title)) : ?>

<?php print $title; ?>

<?php endif; ?>
< id="news-ticker">
<?php foreach ($rows as $id => $row): ?>

  • <?php print $row; ?>
  • <?php endforeach; ?>
    >

    to

    <?php if (!empty($title)) : ?>

    <?php print $title; ?>

    <?php endif; ?>
    < id="news">
    <?php foreach ($rows as $id => $row): ?>

  • <?php print $row; ?>
  • <?php endforeach; ?>
    >

    in the views-view-list--news-ticker--block-1.tpl.php

    than i can click the titel to the full text but i have no ticker effekt and it is 1 news displayd

    Silur says:

    Hello
    in option of the Node is this selected :-/

    what fore a css?
    from theme?

    Silur says:

    The third major problem is the ticker is not on all pages!

    Always in the menu when I click on a linke to a node is disappearing the ticker in the header

    prashant says:

    HI Silur ..I am having a hard time understanding what problems you are facing..so I have exported my view..see the attached files...Import the view..download the views-view-list--news-ticker--block-1.tpl_.php and the views-view-list--news-ticker--block-1.tpl_.php.txt files and rename them to views-view-list--news-ticker--block-1.tpl.php and views-view-list--news-ticker--block-1.tpl.php and place them in your theme folder..now all you gotta do is enable the block from your blocks section...hope this helps...

    Silur says:

    all 4 files are the same?^^
    i have in my theme folder:
    views-view-fields—news-ticker—block-1.tpl.php
    views-view-list--news-ticker--block-1.tpl.php

    pls help *sniiifff*

    lg
    sili

    Silur says:

    can pls help me @ teamview or so?

    my icq is : 297936284
    an msn : kriststoff@hotmail.de

    Silur says:

    i have it ^^
    the last name in the row style output isn't
    views-view-fields—news-ticker—block-1.tpl.php

    it is
    views-view-fields--news-ticker--block-1.tpl.php

    jehaa^^
    big thx for the tutorial :-)

    prashant says:

    Thats great...  :) Keep tuning in for more aricles...

    Clive says:

    Thanks for this!

    I have one small problem. I have the ticker on my frontpage and when I first visit the site there is a delay of about 1 second before the ticker starts, during that 1 second all the nodes are displayed in a static list briefly, which kind of looks like a glitch.

    I have tried changing start delay in both .js files to 0, this has no effect, I have also removed the start delay line altogether, still no effect.

    Its kind of like the the views theme files dont kick in instantly and a static list of node titles is displayed for a avout 1 second. I have cleared caches etc also.

    you can see what i mean here: http://www.beathoker.com

    Any ideas?

    Thanks again.

    prashant says:

    Hi Clive,

    I see what you mean..and I think I have found a solution for that. What you need to do is first of all hide the news-ticker block.

    In the css add this..

    ul#news-ticker
    {
      display: none;
    }

    and then only display it when the document is ready...change your newsticker js file to

    $(document).ready(function() {

     

        if ( $("#news-ticker").length > 0 ) {
            $('ul#news-ticker').css("display","block");
    var options = {
                  newsList: "#news-ticker",
                 startDelay: 10,
                 placeHolder1: " _"
            }
                   
            $().newsTicker(options);
        }
        
    });

     

    This will only display the newsticker block after all the news item has been added....I hope this helps...

    it was indeed cool

    Clive says:

    thanks for the reply.

    I added the following to styles.css in the theme directory

    ul#news-ticker

    {

    display: none;

    }

    and then changed the code in the newsticker.js file, but it doesnt seem to have worked.

    Am i putting the css in the correct file?

    prashant says:

    Hi Clive..

    I have looked at your site and the jquery is fine, I think I know where the problem is, I see that you have turned on caching and compress css in performance setting, So the changes that you have made to the style.css file is not being taken,So you may need to clear the cache in performance setting and it should work..

    Clive says:

    actually nevermind, firebug told me I had to put the css in a strange file in defauls/files/css for some reason. Working now anyway!

    Thanks :)

    prashant says:

    Ok thats great...

    Anonymous says:

    Hi,
    I'm having the same issue with the list showing up on the page before the ticker... where exactly did you have to put the css ?

    Thanks,
    Ruairi

    prashant says:

    What u do is put the display: none style in your style.css file in your theme file. then put this
    $(document).ready(function() {
     
        if ( $("#news-ticker").length > 0 ) {
            $('ul#news-ticker').css("display","block");
    var options = {
                  newsList: "#news-ticker",
                 startDelay: 10,
                 placeHolder1: " _"
            }
                  
            $().newsTicker(options);
        }
       
    });in the js file

    Clive says:

    hmmm, it was working until I cleared the cache, it has stopped working now. When i changed the css in that temp file it seemed to work until the cache was cleared. It doesnt seem to be taking the change in styles.css for some reason, even after cache is cleared

    prashant says:

    Can you disable caching and set optimize css to disable in the performance setting..This way we can know if the css is being taken or not. you should put the css in the style.css in your theme directory..

    Clive says:

    Disabled caching and disabled optiomize css, and then cleared the cache again. Still doesnt seem to be working.

    I just added the css code to the end of the style.css file in the theme directory, does it matter where its placed within the file?

    prashant says:

    It does not matter where in the file you place the css code. Try changing some other styles just to see if the changes to the style.css file is registered. If it changes then the problem will definitely be in the syntax..perhaps u misspelled the id name or forgot a semi colon..try this

    .item-list ul#news-ticker

    {

    display: none;

    }

    Clive says:

    Think I've solved it.

    The theme I use, Pixture Reloaded, can use different colour schemes, each time the scheme is changed a new style.css file is created in sites/default/files/color/pixture_reloaded. Its this style.css file that is used and not the one in the theme directory, this also applies to Garland and any other theme with changable colours just in case anyone else runs into the same problem.

    Thanks for your help Prashant!

    prashant says:

    Oh really..I didn't know that...Well anyways finally u solved it ..All the best..

    Clive says:

    thanks again for taking the time to write this guide :)

    one last thing, I've been struggling a bit trying to change the font size and colour with css. In the style.css file the following line controls the text size:

    .item-list ul li {
    font-size: 11px;
    list-style-image: url(bullet-round.png);
    }

    changing this changes all the text on the whole site that uses lists though, how can I change this individually?

    I'm not a css expert and am unsure of the syntax to have this effect only news-ticker.

    prashant says:

    The way you can target just the lists inside the newsticker is like this..

    .item-list #news-ticker li

    {

    font-size: 11px;
    list-style-image: url(bullet-round.png);

    }

    Clive says:

    brilliant, works perfectly.

    Thanks for your help Prashant, very much appreciated! :)

    kochli jp says:

    THANKs!!
    Exactly what I was seeking for this afternoon.
    A little google search with "ticker" and you saved me.
    Perfect tutorial.

    I'd gone to drupal for only some weeks, the site is going on for only one...
    So I have a (trivial ?) question:
    is there any possibility to link the "news-ticker title" to an another content (blog or any other one)? to promote it?

    Have a good day

    Kjp (from France)

    prashant says:

    Hi KJP,
    Yes there is a way that you can link it to any other content inside or within the site...You can see that in the Fields section I have put Node: Title, what you can do is put Node: body instead and in the body of your news-ticker content type put the text for the newsticker and link it to wherever you want using the <A> tag..

    kochli jp says:

    Thanks again.
    Very nice work.

    But I got a "little" problem .The origine is not the script!
    It's IE7!!
    Obliged to mount an old HD with xp and IE7 to test!! because some guys told me they had "blank pages", or half blank and so on.
    (Using newsflash theme, on the website, with dhtml menu/nicemenu... )
    ONLY under IE7:
    The site is "unavailable" with the
    ticker (ticker is fully working).
    A little bit more usuable without...

    anshul says:

    awesome tutorial.. worked in first go!

    paul says:

    Thanks for great tutorial. I've now got the news ticker on our church website and it was easy to do.

    sg says:

    hey anyone came across this problem. the ticker is working fine, just that when the ticker starts, it starts with displaying all that's in the list and then goes on to show individual listed items. What is the problem?

    wathek says:

    Thank you for this howto but I still having a problem with the ticker I cannot link it to it's node any help please ? I've checked the checkbox but nothing

    jackie says:

    you all guys a great! thanks for sharing all the knowledge you have in drupal.. it really help me to my term paper

    Aria says:

    Nice post! Agree with you! Keep on sharing as well.
    online website design | web design | realsoft

    tommy2 says:

    Very useful post for me. Thank you very much! custom essay

    ddrupal says:

    Hay, great tut but for some reason I cant get the ticker to work properly. All I get to see is an empty field and depending on how I call the JS file there are a "stop" and a "next" link in there. When Im looking in the code I can see the newstitles but every li element has the info "style="display:none;" with it. Therefore it doesnt display anything.

    It also throws out an jquery error "g is undefined" in "drupal/misc/jquery.js?a (line 13). wich burns the IE from time to time.

    Best regards

    ddrupal says:

    Alright...solved the problem. Drupal is using jquery 1.2.6 right now but the function called by the news-ticker2.1 doesnt exist in this version. Updating the "jquery.js" file in drupalroot/misc to jquery 1.4.2 solves the problem.

    Best regards

    Pooja says:

    I have got all the files in place. The text of the ticker is getting displayed. But the bbc style ticker movement is not there.Any idea why ?

    Chris says:

    Hello, I read the comments above about fixing the list appearing before the ticker gets going, and have applied the fix you suggest. Whilst it works fine in Google Chrome, I still get the list appearing for a fraction of a second in IE. I don't suppose you have an IE hack to fix the problem?

    Jms S says:

    Thanks for great stuff and article about how to create news in Drupal!
    research writing help

    L3na says:

    That was awesome. Thanks for going through all the trouble of creating this in-depth tutorial guys! *respect*.

    Anonymous says:

    Very nice script/module. Easy to use (if you understand how to use Views), and deploys fast.

    Varun says:

    dude, you are awesome... I needed something like this for my NGO website and your instructions and out of the box solution worked like a charm! It is already working, but am testing it now, will be live in a day or two..

    Thanks again...!

    Anonymous says:

    Hi, I followed this tutorial and have a few comments.
    1. the newly revised BBC website dropped the ticker.
    2. there is a new version out for the iquery.newsTicker1.2.2.js - needs a bit of adjusting / updating in the relevant files.
    3. why does one need to use CCK for the Ticker Content Type?
    4. My ticker block shows the news item - but is not tickering along - it is static.

    Thanks for sharing this and keep going ....

    tt

    cris2per says:

    Great article you wrote, really inspired me! I wish I can be like you :)

    security alarm systems

    Paul says:

    Great tutorial, thanks! Just a small point I've got a workaround for so maybe of use to someone or perhaps someone knows a better solution. Sometimes I have no news to display but the box still appears. So I've added this to the top of views.ticker-style-unformatted.tpl.php ...

    <?php
    if (count($rows)<1){
    ?>

    .view-home-news-ticker{display:none;}

    <?php
    }
    //print (count($rows));
    ?>

    Any better way???

    Paul

    Paul says:

    If you have problems in IE6 / IE7 remove the comma at the end of line 8 in views_ticker.js so it reads ...

    placeHolder1 : placeHolder

    Jon says:

    Thanks! in IE6 and 7 the ticker block was piling up the list of news, removing that comma made it work.

    prashant says:

    Thanks for that fix

    christina says:

    I got the same problem on my IE how to resolve it? DWI lawyers

    Very helpful code, thank you.
    Name Badges

    I have a weird problem. I have followed the tutorial and installed the views update patch as well. The block is being displayed on my site. Only problem is that its just static and there is no ticking or appearing effect on it. its just simple plain text that i can click. what have i done wrong?

    its just displaying static news ticker items as links. no effect or ticking ? what to do ? :(

    Egg Loans says:

    Great stuff as usual.

    annie says:

    very good post and a solid piece of information.
    p90x insanity workout

    You make steps for creating a BBC style news ticker in drupal so clear. Many visitors will like the way u do it, i bet. Many thanks.
    website promotion

    John says:

    it will be great if have no direction control rtl or ltr

    pchan says:

    Thanks for the brilliant instructions. This works great when the views node field is set to Node Title but when I changed it to Node Body, it doesn't show the a href link that was included in the body and I am not sure where the problem is. Thanks.

    Nice post thanks for sharing this information
    Term Paper Writing

    rakeback says:

    Very helpfull , i loved the tutorial , keep them coming

    p90x says:

    Using drupal will now become more easier:)

    nice plugin! It was exactly the thing I was lookin for, but i found one problem: !auto insurance quote online you can’t use more than one ticker on a page… Is there a quick fix for this? thanks

    mathew says:

    Drupal is using jquery 1.2.6 right now but the function called by the news-ticker2.1 doesnt exist in this version. Updating the "jquery.js" file in drupalroot/misc to jquery 1.4.2 solves the problem.

    I have one small problem. I have the ticker on my frontpage and when I first visit the site there is a delay of about 1 second before the ticker starts, during that 1 second all the nodes are displayed in a static list briefly, which kind of looks like a glitch.

    Killer plugin!

    Radialabs says:

    This works great when the views node field is set to Node Title but when I changed it to Node Body, it doesn't show the a href link that was included in the body and I am not sure where the problem is. Radialabs Reviews

    Thanks for such a great article here. I love that BBC style ticker! I have never seen anything like that so I will definitely use it on my Drupal website. Thanks for posting it here one more time!

    Post new comment

    The content of this field is kept private and will not be shown publicly.
    • Web page addresses and e-mail addresses turn into links automatically.
    • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
    • Lines and paragraphs break automatically.

    More information about formatting options

    CAPTCHA
    This question is for testing whether you are a human visitor and to prevent automated spam submissions.
    1 + 6 =
    Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.