Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

December 2, 2008

none

Blog News Ticker

by in Accessibility,css,jQuery,Wordpress on December 2, 2008 @ 12:00 pm

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:

  1. <h3>Our News</h3>
  2. <dl id="newsScroller">
  3.     <dt>Title</dt>
  4.     <dd>Excerpt</dd>
  5.     <dd>Date</dd>
  6.     <dd>Tags and comment count</dd>
  7. </dl>

With PE in mind, we will use JavaScript to add in any additional mark up we will need to achieve the scroller look.

Current Progress

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.

Current Progress

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.

  1. dl#newsScroller dd + dd{
  2.     padding:0 0 0 22px;
  3. }

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.

Current Progress

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().

Final

Final

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
Tags: ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

Comments are closed.


Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

70 queries. 0.290 seconds. Powered by WordPress visitor stats