Jump to content


Photo

Looking For News Ticker


  • Please log in to reply
3 replies to this topic

#1 Dave McCullough

Dave McCullough

    RAGE User

  • RAGE Members
  • PipPip
  • 5 posts

Posted 22 April 2005 - 02:46 PM

I want to emulate the "Breaking News" ticker at theglobeandmail.com. I don't need quite the same complexity: theirs is dynamically generated, with the text and the link changing to reflect the top six breaking news stories at any given point in time.

Mine will be static: the same six pieces of text, each with its own link, scrolling across the top of the web page (http://realdogz.ca)

I opened their ticker using WebDesign's nifty "Open from URL..." feature. It can be found at http://theglobeandma...ickerFrame.html

I also opened up their javascript file, which is at http://theglobeandma...s/NewsTicker.js

Unfortunately, I'm not a javascript expert. I'm not even a javascript novice. My specialty is server-side (php and mysql). I can't figure out how their ticker works. All I know is that it doesn't work when I try to cut and paste it to my site.

All the scripts I found on the web were out of date.

Can anyone point me in the right direction?

#2 paul

paul

    RAGE User

  • RAGE Members
  • PipPip
  • 8 posts

Posted 23 April 2005 - 03:22 PM

Hi Dave,

Why don't you just use PHP. Use an array to store your links ( or a DB) and use rand(0, numberoflinks) to choose a random headline and link from your array and print it at the top of your page.

I am guessing you want that kind of effect? You may want to look at some other techniques to bring attention to the news which may be easier to use such as the CSS blink feature (though it is not widely supported at all :(.)

{text-decoration: blink;}

They use pretty complicated code that a beginner might not be able to understand. Their using timers and and some other advanced features. Make sure you correctly link to the script file. Also I am guessing that it is not working for you because your ID attributes do not match what the script is asking for. In WebDesign you can go to the Help menu and select JavaScript tutorial. It takes you to a good site that you can read over in a few minutes. With your programming background you should be able to catch on quickly. Its not too complicated, after you read the tutorial I am sure you will be able to work your way through it.

Just keep in mind your id attributes and what you name them. You should find on the globeandmail site that there is some id tags ending with numbers counting up. The ntStart function passes those to the ntGetEl function. Pay attention the ntRun, ntSetup, ntDraw, and ntClose functions. Those are the functions that are doing the effect that you want.

#3 Dave McCullough

Dave McCullough

    RAGE User

  • RAGE Members
  • PipPip
  • 5 posts

Posted 26 April 2005 - 06:01 PM

Thanks for your suggestions. I didn't want to use php and blink was not really the effect I was after, so I muddled away with Javascript.

I decided to make four animated gifs, each lasting 10 seconds. I used Javascript to cache them and rotate through them using setInterval. I was pretty close to a final implementation when I found a script at javascriptkit.com (http://javascriptkit...ibleslide.shtml). I think it ought to be simpler, and I intend to substitute my own logic when I have a bit more time.

One challenge I didn't anticipate was tweaking the interval so that it precisely matches the length of the animation. If the synchronization isn't exact, the ticker can become jumpy. I still haven't got it dead on. You can see it at http://realdogz.ca

I'm also thinking about embedding it as a Flash object.

Thanks again.

#4 RageSW

RageSW

    Administrator

  • RAGE Admin
  • PipPipPipPipPip
  • 2,082 posts

Posted 26 April 2005 - 08:53 PM

Hi Dave,

I haven't looked at your code yet but the way your describe it, you won't really be able to customize the message without a lot of work. In the long run you should look at doing it with text. Of the top of my head;

1) Create an array with all your strings
2) Pick one at random
3) Use a timer like you have and go letter by letter modifying the actual html

Ex
HTML would be;
<span id="headline"></span>

Outline of JavaScript

var headline = Document.GetElementbyId("headline")
var pos = 0

//at each timer interval
//ASSUMING line is a string object representing a headline taken from an array at random
do {
headline.innerHTML = headline.innerHTML + line.substring(pos,1)
pos = pos + 1
}
while pos < line.length

wrap an anchor tag around it and just grap a link from a second array (or if you want to get more advanced a multi dimensional array and use the GetElementbyId function again along with the element.setAttribute event to modify the href attribute of the link.

Hope this helps. Just look up the functions I mentioned if you are unclear on them. Good reasources can be found from under the Help menu.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users