JavaScript & DOM News Ticker

Ok so this is probably going to be my first ever proper JavaScript / DOM Scripted…Script hehe. Firstly I think it’s appropriate because of a few reasons. It’s a popular Web page enhancement when used properly / the good way, I’m currently doing a Website for a Football team and they want one on their Website and I’d like to think it’s something someone like me could do as a first-time scripter (i.e. A JavaScript beginner).

But that’s exactly it! I’m a JavaScript beginner and I don’t know what are good and bad user interface enhancements for a Web page. Hence of course why I’m here to ask the Masters of the Universe JavaScript for your professional help and guidance to set me on the right path from the beginning! :smiley:

Of course I won’t be using the marquee element / tag ever. I’ll show you my HTML markup I intend to use but first we should consider what was said in the thread - marquee tag. This particular thread is important to the replies in this thread because the Website I’m doing this for is a football club…That has a 5 year development plan…Which includes introducing a new team for disabled people. Don’t ask me how that works - The FA have commissioned it and are going round to football clubs to get feedback to see if there would be enough resources and disabled people that would be interested in playing football.

So that means that I need to design and develop a Website that is extra-accessible! All feedback, comments and opinions are seriously appreciated. Like I said, I’m a beginner in what you should use JavaScript for and I don’t have a clue on usability. I know the basic Web Accessibility stuff though and have read through some of WCAG 2.0.

The design of the news ticker is (so far) going to be pretty much identical to the one on the Microsoft Corporation Website. See how I put the word design in italics and bold. Not how it will be implemented. I’ll show you what my initial plan for the HTML markup would be below.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
	</head>

	<body>
		<div id="newsTicker">
			<p><a href="#view-news">View All News</a></p>

			<ul>
				<li><a href="/news/news-article-here/">Football Team Wins Premier Division!</a></li>
				<li><a href="/news/news-article-here/">The FA Launch The "Respect" Campaign</a></li>
				<li><a href="/news/news-article-here/">News Article Title Here</a></li>
			</ul>
		</div>
	</body>
</html>

Then I’d attach an external JavaScript file to the Web page that would create the same effect that it on the Microsoft Website. With the text / link “View All News” replacing the down-facing arrowing on the right hand side which allows the user to view all news. The external JavaScript file would be used to manipulate the list and how it looks and so on.

Tell me please - Is this a good idea or a bad idea? And even if it is a bad idea to do, would this be the right way of doing it if I did want to do it?

If this is a bad idea and I shouldn’t do this, how would you suggest I implement something like this?

Thanks in advance for the help you JavaScript maniacs! :stuck_out_tongue:

Andrew Cooper

I promised I would reply (as you asked this week) so here’s my response (and it’s short!):

It depends how you implement the finished effect as to how usable and accessible it will be. My advice at this stage while you’re building it would be to build it as well as you can, make sure it gracefully degrades, go through WCAG point by point and ensure your work meets at least AA or AAA (if your ambitious) complacency and post that, you’ll probably need to post a physical example or link to a working example for us to determine further how it could be made more usable and / or accessible (as it’s pretty hard to highlight issues with a non-existent piece of code - that and it’s a fairly subjective subject in general). Personally I try to avoid animated content unless the animation enhances the way the content is read or used, but I don’t see there being any specific reason why it could’t be made to work well. :slight_smile:

That’s perfect. The correct markup is still there even without javascript. All the javascript does is add a little bling bling, which is fine.

Heh! Thanks for the really positive feedback crmalibu! I figured that the HTML markup would be just right but it’s the JavaScript bling bling that I’m concerned about with the accessibility and usability issues it may bring up!

I know what some peoples thoughts on a JavaScript powered news ticker are, but would them thoughts still be relevant to the design of this particular news ticker or are they talking about the kind of news tickers that scroll / marquee across the screen and there’s no way of having them all on screen at one point without having anything moving?

I think having a news ticker similar in design to that of the one on the Microsoft Corporation Website would be fine for accessibility and usability. Don’t you? I mean, I ain’t no accessibility / usability expert but still. What could I do as an alternative for the client if it’s an absolute no-no?

Cheers for the help anyone!

Andrew Cooper