All posts by ARIF MAHMUD RANA

Programming is one of the thing that I like most. I am a very fun loving people and have great attitude on learning and help people learning.
MooTools Animation

How to animate HTML5 elements with animate.css and MooTools

Leave a comment

I see animate.css is used many people but in animate.css website the demo is written using jQuery. I use MooTools a lot & in MooTools animation is quite complex. So for my future projects I thought to rewrite the demo of animate.css for MooTools.

Step-1 : Create a HTML5 file

<!DOCTYPE html>
<html>
<head>
<title>MooTools with animate.css</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

</body>
</html>

Step-2 : Add animate.css & mootools

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" />

Add animate.css before the end of head tag & add mootools js before the end of body tag.

<script src="//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>

Step-3 : Implement MooTools one method for element


//Source - http://davidwalsh.name/mootools-one-event
Element.implement({
one: function(ev, fn) {
if (!this.oneEvents) {
this.oneEvents = [];
}
var oneFunc = function(e) {
if (!this.oneEvents.contains(fn)) {
this.oneEvents.push(fn);
fn.run(e);
}
return this;
};
this.addEvent(ev, oneFunc);
}
});

 This method will be used to trigger when the animation is finished.

Step-4 : Add HTML

 <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Animate.css</h1></span>
 <div class="wrap">
 <form>
 <select class="input input--dropdown js--animations">
 <optgroup label="Attention Seekers">
 <option value="bounce">bounce</option>
 <option value="flash">flash</option>
 <option value="pulse">pulse</option>
 <option value="rubberBand">rubberBand</option>
 <option value="shake">shake</option>
 <option value="swing">swing</option>
 <option value="tada">tada</option>
 <option value="wobble">wobble</option>
 </optgroup>
 <optgroup label="Bouncing Entrances">
 <option value="bounceIn">bounceIn</option>
 <option value="bounceInDown">bounceInDown</option>
 <option value="bounceInLeft">bounceInLeft</option>
 <option value="bounceInRight">bounceInRight</option>
 <option value="bounceInUp">bounceInUp</option>
 </optgroup>
 <optgroup label="Bouncing Exits">
 <option value="bounceOut">bounceOut</option>
 <option value="bounceOutDown">bounceOutDown</option>
 <option value="bounceOutLeft">bounceOutLeft</option>
 <option value="bounceOutRight">bounceOutRight</option>
 <option value="bounceOutUp">bounceOutUp</option>
 </optgroup>
 <optgroup label="Fading Entrances">
 <option value="fadeIn">fadeIn</option>
 <option value="fadeInDown">fadeInDown</option>
 <option value="fadeInDownBig">fadeInDownBig</option>
 <option value="fadeInLeft">fadeInLeft</option>
 <option value="fadeInLeftBig">fadeInLeftBig</option>
 <option value="fadeInRight">fadeInRight</option>
 <option value="fadeInRightBig">fadeInRightBig</option>
 <option value="fadeInUp">fadeInUp</option>
 <option value="fadeInUpBig">fadeInUpBig</option>
 </optgroup>
 <optgroup label="Fading Exits">
 <option value="fadeOut">fadeOut</option>
 <option value="fadeOutDown">fadeOutDown</option>
 <option value="fadeOutDownBig">fadeOutDownBig</option>
 <option value="fadeOutLeft">fadeOutLeft</option>
 <option value="fadeOutLeftBig">fadeOutLeftBig</option>
 <option value="fadeOutRight">fadeOutRight</option>
 <option value="fadeOutRightBig">fadeOutRightBig</option>
 <option value="fadeOutUp">fadeOutUp</option>
 <option value="fadeOutUpBig">fadeOutUpBig</option>
 </optgroup>
 <optgroup label="Flippers">
 <option value="flip">flip</option>
 <option value="flipInX">flipInX</option>
 <option value="flipInY">flipInY</option>
 <option value="flipOutX">flipOutX</option>
 <option value="flipOutY">flipOutY</option>
 </optgroup>
 <optgroup label="Lightspeed">
 <option value="lightSpeedIn">lightSpeedIn</option>
 <option value="lightSpeedOut">lightSpeedOut</option>
 </optgroup>
 <optgroup label="Rotating Entrances">
 <option value="rotateIn">rotateIn</option>
 <option value="rotateInDownLeft">rotateInDownLeft</option>
 <option value="rotateInDownRight">rotateInDownRight</option>
 <option value="rotateInUpLeft">rotateInUpLeft</option>
 <option value="rotateInUpRight">rotateInUpRight</option>
 </optgroup>
 <optgroup label="Rotating Exits">
 <option value="rotateOut">rotateOut</option>
 <option value="rotateOutDownLeft">rotateOutDownLeft</option>
 <option value="rotateOutDownRight">rotateOutDownRight</option>
 <option value="rotateOutUpLeft">rotateOutUpLeft</option>
 <option value="rotateOutUpRight">rotateOutUpRight</option>
 </optgroup>
 <optgroup label="Specials">
 <option value="hinge">hinge</option>
 <option value="rollIn">rollIn</option>
 <option value="rollOut">rollOut</option>
 </optgroup>
 <optgroup label="Zoom Entrances">
 <option value="zoomIn">zoomIn</option>
 <option value="zoomInDown">zoomInDown</option>
 <option value="zoomInLeft">zoomInLeft</option>
 <option value="zoomInRight">zoomInRight</option>
 <option value="zoomInUp">zoomInUp</option>
 </optgroup>
 <optgroup label="Zoom Exits">
 <option value="zoomOut">zoomOut</option>
 <option value="zoomOutDown">zoomOutDown</option>
 <option value="zoomOutLeft">zoomOutLeft</option>
 <option value="zoomOutRight">zoomOutRight</option>
 <option value="zoomOutUp">zoomOutUp</option>
 </optgroup>
 </select>
 <button class="butt js--triggerAnimation">Animate it</button>
 </form>
 </div>

