Finley, I am.

Finley, iPhone.

Finley, iPhone.

Today, I launch the iPhone optimized Finley, I am. There is still a few things to do for it, including a comment system, but it is pretty much done. The current set-up allows you to easily view the last 5 articles in an easy to use interface, but will soon (dunno how soon though...) support the viewing of all articles, searching of articles, and a few more features. Of course, being a programming blog, I wanna give y'all the lowdown on what builds and makes this li'l interface work.

First, here is the script that switches the view to the iPhone optimized site:

if (window.navigator.userAgent.indexOf('iPhone') !== -1) {
    $(document).ready(function () {
        //add iPhone tags
        $('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>');
        $('head').append('<meta name="apple-mobile-web-app-capable" content="yes" />');
        $('head').append('<link rel="apple-touch-icon-precomposed" href="/resources/images/iphone_icon.png" type="image/png" />');

        //add iPhone css
        $('head').append('<link rel="stylesheet" href="/resources/css/iphone.css" />');

        var articles = [];
        var count    = $('.last5 li:not(.all) a').size();
        var loaded   = 0;

        //function so slide list over and article out
        var goBack = function (div) {
            var div = div;
            $('ul').eq(0).removeClass('toLeft');
            div.removeClass('toView');
            $('header span.back').removeClass('show');
        };

        //function to slide article over and list out
        var showArticle = function (articleIndex) {
            var div = articles[articleIndex].div;
            $('header span.back').addClass('show').get(0).onclick = function () {
                goBack(div);
                return false;
            };
            $('ul').eq(0).addClass('toLeft');
            articles[articleIndex].div.show().addClass('toView');
            $('#iphone').height(articles[articleIndex].div.height() + 60);
        };

        //function to build list and articles
        var buildInterface = function () {
            $('body').addClass('iPhone');
            var iPhone = $('<div id="iphone"></div>');
            iPhone.append('<header><span class="title">Finley, I am.</span><span class="back">back</span></header>');
            var articleList = $('<ul></ul>');
            articleList.appendTo(iPhone);
            $.each(articles, function (i, article) {
                var i  = i;
                var li = $('<li><a href="#">'+article.subject+'</a></li>');
                li.find('a').click(function () {
                    showArticle(i);
                    return false;
                });
                articleList.append(li);
                article.div = $('<article>'+article.article+'</article>');
                article.div.hide().appendTo(iPhone);
            });
            iPhone.appendTo('body');
        };

        //get article list, and load articles
        $('.last5 li:not(.all) a').each(function (i) {
            if (!$(this).parent('li').hasClass('all')) {
                var href = $(this).attr('href');
                var i    = i;
                $.get(href, function (data) {
                    var obj = {};
                    obj.subject = $('section#blog article', data).eq(0).find('h2').eq(0).text();
                    obj.article = $('section#blog article', data).eq(0).html();
                    articles[i] = obj;
                    loaded++;
                    if (loaded === count) {
                        buildInterface();
                    }
                }, 'xml');
            }
        });

        //remove container
        $('#container').remove();
    });
}

Less than 100 lines, I grab the list of articles from the sidebar, add the necessary stylesheets & meta tags, and build the interface you see. The animated transitions (the slide) are CSS transitions.

-webkit-transition: left .3s ease-in;

It's really as easy as that! Now, if you click a link to an article on Finley, I am., say on Twitter or Facebook, it will bring up the normal, "unoptimized" interface. This will soon be "fixed," when all articles can be viewed on the iPhone-optimized Finley, I am. Hope y'all like it!