Hi,I am Prashant Shrestha, a web developer based in Kathmandu. I specialise in Front end Drupal Development and I also do CSS. And I am passionate about Photography.
Create a BBC style news ticker in drupal
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
-
A drupal 6 installation
-
CCK
-
Views
-
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);
}
});
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
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.
| Attachment | Size |
|---|---|
| newstickercall.js.txt | 153 bytes |
| views-view-fields--news-ticker--block-1.tpl_.php.txt | 1.03 KB |
| views-view-list--news-ticker--block-1.tpl_.php.txt | 643 bytes |
| views-newsticker-export.txt | 2.17 KB |
Bookmark/Search this post with:
Category:
55 Responses to "Create a BBC style news ticker in drupal"
thnx for this :)
Good post man keep it up, give a link of live demo.
is this only functional in drupal ?? how to incorporate it in other CMS?
I guess you can incorporate it in other cms since its just a jquery plugin but the methods described above is drupal only...
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 ?
Can you explain in a bit more detail what the problem is?? them may be I can figure out what the problem is??
What about providing a views display style and provide it as module
Then its much much easier and cooler to use :)
Ya I guess that wud be cool... :)
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
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...
when i change:
<?php print $title; ?>
<?php endif; ?>
< id="news-ticker">
<?php foreach ($rows as $id => $row): ?>
<?php endforeach; ?>
>
to
<?php print $title; ?>
<?php endif; ?>
< id="news">
<?php foreach ($rows as $id => $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
Hello
in option of the Node is this selected :-/
what fore a css?
from theme?
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
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...
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
can pls help me @ teamview or so?
my icq is : 297936284
an msn : kriststoff@hotmail.de
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 :-)
Thats great... :) Keep tuning in for more aricles...
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.
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..
{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 = {This will only display the newsticker block after all the news item has been added....I hope this helps...
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?
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..
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 :)
Ok thats great...
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
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
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
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..
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?
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;
}
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!
Oh really..I didn't know that...Well anyways finally u solved it ..All the best..
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.
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);
}
brilliant, works perfectly.
Thanks for your help Prashant, very much appreciated! :)
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)
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..
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...
awesome tutorial.. worked in first go!
Thanks for great tutorial. I've now got the news ticker on our church website and it was easy to do.
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?
see this http://pras.net.np/blogs/create-bbc-style-news-ticker-drupal#comment-53
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
you all guys a great! thanks for sharing all the knowledge you have in drupal.. it really help me to my term paper
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
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
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 ?
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?
Thanks for great stuff and article about how to create news in Drupal!
research writing help
That was awesome. Thanks for going through all the trouble of creating this in-depth tutorial guys! *respect*.
Post new comment