HAPIA Mesir

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

/* Configuration: */

var tabs = {
"@Tutorial" : {
"feed" : "http://feeds.feedburner.com/hapiamesir/tips_blogging",
"function" : rss
},

"Latest Posting": {
"feed" : "http://feeds.feedburner.com/HapiaMesir",
"function" : rss
},

"CSS Editing": {
"feed" : "http://feeds.feedburner.com/hapiamesir/css_editing",
"function" : rss
},

"Download Mp3" : {
"feed" : "http://feeds.feedburner.com/hapiamesir/download_mp3",
"function" : rss
},

"Comments" : {
"feed" : "http://feeds.feedburner.com/hapiamesir/comment",
"function" : rss
}
}

var totalTabs;
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

/* Counting the tabs */
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);

/* Using the live method to bind an event, because the .dropDownList does not exist yet: */
$('.dropDownList div').live('click',function(){

/* Calling the showDropDown function, when the drop down is already shown, will hide it: */
showDropDown();
showTab($(this).text());
});


/* Showing one of the tabs on load: */
showTab('@Tutorial');

});


function showTab(key)
{
var obj = tabs[key];
if(!obj) return false;

var stage = $('#tabContent');

/* Forming the query: */
var query = "select * from feed where url='"+obj.feed+"' LIMIT 5";

/* Forming the URL to YQL: */
var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?";

$.getJSON(url,function(data){

stage.empty();

/* item exists in RSS and entry in ATOM feeds: */
$.each(data.query.results.item || data.query.results.entry,function(){
try{
/* Trying to call the user provided function, "this" the rest of the feed data: */
stage.append(obj['function'](this));

}
catch(e){
/* Notifying users if there are any problems with their handler functions: */
var f_name =obj['function'].toString().match(/functions+(w+)(/i);
if(f_name) f_name = f_name[1];

stage.append('<div>There is a problem with your '+f_name+ ' function</div>');
return false;
}
})
});

$('#activeTab').text(key);
}

function showDropDown()
{
if(totalTabs<2) return false;

if($('#feedWidget .dropDownList').length)
{
/* If the drop down is already shown, hide it: */
$('.dropDownList').slideUp('fast',function(){ $(this).remove(); })
return false;
}

var activeTab = $('#activeTab');

var offsetTop = (activeTab.offset().top - $('#feedWidget').offset().top )+activeTab.outerHeight() - 5;

/* Creating the drop down div on the fly: */
var dropDown = $('<div>').addClass('dropDownList').css({

'top' : offsetTop,
'width' : activeTab.width()

}).hide().appendTo('#feedWidget')

$.each(tabs,function(j){
/* Populating the div with the tabs that are not currently shown: */
if(j==activeTab.text()) return true;

$('<div>').text(j).appendTo(dropDown);
})

dropDown.slideDown('fast');
}


function rss(item)
{
return $('<div>').html(
formatString(item.title.content || item.title)+
' <a href="'+(item.origLink || item.link[0].href || item.link)+'" target="_blank">[read]</a>'
);
}


function formatString(str)
{
str = str.replace(/<[^>]+>/ig,'');
str=' '+str;
str = str.replace(/((ftp|https?)://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
return str;
}

<script src='http://SITUS-HOSTING-ANDA.com/NAMA-FILE-ANDA.js' type='text/javascript'/>

#feedWidget{
background:#333;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZu_LqhvAdbnx4g0-igGGUuB3obJiYaPtkkVo7dZCvpgf5hvxVvVncweaIsPacuVC8mHys7p5Wg93nLUj65pA-foGa0Ycg_3DenpWECRT3XSw-3RDLGv6_lsrNN03NQAev4WWkakJT7o/s1600/drop_arrow.png) no-repeat 95% 50% #758695;
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;
}

.line{
height:1px;
overflow:hidden;
background-color:#eee;
border-bottom:1px solid #687581;
margin:10px 0;
}

.dropDownList{
background-image:none;
position:absolute;

border-top:none;
padding:5px;

/* We reset the roundness of the top corners, inherited by a previous rule: */

-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.dropDownList div:hover{
background-color:#505E6B;
}

#tabContent div{
/* The feed entry divs */

background-color:#EEE;
color:#555555;
font-size:11px;
font-weight:bold;
margin-bottom:11px;
padding:5px;
position:relative;

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

-moz-box-shadow:0 1px 1px black;
-webkit-box-shadow:0 1px 1px black;
box-shadow:0 1px 1px black;
}

<div id="feedWidget" style="display: block;"><div id="activeTab" class=""></div><div class="line"></div><div id="tabContent"><div></div></div></div>