HOWTO: build a Technorati top tags ticker with PHP, jQuery, JavaScript and AJAX - day 2 of 3

In day one of this three day tutorial I gave an overview of the Technorati API, as well as the PHP, and ended with a screenshot of the ticker. Today, I will focus on the XHTML and CSS required to complete the visual look of the ticker. Tomorrow, I will finish up by walking through the jQuery, JavaScript and AJAX functionality, and I will unveil the completed top tags ticker.

I am going to reiterate the point throughout this tutorial, that if you choose to use the information as supplied by Technorati, then you must attribute the source. This is an important ingredient of the terms of use. An open API is an incredibly useful tool, and tossing a little traffic to Technorati is a small price to pay for the data.

Day 2: An introduction to the XHTML and CSS

You will find that I am a big fan of hack-free CSS, choosing instead to occasionally nest an additional DIV in favor of sullying the code. In this particular case it was not that difficult to avoid hacks, but if you want to take some shortcuts, then feel free to reverse engineer this to your liking. So it is fresh in your mind, here is another screenshot of the Technorati ticker, compared with the ticker I aim to build in this tutorial.

[Screenshot of the Technorati ticker.]

[Screenshot of the top tags imitation ticker.]

Before diving into the XHTML and CSS, I want to talk a little about PNG files. The ticker requires the use of two PNG files with progressive (gradient) transparency. In the screenshot you can see that the tags scroll underneath each PNG, which gives the illusion of a soft fade-in and fade-out effect.

Dealing with PNG transparency cross-browser is a real pain, even after the release of IE7. If you choose to use PNG files for backgrounds, the complications grow more tiresome. That is why the repeatable background on the ticker is a GIF file. You may not already know that the gAMA chunk in a PNG file will produce color discrepancies between a GIF and a PNG, even if they are sliced from the same PSD. I have already taken care to fix the issue.

For now, just understand that the approach here works incredibly well for the ticker, but if a cross-site solution to handle PNG transparency was required, then you might want to research another route.

XHTML:

<div id="ticker">
    <div class="inner">
        <div class="close"><a href="#">[Close]</a></div>
        <div id="ticker-left">
            <img src="images/png.gif" width="100" height="40" class="png" id="ticker_left" alt="" />
        </div>
        <div id="ticker-right">
            <img src="images/png.gif" width="100" height="40" class="png" id="ticker_right" alt="" />
        </div>
    </div>
</div>

It needs to be decided early in the process, how much HTML should end up in the page, and how much should be written to the page with JavaScript. I favor as much presentation as possible to be hard-coded into the page, while using scripts only to generate HTML tied to dynamic data. It really does depend on your situation, and whether or not you want your site to be WCAG or 503 compliant.

Beginning with a container that has as little layout style applied to it as possible is best for widgets like the ticker. The ticker div will act as this container, and the inner div should contain the width of your Web site. In the CSS, I have specified 950 pixels, which assumes this is built for a 1024 pixel width resolution. However, this value can be changed, and it will not affect the functionality of the ticker.

The ticker should sit at the top of the document, outside of any div acting as a page wrapper. It is built to span 100% of the width of the screen with a repeatable background. The ticker-right div, the ticker-left div, and the close div are all positioned absolutely. In order to accomplish this, the inner div should be relatively positioned.

CSS:

body {
    margin: 0 auto;
    text-align: center;
}
#ticker {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    background: #000 url(images/ticker_background.gif) repeat-x;
}
#ticker .inner {
    position: relative;
    width: 950px;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
}
#ticker .close {
    position: absolute;
    top: 0;
    right: 0;
    font: normal .8em "Monaco","Courier New",monospace;
    z-index: 3;
}
#ticker #ticker-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
#ticker #ticker-right {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
#ticker ul {
    position: relative;
    left: 0;
    width: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 1;
}
#ticker ul li {
    float: left;
    margin: 0;
    padding: 0;
    font: normal .8em "Monaco","Courier New",monospace;
}
#ticker a {
    color: #00ff00;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
}
#ticker a:hover {
    color: #333;
    background: #00ff00;
}

The CSS is mostly self-explanatory, but there are a few details that need to be discussed. You should take notice of how the overflow property is used. This actually serves two purposes, the first of which, is to hide the ticker tags when they extend beyond the boundaries of the inner div. The second purpose is to help clear the floated list items that contain the top tags. This trick may not work in all circumstances, but it is a handy substitute for nesting an extra element that contains the clear property. An alternative would be to give our container a height. However, this would prevent the ticker from growing appropriately if the user resizes the text via the browser.

The unordered list that contains the top tags has a position value of relative. This is so that the JavaScript can slide the element, which is the right-to-left ticking animation. The anchor tags provide the proper height for the ticker, and by adjusting the height property value and line-height value, you will be adjusting the height of the ticker.

One final note regarding the CSS, is in reference to the right margin on the list items. This value is appended via JavaScript so that the width of the unordered list can be calculated by adding up the width of each list item. When the calculation is complete, the margin value is modified to space out the top tags.

It might be difficult to comprehend everything up to this point in the tutorial without a working reference. After day three it should all make a bit more sense. I will be providing both a link to an example, and all the files will be available for download via ZIP.

• Posted by Brian
• August 22nd, 2007