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

Comments

Popular posts from this blog

Unlockd Android Auto Open

Now that Unlockd has reached its doomed. Here is a script where i just downloaded android tools and automatically have my phone open, I believe you can use this for games that requires constant tapping of the screen (as long as it's not one of the fast tap one as adb has a delay). for i in `seq 1 50`; do # open the phone adb shell input keyevent 26 # keep the phone open for 8 seconds sleep 8 # close the phone adb shell input keyevent 26 # randomised sleep to make it look real sleep $[ ( $RANDOM % 10 ) + 1 ]s done if your phone has passcode for i in `seq 1 50`; do adb shell input keyevent 26 sleep 1 # swipe from bottom to up adb shell input touchscreen swipe 530 1280 1030 480 # enter your passcode adb shell input text <Your passcode> # check button adb shell input keyevent 66 sleep 8 adb shell input keyevent 26 sl…

How to disable textfield on AS3

This took me 2 hours to find out how to disable textfield on AS3, its not the perfect solution but it seems to be the only solution.

private var txtField:Textfield;
...
this.txtField = this.getChildByName("txtField");
this.txtField.mouseEnabled = false;
this.txtField.tabEnabled = false;

and to turn it enable again:
this.txtField.mouseEnabled = true;
this.txtField.tabEnabled = true;

You could also do this
//disable input
myTextField.selectable = false;
myTextField.type = TextFieldType.DYNAMIC;

//enable input
myTextField.selectable = true;
myTextField.type = TextFieldType.INPUT;


While this sound cheap coz you have to disable the mouse and the tab of that component and not the component itself, it seems to be the only solution. Thanks Adobe!!!!!!!!