When Pigs Fly With jQuery

Here is yet another tutorial. This tutorial demonstrates numerous JQuery methods:

Show how to embed a font.
How to use offset() on divs to get the divs position to pass to another item.
How to use JSON with jQuery.
How to pull Twitter Searches
How to consume Yahoo Pipes JSON.
How to parse content and only display a series of Images tags in JSON content.
How to animate using jQuery.
How to export Yahoo Pipes KML and Render.

Click here to download all associated Code

 
        var flickrDescription = new Array();
        var arrayTwit = new Array();
        var twitSearch = new Object();
        var map;
        var geoXml;
        function myFeedObject(packPipe, location, type) {
            this.descList = new Array();
            this.itemList = "";
            this.type = type;
            fireUpYahooPipe(this, packPipe, location);
        }
 
        function output_feed_items(obj, json, location) {
            var heading = '<h3>' + json.value.title + '</h3>';
            for (i = 0; i < json.count; i++) {
                if (obj.type == "generic") {
                    obj.itemList += make_feed_item(obj, json.value.items[i], i, location);
                } else {
                    var ypipeImage = json.value.items[i].description;
                    ypipeImage = $(ypipeImage).find('img');
                    try {
                        var ypipeOBJ = new Object();
                        var myReg = /cdn.c.ooyala.com/;
                        var myQuestion = ypipeImage[0].src;
                        var myResult = myQuestion.match(myReg);
                        if (myResult == null) {
                            ypipeOBJ.image = ypipeImage[0].src;
                            ypipeOBJ.linked = json.value.items[i].link;
                            obj.itemList += make_feed_item_images(obj, ypipeOBJ, i, location);
                        } else {
                            ypipeOBJ.image = null;
                        }
                    }
                    catch (err) {
                        //console.log(err + "Lame");
                    }
                }
                obj.descList.push(make_feed_desc(obj, json.value.items[i], i, location));
            }
            return obj.itemList;
        }
        function make_feed_item_images(obj, item, item_id, location) {
            var Quo = "\'";
            return '<div id="heading-' + item_id + "_" + location + '" style="float:left">' +
      '<a href="' + item.linked + '" target="_blank" onMouseover="toggle_feed_desc(' + location + ' ,' + item_id + ', ' + Quo + location + Quo + ' );" onMouseout="goHide(' + Quo + location + Quo + ' ,' + item_id + ', ' + Quo + location + Quo + ' )"><img src=\"' +
      item.image + '\"/></a></div>';
        }
        function make_feed_item(obj, item, item_id, location) {
            var Quo = "\'";
            return '<li id="li" class="ui-state-default"><h4 id="heading-' + item_id + "_" + location + '">' +
      '<a href="' + item.link + '" target="_blank" style="color:#0E1836;" onMouseover="toggle_feed_desc(' + location + ' ,' + item_id + ', ' + Quo + location + Quo + ' );" onMouseout="goHide(' + Quo + location + Quo + ' ,' + item_id + ', ' + Quo + location + Quo + ' )">' +
      item.title + '</a></h4></li>';
        }
        function goHide(obj, item_id, location) {
            var myDescription = "#desc-";
            $(myDescription + item_id + "_" + location).css('display', 'none');
        }
        function make_feed_desc(obj, item, item_id, location) {
            var desc_info = '<span="item-submitted">Published: ' + item.pubDate + '</span>';
            var desc_info = '<div class="item-info">' + desc_info + '</div>';
            if (obj.type == "images") {
                return '<div class="hoverY" id="desc-' + item_id + "_" + location + '">' +
    desc_info + item.description + '</div>';
            } else {
                return '<div class="hover" id="desc-' + item_id + "_" + location + '"><div class="arrowUp"><div class="arrowUp2"></div></div>' +
    desc_info + item.description + '</div>';
            }
        }
 
        function toggle_feed_desc(obj, item_id, location) {
            var heading = '#heading-' + item_id + "_" + location;
            var desc = '#desc-' + item_id + "_" + location;
            if (obj.type == "images") {
                //Pay attention the code below automagically gets the dom x and y to set the item_div x,y :)
                var x = $(heading).offset().left;
                var y = 80;
                var wi = x / 2;
                x = x - wi;
                var item_div = obj.descList[item_id] + "_" + location;
                $('#contentForVideo').append(obj.descList[item_id]);
            } else {
                $(heading).after(obj.descList[item_id]);
            }
        }
        function twitterSearch(searchTag) {
            $(document).ready(function() {
                $.getJSON("http://search.twitter.com/search.json?q=" + searchTag + "&callback=?",
        function(data) {
            $.each(data.results, function(i, item) {
                twitSeach = item;
                arrayTwit.push(twitSeach);
            });
            whenPigsFly();
        });
            });
        }
        function fireUpYahooPipe(obj, packPipe, location, type) {
            $(document).ready(function() {
                var content = "";
                $.getJSON(packPipe,
   function(json) {
       if (json.count > 0) {
           content = output_feed_items(obj, json, location);
           $(function() {
               $("#" + location).sortable();
               $("#" + location).disableSelection();
           });
       } else {
           content = "The request did not return results.";
       }
       $("#ldr" + location).remove();
       $("#" + location).html(content);
   }
  );
            });
        }
 
        function myFlickerImages(tag) {
            $(document).ready(function() {
                $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=" + tag + "&tagmode=any&format=json&jsoncallback=?",
        function(data) {
            for (i = 0; i < 10; i++) {
                $("<img id ='img" + i + "' />").attr("src", data.items[i].media.m).appendTo("#public_images").wrap("<a id='aimg" + i + "' href='" + data.items[i].link + "' target='_blank' onMouseover='toggle_flickr_desc(" + i + ")' onMouseout='goHideFlickr(" + i + ")'></a>");
                var myFlickerDes = make_flickr_desc(data.items[i], i);
                flickrDescription.push(myFlickerDes);
            }
        });
            });
        }
 
        function make_scrollController() {
            $('newsContainer').after('<div id="ScrollerContoller" ><span id="Go" style="color:#fff; cursor:pointer; font-weight:bold;float:left;" onclick="goMove(\'+=210px\');"/&uarr;</span><span style="color:#fff; cursor:pointer; font-weight:bold; float:left;" onclick="goMove(\'-=210px\');"/>&darr;</span></div>');
        }
 
        function make_flickr_desc(data, i) {
            var desc_info = '<span="item-submitted">Title: ' + data.title + '</span>';
            var desc_info = '<div class="item-info">' + desc_info + '</div>';
            return '<div class="hoverF imgNone" id="desc-' + i + '"><div class="arrowUp"><div class="arrowUp2"> </div></div>' +
    desc_info + data.description + '</div>';
        }
 
        function toggle_flickr_desc(i) {
            var heading = '#img' + i;
            //Pay attention the code below automagically gets the dom x and y to set the item_div x,y :)
            var x = $(heading).offset().left;
            var y = $(heading).offset().top;
            y = y + 160;
            var item_div = 'div#desc-' + i;
            $(heading).after(flickrDescription[i]);
            $(item_div).css('left', x);
            $(item_div).css('top', y);
        }
 
        function goHideFlickr(i) {
            var myDescription = "#desc-";
            $(myDescription + i).css('display', 'none');
        }
 
 
        function goMove(goDirection) {
            $('#videoYoutube').css('width', '880px');
            $('#videoYoutube').css('position', 'absolute');
            $("#videoYoutube").animate({ "top": goDirection }, "slow");
        }
 
        function whenPigsFly() {
            var randomPiggyNote = Math.floor(Math.random() * arrayTwit.length);
            var randomY = Math.floor(Math.random() * 60);
            var piggy = '<div id="divPigsFlying" onMouseOver="stopFlyingPig();" onMouseOut="continueFlyingPig();" ><div><a id="twitLink" href="" target="_blank" style="color:#fff"><div id="divPiggContent" style="height:40px; display:inline-block; font-weight:1.4em; color:#0E1836; border:none;"  ></div><img class="pigsFly" src="images/when_pigs_fly.png" style="border:none;" /></a></div></div>';
            $('#divWhenPigsFly').html(piggy);
            var goLink = "http://twitter.com/" + arrayTwit[randomPiggyNote].from_user;
            $('#twitLink').attr('href', goLink);
            var HowFatisThePig = $('#divPigsFlying').width();
            var myPiggyStartLocation = 0 - HowFatisThePig;
            $('#divPigsFlying').css('left', myPiggyStartLocation);
            $('#divPigsFlying').css('top', randomY);
            $('#divPiggContent').append(arrayTwit[randomPiggyNote].text);
            $('#divPigsFlying').fadeIn(1000, function() {
                var left = $('#divPigsFlying').offset().left;
                var goDistance = window.innerWidth;
                left = left + 900;
                $('#divPigsFlying').css('position', 'absolute');
                $('#divPigsFlying').animate({ left: goDistance }, 20000, function() {
                    $('#divPigsFlying').fadeOut(1000, function() { whenPigsFly(); });
                });
            });
        }
 
        function stopFlyingPig() {
            $('#divPigsFlying').stop();
        }
 
        function continueFlyingPig() {
            var goDistance = window.innerWidth;
            $('#divPigsFlying').animate({ left: goDistance }, 20000, function() {
                $('#divPigsFlying').fadeOut(1000, function() { whenPigsFly(); });
            });
        }
 
        function goSearch() {
            var Quo = '\"';
            $('#public_images').html('');
            var content = $('#Search').val();
            videoYoutube = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?Search=' + content + '&_id=aE4GjZv63BGt4u90l7okhQ&_render=json&_callback=?', 'videoYoutube', 'images');
            myFlickerImages(content);
            twitterSearch(content);
            $('#geoCodeNewsMain').html('');
            loadGmap(content);
        }
 
        function loadGmap(content) {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("geoCodeNewsMain"));
                geoXml = new GGeoXml("http://pipes.yahoo.com/pipes/pipe.run?_id=5157b1e8036007e4334fd092860f7372&_render=kml&textinput1=" + content);
                map.setCenter(new GLatLng(0, 0), 1);
                map.addOverlay(geoXml);
            }
        }
 
        // Note it is important to name the location the same as the ul id and object name the same because I use location to send the toggle object look at the code. http://pipes.yahoo.com/pipes/pipe.run?Search=generative+art&_id=aE4GjZv63BGt4u90l7okhQ&_render=json
 
        AdobeNews = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?_id=af4c93eb0e4fd18859cc9ab840c5f745&_render=json&_callback=?', 'AdobeNews', 'generic');
        riaNews = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?_id=f207a19ea9a846e4ca242c5239a0d0df&_render=json&_callback=?', 'riaNews', 'generic');
        MSDNNews = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?_id=8250c5383b9990d7c8b0ef8129d820db&_render=json&_callback=?', 'MSDNNews', 'generic');
        videoYoutube = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?Search=art&_id=aE4GjZv63BGt4u90l7okhQ&_render=json&_callback=?', 'videoYoutube', 'images');
		worldNews = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?_id=e946b09b5c463a833d53699438633056&_render=json&_callback=?', 'worldNews', 'generic');
		blogSphere = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?_id=8f6ff698cbc6531b78bd76aa12850541&_render=json&delmax=10&diggmin=200&redmax=10&slashmin=100&trunc=50&_callback=?', 'blogSphere', 'generic');
		OpenCourse = new myFeedObject('http://pipes.yahoo.com/pipes/pipe.run?_id=fc65cd7d5080b4e32744fd730d49bfff&_render=json&_callback=?', 'OpenCourse', 'generic');
 
 
        myFlickerImages("art");
        $(document).ready(function() {
            twitterSearch("when pigs fly");
            loadGmap("war");
        });