Step-5 : Add mootools js

 function testAnim(x) {
 $('animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
 $(this).removeClass();
 });
 };
 window.addEvent('domready',function() {
 $$('.js--triggerAnimation').addEvent('click', function(e){
 e.preventDefault();
 var anim = $$('.js--animations')[0].get('value');
 testAnim(anim);
 });
 $$('.js--animations').addEvent('change', function(){
 var anim = $(this).get('value');
 testAnim(anim);
 });
 });

Now check the full code on codepen. You can find the full source at https://gist.github.com/arifmahmudrana/66ae0f91c8f3946e7c5b#file-mootools-with-animate-dot-css-html

javascript

js variable assign array or object

Leave a comment

When we sometime create  a library we have to assign some a variable as object or array.

var man = {
name : {
first : '',
last : ''
},
children : {},
toString : function () {
return this.name.first + ' ' + this.name.last + ' has ' + this.children.length + ' children and they are ' + this.children;
}
};
man.name.first = 'Arif Mahmud', man.name.last = 'Rana';
man.children.push('Fatima');

When run on firebug
When run on firebug

Will I assign as an array or object


var man = {
name : {
first : '',
last : ''
},
children : [],
toString : function () {
return this.name.first + ' ' + this.name.last + ' has ' + this.children.length + ' children and they are ' + this.children;
}
};
man.name.first = 'Arif Mahmud', man.name.last = 'Rana';
man.children.push('Fatima');
alert(man);

Output :

image-2

 

What happens here

There is no JavaScript error.  When we children to array it solves the problem. When we call push method on children it throws error because it was declared as an object not as an array. So push method isn’t available for object.

Tips

Always declare variable as an array rather object. Because than you can access array methods.

htaccess, Wordpress Update

WordPress update plugin theme time out problem

Leave a comment

When we update themes or plugins for WordPress one major issue is time out problem. When downloading update it’s take time and it’s just time out.

We can solve this by using either using php.ini or adding php settings in any related php file or using htaccess file. Adding settings to php file can be easy if we use custom plugin & add a hook there. But if we add this setting to any core wp php file than that php file might override while update.

So the easy solution is htaccess just add this to your htaccess

<IfModule mod_php5.c>
php_value max_execution_time 60000# adjust this 60000 value to your internet connection
</IfModule>

and now while update time out will not occur. The benefit of this is it’s just plug n play you add htaccess it’s update and you remove  if it’s not needed