Skip to main content

show and hide functions in closure

I'm a huge fan of jQuery and while closure is new, its pretty interesting, there are things that are easier to do in jQuery like showing or hiding DOM or DOM manipulations. $ in jQuery is goog.dom.query in closure (they used dojo, i hope they just used sizzle instead). So in order to do something like $("img .oldImages").hide() you have to include third party deps.js
<script src="third_party/closure/goog/deps.js"></script>

We need to import the following:
goog.require('goog.fx');
goog.require('goog.fx.dom');
goog.require('goog.dom.query');
goog.require('goog.fx.AnimationQueue');


function hide(dom){
var anims = new goog.fx.AnimationParallelQueue();
var items = goog.dom.query(dom);
goog.array.forEach(items,function(item){
var anim = new goog.fx.dom.FadeOutAndHide(item, 1000);
anims.add(anim);
});
anims.play();
}

function show(dom){
var anims = new goog.fx.AnimationParallelQueue();
var items = goog.dom.query(dom);
goog.array.forEach(items,function(item){
var anim = new goog.fx.dom.FadeInAndShow(item, 1000);
anims.add(anim);
});
anims.play();
}


Explanation
Use the animation queue (use the one that execute in parallel)
var anims = new goog.fx.AnimationParallelQueue();

Query for our css selector query
var items = goog.dom.query(dom);

Loop through the items create either fadeIn or fadeOut animation on each item, then add that animation to the animation queue.
goog.array.forEach(items,function(item){ ....
anims.add(anim);
});


Play our animation queue
anims.play();

Demo
http://monmonja.com/closure/showHide.html

Popular posts from this blog

Winamp Spotify Treasure hunting

Back in the days when WinAmp was huge (So was tripod and geocities), WinAmp users like to share their playlist. Most of these playlist are still available online through googling and a lot of them are actually good throwback playlist. With that in mind, I created a javascript script that would change the winamp playlist (pure text) into a spotify search link.

An example of this, say you liked the 90s rock scene. You would google "winamp playlist pearl jam silverchair" and some of the results will return with the title "Winamp Generated PlayList" and these are what we would like to treasure hunt on. Then
Click on of the result.
Right click anywhere in the page, select Inspect (Chrome) or Inspect Element (Firefox)
Select the Console
Paste this
$$('ul font small')[0].innerHTML = $$('ul font small')[0].innerHTML.split('<br>').map((val) => { return '<a style="color:white" href="spotify:search:' + encodeURIComp…

Laravel 4.2 and App Engine

Was trying to make Laravel work with App Engine when i saw this post Laravel 4 on Google AppEngine for PHP, have tried to make it work but it seems there are some things that needs to be updated to make it work.

First off follow everything the blog until THE MCRYPT PHP EXTENSION then on that part we have to change "require": { "laravel/framework": "4.2.*", "neoxia/laravel-openssl-encryption-42": "dev-master" },
Then continue to follow the blog again. Then on THE LARAVEL 4 LOGGER, change $monolog->pushHandler(new Monolog\Handler\SyslogHandler('intranet', 'user', Monolog\Logger::DEBUG, false, LOG_PID));
Then before executing ./artisan optimize     open LaravelOpensslEncryptionServiceProvider.php, add to the top use Illuminate\Encryption\Encrypter;
Then lasty the part of UNIX_SOCKET, you could ignore it, it seems fixed for 4.2

LaMetric Python App

Creating a personal stock app for LaMetric is super simple, all you need is create an account at developer.lametric.com and have an url with your data. Depending on how you want the data to appear, the format should be in json and how it appears in the creation process.

I used appengine to host my data and used the metric data format


Here is the python code
import urllib2 import json # get stocks data using yahoo finance stocks = ['0002.HK', '0005.HK', '0011.HK', '0992.HK', '0066.HK'] url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + ("%22%2C%22".join(stocks)) + "%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json" result = urllib2.urlopen(url) data = json.loads(result.read()) # create frames based on the metric data format frames = [] for stock in data['query']['results']['quote']: …