Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery. A traditional blogroll is a simple list of other sites, often in the sidebar, that are related, owned by, or otherwise friendly to the home site.
Blogrolls are a great idea and on-point with the spirit of blogging, but how is a casual reader to know if any of these sites are truly of interest? Let's improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation. Step 1 - The Idea and the Technologies For our example, we will be using the TUTS family of sites. The idea here is to build a "widget" (for lack of a better term). Of course we will be using XHTML/CSS to build and style the widget.We will use jQuery and the Coda Slider plugin for the fun animation.The recent headlines will be dynamically pulled using PHP and SimplePie.
Because of the use of PHP, you won't be able to download the source code, open it up on your local machine, and view the demo. Step 2 - Designing Design first, code later. Dynamic Drive CSS Library- Animated horizontal tabs. Animated horizontal tabs Author: Dynamic Drive These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one.
This is accomplished using a combination of relative positioning and padding on each tab. The selected tab is first stretched vertically by giving it a thick bottom padding, then plucked out thanks to the CSS "top" property value that's smaller than the normal tabs'. The result are tabs that animate without any scripting. BTW, the amount the selected tab jump up can be easily adjusted- refer to the comments inside the CSS. Demo: The two images used: The CSS: Code Info Rate this code: Date Posted: 04/12/2008 Revision History: None Usage Terms: Click here Your Comments (47) Got a question or need help customizing this CSS code? 50+ Nice Clean CSS Tab-Based Navigation Scripts. Tab navigation has been one of the most fundamental element in any modern web structure.
In order to make sure visitors can properly navigate through the website. One of the biggest challenge web designers and developers faced is to integrate a simple and nice tab navigation that not only don’t confuse, but helps visitors easily understand where they should be clicking. Control.Tabs : Unobtrusive CSS tabs for Prototype. Unobtrusive CSS tabs for Prototype.
I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose. Both of these examples use the Coda Slider pretty much "out of the box". View Demo Download Files Functionality Checklist Like I said, the Coda Slider was 90% there already.