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).
Along the top of our widget will be a line of logos from each of the different sites in our blogroll. 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. Step 2 - Designing Design first, code later. Note the use of guides. 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.
Whether you are running a website or blog, tab navigation is probably one of the element that helps drives traffic to internal pages. Here we’ve compiled a mass list of 50+ nice clean and sleek CSS Tab-Based navigation samples you can adapt on your site. Full list after jump. If you are web designer / developer, you might be interested in these few articles we’ve previously done: jQuery Coda-Slider<IMG src=" alt="" srcset="" sizes=""> Nice sleek tabs that slides through each tab. ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Control.Tabs : Unobtrusive CSS tabs for Prototype. Unobtrusive CSS tabs for Prototype.
Introduction & Examples Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases. This is the simplest example of a set of tabs. Note that the styling for the tabs is done with CSS, not the Control.Tabs script. This example demonstrates scripting a Control.Tabs instance. Control.Tabs is fully programmable, so in the example above the links are programmed to change which tab is active, and an event handler is registered to change the select box (and visa versa).
<! JavaScript Note that this example doesn't have an style information. More Usage Examples. Button Maker. Creating a Slick Auto-Playing Featured Content Slider. I love the Coda Slider plugin for jQuery. 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". Sure the design was heavily altered to fit the job, but the actual functionality wasn't altered in any way.
View Demo Download Files Functionality Checklist Like I said, the Coda Slider was 90% there already. Here is what we need in addition: Different types of custom content in the panels. Let's go through the HTML, CSS, and JavaScript. The HTML Here is the framework HTML for just the slider itself: <div class="slider-wrap"><div id="main-photo-slider" class="csw"><div class="panelContainer"><div class="panel" title="Panel 1"><div class="wrapper"><!
The CSS The JavaScript UPDATE: Auto-Play.