Updating layout; added animated scrolling.
h3rald h3rald@h3rald.com
Fri, 31 Jul 2009 15:28:26 +0200
4 files changed,
16 insertions(+),
23 deletions(-)
M
ui-dev/css/layout.css
→
ui-dev/css/layout.css
@@ -54,7 +54,6 @@ width: 100%;
background-color: #000; padding: 5px 0; height: 55px; - border-bottom: 1px solid #C0C0C0; border-top: 0 solid #313634; }@@ -119,11 +118,12 @@
#container { clear: both; + padding: 15px; padding-top:60px; background-color: #fff; - border-left: 1px solid #C0C0C0; + border-left: 16px solid #000; margin: auto; - width: 820px; + width: 900px; height: 100%; }@@ -131,7 +131,7 @@ #palette
{ position: fixed; margin-top: 20px; - margin-left: -9px; + margin-left: -31px; width: 14px; background-color: #E2E9EB; border: 1px solid #C0C0C0;@@ -157,6 +157,8 @@ {
width: 800px; text-align: justify; } + + /* FOOTER */@@ -190,7 +192,6 @@ width: 100%;
font-size: 95%; text-align: center; background-color: #000; - border-top: 1px solid #C0C0C0; } .footer-div
M
ui-dev/home.htm
→
ui-dev/home.htm
@@ -45,10 +45,12 @@
<script type="text/javascript"> $(document).ready(function() { $.slider(); + $('#up-arrow').click(function(){ $.scrollTo('#header', 1000)}); + $('#down-arrow').click(function(){ $.scrollTo('#footer', 1000)}); $('#services').accordion({ header: '.accordion-h', event: 'mouseover', - autoheight: true, + autoHeight: true, animated: "bounceslide" }); });@@ -58,7 +60,6 @@ </script>
</head> <body> <div id="wrapper"> - <a name="top"></a> <div id="header"> <!--[if lte IE 6]> <div id="ie-warning">@@ -88,16 +89,8 @@
<!-- CONTAINER START --> <div id="container"> <ul id="palette"> - <li><a href="#top"><img alt="^" src="images/arrow_up.gif" title="scroll up"></a></li> - - <li><a href="http://www.h3rald.com/rss"><img alt="#" src="images/feed.png" title="subscribe"></a></li> - - <li><a target="_blank" href="http://www.addthis.com/bookmark.php" onclick="addthis_url = location.href; addthis_title = document.title; return addthis_click(this);" rel="external"> - <img alt="*" src="images/bookmark.gif" title="bookmark"></a></li> - <li><a href="#" onclick="location.href='mailto:?SUBJECT='+document.title+'&BODY='+escape(document.title)+'\n['+escape(location.href)+']'"><img alt="@" src="images/mail_back.gif" title="mail"></a></li> - - <li><a href="#" onclick="window.print()"><img alt="P" src="images/printer.gif" title="print"></a></li> - <li><a href="#footer"><img alt="v" src="images/arrow_down.gif" title="scroll down"></a></li> + <li><a href="#" id="up-arrow"><img alt="^" src="images/arrow_up.gif"></a></li> + <li><a href="#" id="down-arrow"><img alt="v" src="images/arrow_down.gif"></a></li> </ul> <!-- CONTENT START --> <div id="content">@@ -105,7 +98,6 @@ <h2>Home</h2>
<div id="intro"> <p>Welcome to <span class="caps">H3RALD</span>.com, Fabio Cevasco’s personal web site.</p> </div> - <div id="slider"> <div class="scroll">@@ -148,11 +140,11 @@ </div><!-- .scroll -->
</div><!-- #slider --> <div id="services"> - <h3 class="accordion-h">Thoughts</h3> - <div id="twitter"> - </div> <h3 class="accordion-h">Bookmarks</h3> <div id="delicious"> + </div> + <h3 class="accordion-h">Thoughts</h3> + <div id="twitter"> </div> <h3 class="accordion-h">Comments</h3> <div id="backtype">
M
ui-dev/js/feeds.js
→
ui-dev/js/feeds.js
@@ -21,4 +21,4 @@ var backtype_feed = function(feed){
display_feed(feed, "#backtype") }; $.jGFeed('http://feeds.delicious.com/v2/rss/h3rald', delicious_feed, 10) -$.jGFeed('http://feeds.backtype.com/home/21105', backtype_feed, 10) +$.jGFeed('http://feeds.backtype.com/home/21105', backtype_feed, 7)
M
ui-dev/js/jquery.juitter.system.js
→
ui-dev/js/jquery.juitter.system.js
@@ -11,7 +11,7 @@ live:"live-300", // the number after "live-" indicates the time in seconds to wait before request the Twitter API for updates.
placeHolder:"twitter", // Set a place holder DIV which will receive the list of tweets example <div id="juitterContainer"></div> loadMSG: "Loading messages...", // Loading message, if you want to show an image, fill it with "image/gif" and go to the next variable to set which image you want to use on imgName: "loader.gif", // Loading image, to enable it, go to the loadMSG var above and change it to "image/gif" - total: 10, // number of tweets to be show - max 100 + total: 7, // number of tweets to be show - max 100 readMore: "Read it on Twitter", // read more message to be show after the tweet content nameUser:"h3rald", // insert "image" to show avatar of "text" to show the name of the user that sent the tweet openExternalLinks:"newWindow", // here you can choose how to open link to external websites, "newWindow" or "sameWindow"