Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

CNN-style Interactive News Ticker (HTML5/CSS3)

Posted by bcmoney on June 22, 2012 in CSS, E-Business, HTML, Semantic Web with No Comments


No Gravatar
CNN breaking the news of a plane crash at the ...

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:

 

DEMO
CNN-style News Ticker
-OR-
DOWNLOAD
CNN-style News Ticker

 

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

Tags: , , , , ,

« previous post

FOAF and the Facebook Death Star">

An updated SVG of the FOAF logo... Since the February confirmation of the Facebook IPO, Facebook has continued to stagnat...

next post »

Top 10 Canadians for Canada Day 2012">

Canada Day fireworks Here's something not totally tech-related for Canada Day 2012. I decided to make a ...

You may follow the RSS 2.0 feed. You can leave a response or a trackback.

Leave a Reply

No trackbacks yet.

Posts with similar tags
Posts in similar categories

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Pages

  • Archives

  • Categories

  • Meta

    • Powered by WordPress And Hulozila

    Switch to our mobile site