[TUTORIAL] News Ticker example

This is an article by lupocreative and branched off code from Bentheo - I did not write this article to any questions refer it to them members.
This is more a tutorial then a hack since we're trying to integrate a javascript into CuteNews. You might just as well use some other ticker script as many well written javascript can be used to make something beautifull when combined with CuteNews.

OK, it took me a while to get there too, but don't panic!

1. First, log in to your server's CuteNews admin panel - http://yourserver/path/to/cutenews/index.php

2. Click "Options" in the header navigation.

3. Click "Edit Templates".

4. Click "create new template".

5. Create a new template based on HEADLINES with name "ticker" (without quotes) - click "Create Template".

6. Now you need to go and edit that new ticker template.  If you click "go back" from that last screen, it will take you back to the Edit Templates screen.  In the pull-down, Switch to Template: "ticker" and click "Go".

7. The template editor will switch to the ticker template.  In the bottom half of this screen, under "Edit Template Parts", click "Active News" and an editor will show underneath.  Type this code into the editor:

[link]{title}[/link]    

- actually add in around 20-30 of the space characters rather than the four you've just added above - trust me, the ticker looks better with a load of spaces after each news item.  Also note that you cannot simply use your spacebar to add in spaces - html will only render the first spacebar inserted space, after which you need to specify additional spaces with the ascii code - for a space, that's ampersand n b s p semicolon.

8. Click "Save Changes".  Please note that if you go and edit this template ever again, you will need to replace the spaces with the ascii code for spaces.  The system automatically converts the ascii code to spacebar inserted spaces when you open the template up in the editor.

9. You're done with all the edits in CuteNews.

10. You now need to insert the javascript into your site pages (NOT CuteNews) where you want the ticker to be shown. Find the point in your html where you want to insert it and paste:

<script language="JavaScript1.2">

/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="400px"
//Specify the marquee's height
var marqueeheight="20px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#99cc99"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><p>[b]<?PHP $number = 5; $template = "ticker"; include("cutenews/show_news.php"); ?>[/b]</p></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:2px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0px top=2px onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

11. Now adjust the settings at the top of the script to suit your site - marqueewidth, marqueeheight, marqueespeed, marqueebgcolor.

12. This is the MOST IMPORTANT thing: check that your entire "var marqueecontent" statement is on ONE line, that's from the start apostrophe to the end apostrophe.  It will not work unless it is.

13. In order to adjust the number of headlines shown, you can change "$number = 5" to whatever number you wish.

14. If your CuteNews installation is in a relative directory different to the one shown above in the var marqueecontent example, adjust it appropriately.  Eg: ../../path/to/installationdirectory/show_news.php

14. Publish your web page.  You MUST preview your site using the http address, not a file address, otherwise the javascript won't render in the browser.

15. Providing none of your headlines contain any apostrophes, it should work just fine.  If it still isn't working, and you're sure there's no apostrophes, double check your var marqueecontent statement - it MUST be all on one line and must start and end with a single apostrophe.

16. Once you have got a working ticker, you might need to play with the formatting of the text in the ticker.  In my example above, it uses the default paragraph p style set for the page (so if you're using CSS it will inherit from that), and the text is bold.  It will also use your default hyperlink a formatting.  You may wish to adjust all of that.  To change the formatting of the hyperlinks in the ticker, I think you will need to do it within a div tag, as I don't think you can stipulate a class directly in the CuteNews template editor.  Add a hyperlink class to your CSS then in the javascript, change the var marqueecontent to:

var marqueecontent='<nobr><p><div class="yournewhyperlinkclass"><?PHP $number = 5; $template = "ticker"; include("cutenews/show_news.php"); ?></div></p></nobr>'

17. Similarly, you may need to adjust the padding.  In my example above, I stipulate a 2px padding at the top to lower the scrolling text a little.  It is stipulated in two places: under the "if (iedom)" argument and "else if (document.layers)" argument toward the bottom of the script.

18. You may wish to add a PHP_SELF element if you want to redirect your visitors to another page.  For example, I wanted visitors to land up on html/announcements.php where the CuteNews served news usually resides.  To do that, change your var marqueecontent statement to:

var marqueecontent='<nobr><p>[b]<?PHP $PHP_SELF = 'path/to/page.php'; $number = 5; $template = "ticker"; include("cutenews/show_news.php"); ?>[/b]</p></nobr>'

Hope this all helps.  And once again, it would be wrong of me not to say thanks to Bentheo.  He put this together, I have simply made it a bit easier to follow - HOPEFULLY! 

Simon