Improved footer RSS feeds.
h3rald h3rald@h3rald.com
Sat, 01 Aug 2009 20:39:40 +0200
9 files changed,
58 insertions(+),
33 deletions(-)
M
ui-dev/css/elements.css
→
ui-dev/css/elements.css
@@ -132,19 +132,31 @@ {
margin-left: 0; } +#services h3 +{ + padding-top: 4px; + font-size: 170%; + font-variant: italic; +} + +#services img +{ + float: left; +} + + + .feed-item { list-style-type: none; padding: 0.2em; border: 1px solid #000; margin: 3px 2px; - background: #111; color: #BDB7BA; } .feed-item:hover { - background: #171617; } /**** TABLES ****/
M
ui-dev/css/layout.css
→
ui-dev/css/layout.css
@@ -160,13 +160,13 @@
#wrapper { min-height: 100%; - margin-bottom: -450px; + margin-bottom: -500px; position: relative; } #footer { position: relative; - height: 450px; + height: 500px; font-family: Georgia, Serif; width: 100%; font-size: 95%;@@ -176,7 +176,7 @@ }
.clearfooter { - height: 450px; + height: 500px; clear: both; } .footer-left, .footer-right, .footer-center
M
ui-dev/home.htm
→
ui-dev/home.htm
@@ -28,8 +28,6 @@ $('.twitter-item[title]').qtip(dark_tooltip);
} </script> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> - <script src="js/cufon-yui.js" type="text/javascript"></script> - <script src="js/Cardo_400.font.js" type="text/javascript"></script> <!-- JQuery Plugins --> <script src="js/tooltips.js" type="text/javascript"></script>@@ -38,14 +36,7 @@ <script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-min.js" type="text/javascript"></script> <script src="js/slider.js" type="text/javascript"></script> <script src="js/jquery.timeago.js" type="text/javascript"></script> - <script src="js/jquery.juitter.js" type="text/javascript"></script> - <script src="js/jquery.juitter.system.js" type="text/javascript"></script> <script src="js/jquery.jgfeed-min.js" type="text/javascript"></script> - <script src="js/jquery.chili-1.7.pack.js" type="text/javascript"></script> - <script src="js/jquery.easing.js" type="text/javascript"></script> - <script src="js/jquery.dimensions.js" type="text/javascript"></script> - <script src="js/jquery.accordion.js" type="text/javascript"></script> - <script src="js/accordion.js" type="text/javascript"></script> <script src="js/init.js" type="text/javascript"></script> </head>@@ -64,11 +55,11 @@ <h1><img alt="H3RALD" src="images/logo.png"></h1>
</div> <div id="header-right"> <ul id="navigation"> - <li>/ <a href="#latest" class="cross-link">latest</a></li> - <li>/ <a href="#popular" class="cross-link">popular</a></li> - <li>/ <a href="#tags" class="cross-link">tags</a></li> - <li>/ <a href="#projects" class="cross-link">projects</a></li> - <li>/ <a href="#about" class="cross-link">about</a></li> + <li>/<a href="#latest" class="cross-link">latest</a></li> + <li>/<a href="#popular" class="cross-link">popular</a></li> + <li>/<a href="#tags" class="cross-link">tags</a></li> + <li>/<a href="#projects" class="cross-link">projects</a></li> + <li>/<a href="#about" class="cross-link">about</a></li> </ul> </div>@@ -140,18 +131,18 @@ <div id="footer">
<div id="footer-container"> <div id="services"> <div class ="footer-left"> - <h3>Tweets</h3> <div id="twitter"> + <img src="images/icons/twitter.png" /><h3> thoughts</h3> </div> </div> <div class ="footer-center"> - <h3>Bookmarks</h3> <div id="delicious"> + <img src="images/icons/delicious.png" /><h3> recommendations</h3> </div> </div> <div class ="footer-right"> - <h3>Comments</h3> <div id="backtype"> + <img src="images/icons/feed.png" /><h3> opinions</h3> </div> </div> </div>
M
ui-dev/js/feeds.js
→
ui-dev/js/feeds.js
@@ -1,7 +1,32 @@
-function feed_entry(entry){ - var published_at = $.timeago(entry.publishedDate) - var link = $("<a>"+entry.title+"</a>").attr('href', entry.link); - return $("<li class='feed-item'></li>").attr("title", published_at).html(link); +function feed_entry(entry, element){ + var published_at = $.timeago(entry.publishedDate); + + switch(element) + { + case "#twitter": + var content = entry.title + .replace(/^h3rald:/, '') + .replace(/((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?)/, '<a href="$1">#$1</a>') + .replace(/@([a-zA-Z1-9_]*)/, '<a href="http://www.twitter.com/$1">@$1</a>') + .replace(/#([a-zA-Z1-9_]*)/, '<a href="http://www.twitter.com/search?q=%23$1">#@$1</a>') + break; + case "#delicious": + var content = "<a href='"+entry.link+"'>"+entry.title+"</a>"; + content += " ("; + var categories = Array(); + for (i=0; i<entry.categories.length; i++) + { + categories[i] = "<a href='http://delicious.com/popular/"+entry.categories[i]+"'>@"+entry.categories[i]+"</a> "; + } + content += categories.join(', ').replace(/ $/, ''); + content += ")" + break; + case "#backtype": + var content = "<a href='"+entry.link+"'>"+entry.title+"</a>"; + break; + + } + return $("<li class='feed-item'></li>").attr("title", published_at).html(content); }; function display_feed(feed, element){ if(!feed){@@ -10,7 +35,7 @@ }
var feed_list = $("<ul></ul>") for(var i=0; i<feed.entries.length; i++){ var entry = feed.entries[i]; - feed_entry(entry).appendTo(feed_list); + feed_entry(entry, element).appendTo(feed_list).fadeIn(1000); } feed_list.appendTo(element) };@@ -23,6 +48,6 @@ };
var twitter_feed = function(feed){ display_feed(feed, "#twitter") }; -$.jGFeed('http://feeds.delicious.com/v2/rss/h3rald', delicious_feed, 10) +$.jGFeed('http://feeds.delicious.com/v2/rss/h3rald', delicious_feed, 8) $.jGFeed('http://feeds.backtype.com/home/21105', backtype_feed, 10) $.jGFeed('http://twitter.com/statuses/user_timeline/h3rald.rss', twitter_feed, 7)
M
ui-dev/js/init.js
→
ui-dev/js/init.js
@@ -1,9 +1,6 @@
$(document).ready(function() { $.slider(); - $.accordion(); $('#up-arrow').click(function(){ $.scrollTo('#header', 1000)}); $('#down-arrow').click(function(){ $.scrollTo('#footer', 1000)}); }); -Cufon.replace('#navigation'); -Cufon.replace('h3')('h2')('h4')('h5');
M
ui-dev/js/tooltips.js
→
ui-dev/js/tooltips.js
@@ -1,10 +1,10 @@
var dark_tooltip = { - style: { background:'#000000', + style: { background:'#222222', color: '#cccccc', border: { width: 1, radius: 6, - color: '#000000' + color: '#222222' }, tip: true }, position: {