CNN-style Interactive News Ticker (HTML5/CSS3)
CNN breaking the news of a plane crash at the World Trade Center (Photo credit: Wikipedia)
With the real, true and unbiased news inevitably moving online towards the so-called “Alternative Media” (which really is almost reaching the point where it is not alternative so much as the first go-to source), its a good idea to start replicating some of the most useful elements from Television, Print and Radio (aka. the rest of the dinosaur media).
The CNN News Ticker Tape is a somewhat controversial item, as it is considered annoying by many. However, in terms of being able to quickly get information across the screen without interrupting another presentation, it is arguably somewhat effective. Proponents of its use claim it is the best way to get instant updates while maintaining a coherent programming schedule, while critics point to its potential for misuse and indoctrination of the weak-minded with subliminal messages flashing across the screen or fear-mongering sensationalism so common in the “Mainstream Media” today.
Taking the bad and the good into consideration, I’ve thrown together a mock-up that could function somewhat similarly to the Semantically Enhanced Video Pop-ups I’ve implemented using Popcorn.js and to replicate the VH1 Pop-up Video effect. You could imagine having the usefulness of having contextual content being inferred based on the content being viewed, or, simply populating a basic news ticker with the entries from an existing RSS or Atom news feed to link to the day’s top stories.
This becomes much more interactive and responsive than Traditional TV News Tickers as they can be paused on hover actions, offer more information by making stories clickable to popup a new window or displaying an article in-page, and have fonts/typography/colors/scroll speed and many other settings which are configurable and customizable for specific users, let alone specific TV channels.
<body onload="setClock(); setInterval('setClock()', 1000)">
<h1>Interactive Ticker/Scroller</h1>
<div id="tv">
<div id="screen">
<a href="#" onclick="playVideo();"><img src="http://frankpaulgambino59.files.wordpress.com/2011/03/cnn-best-political-team-in-television.jpg" alt="CNN Newsroom scene" /></a> </div>
<div id="ticker">
<div class="newsflash">
<div class="slant1" style="width:7em;"></div>
<div class="slant2" style="width:7em;"></div>
<p>
Arab spring, under the protests many suffered and unfortunate fate at the hands of brutal...
</p>
</div>
<div id="logo">
<a href="http://www.cnn.com" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Cnn.svg/201px-Cnn.svg.png" width="75px" alt="CNN" />
</div>
<div id="scroller">
<marquee id="scrolling" onmouseover='this.scrollamount=0; this.stop();' onmouseout='this.scrollamount=5; this.start();'>
<ul>
<li><a href="#1">News in the key of nonsense</a></li>
<li><a href="#2">Man with 3 arms has baby with no head</a></li>
<li><a href="#3">Silver-screen has never looked greyer</a></li>
<li><a href="#4">Wall Street kingpin's empire burns amid corruption charges</a></li>
<li><a href="#5">We're doing our best to ignore Ron Paul, but now you see right through it!</a></li>
</ul>
</marquee>
</div>
<div id="time">
<span id="clock"> </span>
</div>
</div>
</div>
</body>
The CSS to style the presentation looks as follows:
div#ticker {
font-family:'Arial Narrow', Arial, 'Courier New', Courier, serif;
font-weight:bold;
width:580px;
border-top:2px solid red;
margin:-65px auto;
background:black;
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
opacity:0.9;
filter:Alpha(opacity=90); /* IE8 and earlier */
}
/* Logo */
div#logo {
float:left;
position:absolute;
padding:10px;
width:75px;
z-index:1000001;
background:black;
color:red;
text-shadow:#506 2px 2px 2px;
}
div#logo img { opacity:1; filter:Alpha(opacity=100); }
div#scroller {
float:left;
overflow:hidden;
}
/* Ticker */
div#scroller marquee {
position:absolute;
z-index:1000000;
width:578px;
margin:30px 2px 2px 2px;
padding:20px -1px 20px 75px;
font-size:1.4em;
font-weight:bold;
font-family:Arial, 'Courier New', Courier, serif;
text-transform:uppercase;
color:red';
background:black;
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
opacity:0.9;
filter:Alpha(opacity=90); /* IE8 and earlier */
}
div#scroller marquee ul { list-style-type:circle; }
div#scroller marquee li { float:left; padding:0 32px 0 8px; }
div#scroller marquee a { color:goldenrod; text-shadow:#ccf 1px 1px 1px; }
/* Clock */
div#time {
float:right;
width:578px;
text-align:right;
color:#fff;
position:absolute;
padding:2px 10px 8px 2px;
background:black;
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
opacity:0.9;
filter:Alpha(opacity=90); /* IE8 and earlier */
}
/* Newsflash hover */
div.newsflash {
display:none;
position:absolute;
top:400px;
background:white;
color:black;
margin:1em auto;
padding:0;
width:580px;
text-align:center;
border-bottom:1px solid #eee;
background:black;
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
opacity:0.9;
filter:Alpha(opacity=90); /* IE8 and earlier */
}
div.slant1 {
background:transparent;
height:0;
border-style:solid none none solid;
border-color:black black black white;
border-width:2em 1em;
margin:0 0 0 0.5em;
padding:0;
float:right;
clear:right;
opacity:0.7;
filter:Alpha(opacity=70); /* IE8 and earlier */
}
div.slant2 {
background:transparent;
height:0;
border-style:solid solid none none;
border-color:black white black white;
border-width:2em 1em;
margin:0 0.5em 0 0;
padding:0;
float:left;
clear:left;
opacity:0.7;
filter:Alpha(opacity=70); /* IE8 and earlier */
}
The JavaScript to handle any interactive behaviours or events is:
function setClock() {
var today = new Date();
var currentHours = today.getHours();
var currentMinutes = today.getMinutes();
var currentSeconds = today.getSeconds();
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM"; // Use "AM" or "PM" depending on time of day
// Convert the hours component to 12-hour format
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
currentHours = ( currentHours == 0 ) ? 12 : currentHours; // Convert millitary hours to "0" to "12"
// Compose the string for display
var currentTime = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
console.log(currentTime + ' ' + document.getElementById("clock").innerHTML);
document.getElementById("clock").innerHTML = currentTime;
}
function playVideo() {
document.getElementById('screen').innerHTML = ''; return false;
}
As usual, you can try out a demonstration or download the source of this prototype below:
In Conclusion, hopefully a more interactive, user-controllable and customizable news ticker for the web and online video becomes more useful (and less sinister) than the one we’ve had thrust upon us on TV.
Related Articles
- IDEA: A Smarter Sports News Ticker (levynewsnetwork.wordpress.com)
- You Can’t Escape the Facebook News Ticker Anymore (labnol.org)
- Hate the Facebook News Ticker? Some Can Now Hide It (readwriteweb.com)
- A News Ticker For Your Desktop (ghacks.net)
- Retickr Updates with a Better Interface, Time Sliders, and More [Mac Downloads] (lifehacker.com)
- Retickr turns your RSS feed into a desktop news ticker (venturebeat.com)
