1 (edited by 2008-08-14 21:14:23)

Topic: [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.

limecity,Jun 16 2005, 05:12 AM wrote:

Could anyone guide me step by step?

I created a new template called ticker.
So what do i put inside?

Next what I do?
How do i call the ticker from my html website?

Where should the javascript ticker be in? the template or the site pages?
I am lost.
<div align="right"><{POST_SNAPBACK}></div>

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!  http://cutephp.com/forum/style_emoticons/default/wink.gif

Simon

2 (edited by 2008-08-14 21:16:12)

Re: [TUTORIAL] News Ticker example

Like said at the top of this page, a good written javascript should be easy to integrate with CuteNews.
Eventhough the above isn't a very good example for this tutorial, i hope it'll give you some idea of how it's done.
1)

What are good javascripts?


other then some parameters for look etc, you shouldn't need to provide additional information to the script.
2) Obviously you want some parts of the news to do something, so this will only be possible if the Javascript requires to put some html (in this case an article) inside a div container.
3) sometimes a javascript requires 1 div container that contains several smaller containers. then put the CN include code inside this Big div container. The div that need to be in this bigger div go inside the template. Note that i'm saying <div> not add a whole javascript.
4) Now you'll be required to give each div container a personal id/name attribute. You'll probably ask yourself,

if i add a id/name won't it be the same for ALL articles?

Wel yes it'll will, unless you look farther then your nose. use something like name="{news-id}" to give each div container a unique id/name for each article. easy huh.
5)

you said no javascript in the templates. Where does it go then?

Simple, you add it to the webpage where you have the CN include code.

Posts: 2

Pages 1

You must login or register to post a reply

CutePHP Forums → Hacks & Tricks / FAQ → [TUTORIAL] News Ticker example



The pun_antispam official extension is installed. Copyright © 2003–2009 PunBB.