Developing feed widget in CSS3
CSS3 in conjunction with JQuery can be used to develop an attractive feed widget which would display the feed on blog or website’s sidebar. This can be used to display the latest posts, news or comments present on the website. The choice between different feed formats can be set according to the requirement. First of all, we need to set the HTML structure of the widget. For this, we would use the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="feedWidget"> <div id="activeTab"> <!-- The name of the current tab is inserted here --> </div> <div class="line"></div> <div id="tabContent"> <!-- The feed items are inserted here --> </div> </div> |
After this comes the part of CSS3, which would be used to style the widget. Only the styles that are directly used by the widget are included here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
#feedWidget{ background:url(img/bg.png) repeat-x #47525c; border:2px solid #48535e; margin:0 auto; width:200px; padding:5px; position:relative; /* Remains hidden if JS is not enabled: */ display:none; z-index:20; } #activeTab.hover,.dropDownList{ background:url(img/drop_arrow.png) no-repeat 95% 50% #47525c; border:1px solid #38434d; margin:-1px; cursor:pointer; /* CSS3 round corners: */ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #activeTab,.dropDownList div{ color:white; cursor:pointer; font-size:20px; margin:0 2px 0 0; padding:5px; text-shadow:0 1px 1px black; } |
In the above code, special hover class has been defined for the #activeTab div. instead of the regular :hover pseudo-class. This has been done because the later is more appropriate only when multiple tabs need to be shown. After CSS3, we make use of JQuery for specifying the declarations of different feeds and handling the output of those feeds.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(document).ready(function(){ /* Counting the tabs: */ var totalTabs=0; $.each(tabs,function(){totalTabs++;}) $('#feedWidget').show().mouseleave(function(){ /* If the cursor left the widet, hide the drop down list: */ $('.dropDownList').remove(); $('#activeTab').removeClass('hover'); }) .mouseenter(function(){ if(totalTabs>1) $('#activeTab').addClass('hover'); }}; $('#activeTab').click(showDropDown); $('.dropDownList div').live('click',function(){ showDropDown(); showTab($(this).text()); }); showTab('@tutorialzine'); }}; |
You can create additional functions and include them in the tabs object. This would further enhance the functionality of your feed widget.
BlueHost | HostGator | Media Temple
