Blog News Ticker
Recently I had been asked to help put together a post scroller widget for a WordPress install but sadly after it was nearly completed it was agreed that it would not "fit" the site it was meant for. And it is true, some sites, depending on who the site is meant for - the targeted audience - or what the main topic of the site really don't need bells and whistles to get content in front of their users. Since I did not want all that work go to waste I figured I'd write up a post on the code and thought processes.
Ideals
I firmly believe that a site should still be functional, 508 compliant and still look good when styles and JavaScript are turned off. With this in mind we will be doing some "progressive enhancements" and since there is going to very little that won't work in all browsers I won't go into my rant about PE.
Structure
We will be using Definition lists; why definition lists? Because they are semantically correct for this situation. Have a look at two really good articles from Css-tricks.com and Maxdesign.com which go into detail on why you should use definition lists.
Below is the structure we will be dealing with, notice that we only have the DL/DT/DD structure and now wrapping DIV or any other extra mark up:
With PE in mind, we will use JavaScript to add in any additional mark up we will need to achieve the scroller look.
The content from our current progress is from a dump I did of my own site using WordPress' loop.
Styling
In our next layer of PE will are going to add in some style simple based off of the current structure minus the JavaScript.
In this phase we really did not do anything special, I just styled it as I would have normally. You can add more pop to it if you feel. Do note however, that at line 28 I am using a selector that IE6 does not support and since the extra padding for that element is a nice to have and really does not hold the user of IE6 back I felt it was ok to add that in there.
-
dl#newsScroller dd + dd{
-
padding:0 0 0 22px;
-
}
JavaScript
Now we start with the real fun, using JavaScript - in this instance, jQuery as our framework of choice, but you can just as easily use MooTools or DoJo - to add in some WOW factor. Here the plan is to wrap the DL in a DIV, add some classes to some elements, set up some events, and animations.
What we have in the example just below is some additional styles and elements.
Finally we have to set up the events and animation; what events do we need to set up and why? We need to bind the mouseenter and mouseleave event because if we want to be able to read what is being shown we need to be able to put our mouse over the content and have it stop any animations that are running so we can read it.
First thing we will need to do is to find out the total height of the grouped content is. The grouped content in this case is the DT/DD/DD/DD combination. We will be using the outerHeight() method to get the total height (padding/margin/height). To get that grouped content we will be using a combination of .children() and .slice().
Closing
So with the final product we have a decent footprint to stylize to your likings. Feel free to stylize it, add new functionality, new animation - some easin/easeout effects would look nice. Think outside of the box, just make sure it degrades nicely.
back to beginning of this post back to skip to links