JavaScript is becoming more and more important on front end interfaces these days and it is essential for front end developers to utilize jQuery. JavaScript used to be such a hassle but with jQuery it becomes extremely easy to utilize and manage. This example shows a twitter search that has been animated as a banner of flying pigs( everyone enjoys flying pigs). It also demonstrates Yahoo Pipes json feeds etc.. When I started creating this example I first searched to see what was out their in the wild and I found this post Parsing Yahoo Pipes With jQuery – by Ramiro Gómez . I liked the example but I of course had to modify it and make it a little more reusable. Hopefully the seo-expert will like the changes. Anyone reading this post that is not familiar with Yahoo Pipes should know this about pipes. Yahoo Pipes allows its users to quickly make mashups on the web and then redistribute them to web pages by embedding them, sending RSS feeds and JSON. Yahoo Pipes is also intesting because it kind of serves as a cloud based middle-ware to create other applications. You don’t have to keep the pipe you create on a yahoo site you can also incorporate these feeds into various wordpress pages, durpal pages, etc.. Yahoo Pipes while it might sound complex it is actually very simple to use. The pipe IDE is all visually rendered for the user and you can rapidly mash information on the web. JavaScript Object Notation is easy when using jQuery; I believe many people get frustrated with JavaScript because it can be challenging to debug. I would heavily recommend Firebug on Firefox it really helps to demystify JavaScript it allows developers to easily debug their code, add watches, and utilize a console window. If you are a more visual person than it might benefit you to print out the JSON object with PHP the way seo-expert shows other wise just use Firebug. Feel free to download the example and use it or modify it. I also found it exceptionally easy to use the built in jQuery animation methods. I used them in this sample to fly pigs across the screen and also scroll th div that is filled with images from a yahoo pipe. I have also been looking into JsTweener if I can do something that is more like a flash animation I will do it. It seems to me the animation easing effects are not as easy to use as they are with flash but then again flash has numerous tween libraries. I do belive we will only see more of JavaScript libraries in the future that are based off of existing code libraries that many people currently use. I guess an obvious benefit of using something like JS Tweener is I am already familiar with the syntax and would save myself a Google search. I also added a twitter search to this project that pull the results when pigs fly (Note when you hover over the pig it stops). You will notice that a pig flys by on an occasion and has the related twitter post trailing. When the user hits search it also fetches new JSON feeds for the video, flickr and Twitter feeds. Play around with it. I also used type select a library that allows you to embed fonts. I embedded a font but that font is not available in the download because I had to pay for the font. I highly recommend checking out Type Select for embedding fonts it seemed to work out for me just fine. I have noticed on various platforms I get different results. Vista IE works/ Firefox doesn’t etc.. Apple just works hmm go figure. I also noticed sometimes the Twitter Search Pipe Fails this is because Twitter goes down sometimes hence the service breaks may be I should have wrapped it in a try catch oh well. I had a fun time putting this together and managed to teach myself a little more about jQuery it makes JavaScript easy!

You can also find numerous videos on how to use Yahoo Pipes here is one of those videos by Scott Has a Mac:

Long story short check out Yahoo Pipes you can manipulate information easily and visualize it rapidly.

I think the future of JavaScript will be interesting I am also looking forward to utilizing haXe to convert some flash libraries to JavaScript. Check out this experiment on Chrome Experiment they used haXe to convert Sandy3D to JavaScript. Please Note You have to view this with a Chrome Browser. I am also very curious to see the results. I believe haXe will be an interesting platform I think it could expand by adding support for C# and JAVA. I think then it would be used more and I know they have plans to add support for java at least that is what they were doing at Google summer of code. I think it is interesting that haXe is not about the runtime but utilizing the language of choice and then targeting a runtime this I believe is a paradigm shift. Traditionally platforms are built around the runtime and not the opposite way around. I don’t mind JavaScript but I really like Flash and Silverlight you can count on the same experience across multiple platforms the truth is not of course the same for JavaScript because it is dependent on the browser rendering / JavaScript engine. jQuery really speeds up development and makes JavaScript more like other programing languages.

Links:
Cool JavaScript Experiments by nihilogic
Chrome Experiments
Yahoo Pipes MashUp Creator
Parsing Yahoo Pipes With jQuery – by Ramiro Gómez
jQuery
Future of JavaScript?

Other Cool JavaScript Libraries:
Moo Tools
ProtoType
Pre3d
ProcessingJS
JsTweener
Type Select

This Project’s Associated Files
Click here to Launch Finished Project
Click here to download all associated Code

Yahoo Pipes RSS & JSON ActionScript Revisited A while ago I gave a quick example that showed...
404 Errors Hyped With PaperVision3d pt. 2 Capture URL for search with JavaScript and Pass it...
Fun with Yahoo! Pipes JSON – C# – ActionScript3 What are yahoo pipes and why should I care? Yahoo!...
jQuery CenterIT Have you ever had to deal with the hassle of...

Related posts brought to you by Yet Another Related Posts Plugin.

Other Websites

Brendon Smith Social Networks

When Pigs Fly With jQuery

Brendon Smith

Brendon's Photos

Recent Comments

LifeStream