WBDSGNR - Real Life Implement: 2017

Thursday, 14 December 2017

Auto Complete all WooCommerce orders

/**
* Auto Complete all WooCommerce orders.
*/
add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );
function custom_woocommerce_auto_complete_order( $order_id ) {
if ( ! $order_id ) {
return;
}

$order = wc_get_order( $order_id );

/* Customized Solution by Nucleus System */
// Set HERE your targetted products IDs:
$targetted_products = array( 3038 ); //if product id is crony

$order = wc_get_order( $order_id );

if ( $order->get_user_id() > 0 ) {
foreach ( $order->get_items() as $order_item ) {
// Here we detect if the a target product is part of this order items
if ( in_array( $order_item['product_id'], $targetted_products ) ){

// I think tha this is not really needed as it's set when an order has been paid…
update_user_meta( $order->get_user_id(), 'paying_customer', 1 ); // 1 => true

// Remove all roles and set 'editor' as user role (for current user)
$user = new WP_User( $order->get_user_id() );
$user->set_role( 'crony' );
// Product is found, we break the loop…
break;
}
}
}

$order->update_status( 'completed' );
}
//
// add_action( 'woocommerce_order_status_completed', 'custom_action_on_completed_customer_email_notification' );
// function custom_action_on_completed_customer_email_notification( $order_id ) {
//
// // Set HERE your targetted products IDs:
// $targetted_products = array( 3038 );
//
// $order = wc_get_order( $order_id );
//
// if ( $order->get_user_id() > 0 ) {
// foreach ( $order->get_items() as $order_item ) {
// // Here we detect if the a target product is part of this order items
// if ( in_array( $order_item['product_id'], $targetted_products ) ){
//
// // I think tha this is not really needed as it's set when an order has been paid…
// update_user_meta( $order->get_user_id(), 'paying_customer', 1 ); // 1 => true
//
// // Remove all roles and set 'editor' as user role (for current user)
// $user = new WP_User( $order->get_user_id() );
// $user->set_role( 'crony' );
// $user->add_role( 'subscriber' );
//
// // Product is found, we break the loop…
// break;
// }
// }
// }
// }

Woocommerce : Specific item skip cart direct to checkout

add_filter( 'woocommerce_add_to_cart_redirect', 'woo_redirect_checkout' );

function woo_redirect_checkout() {
global $woocommerce;
$desire_product = '3038'; /* <-- this product id */
//Get product ID
$product_id = (int) apply_filters( 'woocommerce_add_to_cart_product_id', $_POST['add-to-cart'] );

//Check if current product is subscription
if ( $product_id == $desire_product ){
$checkout_url = $woocommerce->cart->get_checkout_url();
return $checkout_url;
exit;
} else {
$cart_url = $woocommerce->cart->get_cart_url();
return $cart_url;
exit;
}
}

Meta tag : Change mobile browser address to color theme

Monday, 4 December 2017

Woo commerce

Add content below add to cart button

https://chiefthemes.com/woocommerce-add-content-blow-add-to-cart-button/

Monday, 30 October 2017

Plugin To Use

All-in-One WP MigrationEasy HTTPS (SSL) RedirectionHide/Unhide Menu for Guest/MemberWP Change Default From EmailWidget Options Extended Widget

Friday, 27 October 2017

Payment gateway ref

https://ibill.my/
http://billplz.com

Sunday, 8 October 2017

CSS : ALIGN MULTIPLE IMAGES HORIZONTAL

.container2{
text-align:center;

border:0px solid #666;
}

.fake_img{
display:inline-block;
margin:0;
padding:5px;

border:0px solid #CCC;
}

<div class="fake_img">Content here

</div>

<div class="fake_img">Content here </div>

<div class="fake_img">Content here</div>

</div>

Thursday, 5 October 2017

WOW JS CLASSES animation

https://codepen.io/TimLamber/pen/dLxbF

COPY THIS TO HEAD

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script>
new WOW().init();
</script>

HOW TO SET CLASSES

<div data-wow-delay="1s" data-wow-duration="1s" class="wow fadeInDown wHighlight animated" style="visibility: visible;" > ... </div>

new WOW().init();

wow.js allows you to animate html elements on with animate.css on scroll past.

The classes sample

<main class="wowBack clearfix">
<section class="wowWrap">
<h4>Wow.js & Animate.css</h4>
<div class="wow bounce">bounce</div>
<div class="wow flash">flash</div>
<div class="wow pulse">pulse</div>
<div class="wow rubberBand">rubberBand</div>
<div class="wow shake">shake</div>
<div class="wow swing">swing</div>
<div class="wow tada">tada</div>
<div class="wow wobble">wobble</div>
<div class="wow bounceIn">bounceIn</div>
<div class="wow bounceInDown">bounceInDown</div>
<div class="wow bounceInLeft">bounceInLeft</div>
<div class="wow bounceInRight">bounceInRight</div>
<div class="wow bounceInUp">bounceInUp</div>
<div class="wow bounceOut">bounceOut</div>
<div class="wow bounceOutDown">bounceOutDown</div>
<div class="wow bounceOutLeft">bounceOutLeft</div>
<div class="wow bounceOutRight">bounceOutRight</div>
<div class="wow bounceOutUp">bounceOutUp</div>
<div class="wow fadeIn">fadeIn</div>
<div class="wow fadeInDown">fadeInDown</div>
<div class="wow fadeInDownBig">fadeInDownBig</div>
<div class="wow fadeInLeft">fadeInLeft</div>
<div class="wow fadeInLeftBig">fadeInLeftBig</div>
<div class="wow fadeInRight">fadeInRight</div>
<div class="wow fadeInRightBig">fadeInRightBig</div>
<div class="wow fadeInUp">fadeInUp</div>
<div class="wow fadeInUpBig">fadeInUpBig</div>
<div class="wow fadeOut">fadeOut</div>
<div class="wow fadeOutDown">fadeOutDown</div>
<div class="wow fadeOutDownBig">fadeOutDownBig</div>
<div class="wow fadeOutLeft">fadeOutLeft</div>
<div class="wow fadeOutLeftBig">fadeOutLeftBig</div>
<div class="wow fadeOutRight">fadeOutRight</div>
<div class="wow fadeOutRightBig">fadeOutRightBig</div>
<div class="wow fadeOutUp">fadeOutUp</div>
<div class="wow fadeOutUpBig">fadeOutUpBig</div>
<div class="wow flip">flip</div>
<div class="wow flipInX">flipInX</div>
<div class="wow flipInY">flipInY</div>
<div class="wow flipOutX">flipOutX</div>
<div class="wow flipOutY">flipOutY</div>
<div class="wow lightSpeedIn">lightSpeedIn</div>
<div class="wow lightSpeedOut">lightSpeedOut</div>
<div class="wow rotateIn">rotateIn</div>
<div class="wow rotateInDownLeft">rotateInDownLeft</div>
<div class="wow rotateInDownRight">rotateInDownRight</div>
<div class="wow rotateInUpLeft">rotateInUpLeft</div>
<div class="wow rotateInUpRight">rotateInUpRight</div>
<div class="wow rotateOut">rotateOut</div>
<div class="wow rotateOutDownLeft">rotateOutDownLeft</div>
<div class="wow rotateOutDownRight">rotateOutDownRight</div>
<div class="wow rotateOutUpLeft">rotateOutUpLeft</div>
<div class="wow rotateOutUpRight">rotateOutUpRight</div>
<div class="wow hinge">hinge</div>
<div class="wow rollIn">rollIn</div>
<div class="wow rollOut">rollOut</div>
<div class="wow zoomIn">zoomIn</div>
<div class="wow zoomInDown">zoomInDown</div>
<div class="wow zoomInLeft">zoomInLeft</div>
<div class="wow zoomInRight">zoomInRight</div>
<div class="wow zoomInUp">zoomInUp</div>
<div class="wow zoomOut">zoomOut</div>
<div class="wow zoomOutDown">zoomOutDown</div>
<div class="wow zoomOutLeft">zoomOutLeft</div>
<div class="wow zoomOutRight">zoomOutRight</div>
<div class="wow zoomOutUp">zoomOutUp</div>
</section><section class="wowWrap">
<h4>data-wow-delay=".25s"</h4>

<div data-wow-delay=".25s" class="wow bounce">bounce</div>
<div data-wow-delay=".25s" class="wow flash">flash</div>
<div data-wow-delay=".25s" class="wow pulse">pulse</div>
<div data-wow-delay=".25s" class="wow rubberBand">rubberBand</div>
<div data-wow-delay=".25s" class="wow shake">shake</div>
<div data-wow-delay=".25s" class="wow swing">swing</div>
<div data-wow-delay=".25s" class="wow tada">tada</div>
<div data-wow-delay=".25s" class="wow wobble">wobble</div>

<div data-wow-delay=".25s" class="wow flip">flip</div>
<div data-wow-delay=".25s" class="wow flipOutX">flipOutX</div>
<div data-wow-delay=".25s" class="wow flipOutY">flipOutY</div>
<div data-wow-delay=".25s" class="wow rotateOut">rotateOut</div>
<div data-wow-delay=".25s" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
<div data-wow-delay=".25s" class="wow rotateOutDownRight">rotateOutDownRight</div>
<div data-wow-delay=".25s" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
<div data-wow-delay=".25s" class="wow rotateOutUpRight">rotateOutUpRight</div>
<div data-wow-delay=".25s" class="wow bounceOut">bounceOut</div>
<div data-wow-delay=".25s" class="wow bounceOutDown">bounceOutDown</div>
<div data-wow-delay=".25s" class="wow bounceOutLeft">bounceOutLeft</div>
<div data-wow-delay=".25s" class="wow bounceOutRight">bounceOutRight</div>
<div data-wow-delay=".25s" class="wow bounceOutUp">bounceOutUp</div>
<div data-wow-delay=".25s" class="wow fadeOut">fadeOut</div>
<div data-wow-delay=".25s" class="wow fadeOutDown">fadeOutDown</div>
<div data-wow-delay=".25s" class="wow fadeOutDownBig">fadeOutDownBig</div>
<div data-wow-delay=".25s" class="wow fadeOutLeft">fadeOutLeft</div>
<div data-wow-delay=".25s" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
<div data-wow-delay=".25s" class="wow fadeOutRight">fadeOutRight</div>
<div data-wow-delay=".25s" class="wow fadeOutRightBig">fadeOutRightBig</div>
<div data-wow-delay=".25s" class="wow fadeOutUp">fadeOutUp</div>
<div data-wow-delay=".25s" class="wow fadeOutUpBig">fadeOutUpBig</div>
<div data-wow-delay=".25s" class="wow hinge">hinge</div>
<div data-wow-delay=".25s" class="wow rollOut">rollOut</div>
<div data-wow-delay=".25s" class="wow zoomOut ">zoomOut</div>
<div data-wow-delay=".25s" class="wow zoomOutDown">zoomOutDown</div>
<div data-wow-delay=".25s" class="wow zoomOutLeft">zoomOutLeft</div>
<div data-wow-delay=".25s" class="wow zoomOutRight">zoomOutRight</div>
<div data-wow-delay=".25s" class="wow zoomOutUp">zoomOutUp</div>
</section><section class="wowWrap">
<h4>data-wow-delay=".25s"</h4>

<div data-wow-delay=".25s" class="wow bounceIn wHighlight">bounceIn</div>
<div data-wow-delay=".25s" class="wow bounceInDown wHighlight">bounceInDown</div>
<div data-wow-delay=".25s" class="wow bounceInLeft wHighlight">bounceInLeft</div>
<div data-wow-delay=".25s" class="wow bounceInRight wHighlight">bounceInRight</div>
<div data-wow-delay=".25s" class="wow bounceInUp wHighlight">bounceInUp</div>
<div data-wow-delay=".25s" class="wow fadeIn wHighlight">fadeIn</div>
<div data-wow-delay=".25s" class="wow fadeInDown wHighlight">fadeInDown</div>
<div data-wow-delay=".25s" class="wow fadeInDownBig wHighlight">fadeInDownBig</div>
<div data-wow-delay=".25s" class="wow fadeInLeft wHighlight">fadeInLeft</div>
<div data-wow-delay=".25s" class="wow fadeInLeftBig wHighlight">fadeInLeftBig</div>
<div data-wow-delay=".25s" class="wow fadeInRight wHighlight">fadeInRight</div>
<div data-wow-delay=".25s" class="wow fadeInRightBig wHighlight">fadeInRightBig</div>
<div data-wow-delay=".25s" class="wow fadeInUp wHighlight">fadeInUp</div>
<div data-wow-delay=".25s" class="wow fadeInUpBig wHighlight">fadeInUpBig</div>
<div data-wow-delay=".25s" class="wow flipInX wHighlight">flipInX</div>
<div data-wow-delay=".25s" class="wow flipInY wHighlight">flipInY</div>
<div data-wow-delay=".25s" class="wow lightSpeedIn wHighlight">lightSpeedIn</div>
<div data-wow-delay=".25s" class="wow rotateIn wHighlight">rotateIn</div>
<div data-wow-delay=".25s" class="wow rotateInDownLeft wHighlight">rotateInDownLeft</div>
<div data-wow-delay=".25s" class="wow rotateInDownRight wHighlight">rotateInDownRight</div>
<div data-wow-delay=".25s" class="wow rotateInUpLeft wHighlight">rotateInUpLeft</div>
<div data-wow-delay=".25s" class="wow rotateInUpRight wHighlight">rotateInUpRight</div>
<div data-wow-delay=".25s" class="wow rollIn wHighlight">rollIn</div>
<div data-wow-delay=".25s" class="wow zoomIn wHighlight">zoomIn</div>
<div data-wow-delay=".25s" class="wow zoomInDown wHighlight">zoomInDown</div>
<div data-wow-delay=".25s" class="wow zoomInLeft wHighlight">zoomInLeft</div>
<div data-wow-delay=".25s" class="wow zoomInRight wHighlight">zoomInRight</div>
<div data-wow-delay=".25s" class="wow zoomInUp wHighlight">zoomInUp</div>
</section><section class="wowWrap">
<h4>data-wow-duration="2s"<br> data-wow-iteration="100"</h4>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounce">bounce</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow flash">flash</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow pulse">pulse</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rubberBand">rubberBand</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow shake">shake</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow swing">swing</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow tada">tada</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow wobble">wobble</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceIn">bounceIn</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInDown">bounceInDown</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInLeft">bounceInLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInRight">bounceInRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceInUp">bounceInUp</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOut">bounceOut</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutDown">bounceOutDown</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutLeft">bounceOutLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutRight">bounceOutRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounceOutUp">bounceOutUp</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeIn">fadeIn</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInDown">fadeInDown</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInDownBig">fadeInDownBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInLeft">fadeInLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInLeftBig">fadeInLeftBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInRight">fadeInRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInRightBig">fadeInRightBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInUp">fadeInUp</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeInUpBig">fadeInUpBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOut">fadeOut</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutDown">fadeOutDown</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutDownBig">fadeOutDownBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutLeft">fadeOutLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutRight">fadeOutRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutRightBig">fadeOutRightBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutUp">fadeOutUp</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow fadeOutUpBig">fadeOutUpBig</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow flip">flip</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow flipInX">flipInX</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow flipInY">flipInY</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow flipOutX">flipOutX</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow flipOutY">flipOutY</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow lightSpeedIn">lightSpeedIn</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow lightSpeedOut">lightSpeedOut</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateIn">rotateIn</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInDownLeft">rotateInDownLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInDownRight">rotateInDownRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInUpLeft">rotateInUpLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateInUpRight">rotateInUpRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOut">rotateOut</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutDownRight">rotateOutDownRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rotateOutUpRight">rotateOutUpRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow hinge">hinge</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rollIn">rollIn</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow rollOut">rollOut</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomIn">zoomIn</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInDown">zoomInDown</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInLeft">zoomInLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInRight">zoomInRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomInUp">zoomInUp</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOut">zoomOut</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutDown">zoomOutDown</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutLeft">zoomOutLeft</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutRight">zoomOutRight</div>
<div data-wow-duration="2s" data-wow-iteration="100" class="wow zoomOutUp">zoomOutUp</div>
</section><section class="wowWrap">
<h4>data-wow-iteration="100"</h4>
<div data-wow-iteration="100" class="wow bounce">bounce</div>
<div data-wow-iteration="100" class="wow flash">flash</div>
<div data-wow-iteration="100" class="wow pulse">pulse</div>
<div data-wow-iteration="100" class="wow rubberBand">rubberBand</div>
<div data-wow-iteration="100" class="wow shake">shake</div>
<div data-wow-iteration="100" class="wow swing">swing</div>
<div data-wow-iteration="100" class="wow tada">tada</div>
<div data-wow-iteration="100" class="wow wobble">wobble</div>
<div data-wow-iteration="100" class="wow bounceIn">bounceIn</div>
<div data-wow-iteration="100" class="wow bounceInDown">bounceInDown</div>
<div data-wow-iteration="100" class="wow bounceInLeft">bounceInLeft</div>
<div data-wow-iteration="100" class="wow bounceInRight">bounceInRight</div>
<div data-wow-iteration="100" class="wow bounceInUp">bounceInUp</div>
<div data-wow-iteration="100" class="wow bounceOut">bounceOut</div>
<div data-wow-iteration="100" class="wow bounceOutDown">bounceOutDown</div>
<div data-wow-iteration="100" class="wow bounceOutLeft">bounceOutLeft</div>
<div data-wow-iteration="100" class="wow bounceOutRight">bounceOutRight</div>
<div data-wow-iteration="100" class="wow bounceOutUp">bounceOutUp</div>
<div data-wow-iteration="100" class="wow fadeIn">fadeIn</div>
<div data-wow-iteration="100" class="wow fadeInDown">fadeInDown</div>
<div data-wow-iteration="100" class="wow fadeInDownBig">fadeInDownBig</div>
<div data-wow-iteration="100" class="wow fadeInLeft">fadeInLeft</div>
<div data-wow-iteration="100" class="wow fadeInLeftBig">fadeInLeftBig</div>
<div data-wow-iteration="100" class="wow fadeInRight">fadeInRight</div>
<div data-wow-iteration="100" class="wow fadeInRightBig">fadeInRightBig</div>
<div data-wow-iteration="100" class="wow fadeInUp">fadeInUp</div>
<div data-wow-iteration="100" class="wow fadeInUpBig">fadeInUpBig</div>
<div data-wow-iteration="100" class="wow fadeOut">fadeOut</div>
<div data-wow-iteration="100" class="wow fadeOutDown">fadeOutDown</div>
<div data-wow-iteration="100" class="wow fadeOutDownBig">fadeOutDownBig</div>
<div data-wow-iteration="100" class="wow fadeOutLeft">fadeOutLeft</div>
<div data-wow-iteration="100" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
<div data-wow-iteration="100" class="wow fadeOutRight">fadeOutRight</div>
<div data-wow-iteration="100" class="wow fadeOutRightBig">fadeOutRightBig</div>
<div data-wow-iteration="100" class="wow fadeOutUp">fadeOutUp</div>
<div data-wow-iteration="100" class="wow fadeOutUpBig">fadeOutUpBig</div>
<div data-wow-iteration="100" class="wow flip">flip</div>
<div data-wow-iteration="100" class="wow flipInX">flipInX</div>
<div data-wow-iteration="100" class="wow flipInY">flipInY</div>
<div data-wow-iteration="100" class="wow flipOutX">flipOutX</div>
<div data-wow-iteration="100" class="wow flipOutY">flipOutY</div>

<div data-wow-iteration="100" class="wow lightSpeedIn">lightSpeedIn</div>
<div data-wow-iteration="100" class="wow lightSpeedOut">lightSpeedOut</div>
<div data-wow-iteration="100" class="wow rotateIn">rotateIn</div>
<div data-wow-iteration="100" class="wow rotateInDownLeft">rotateInDownLeft</div>
<div data-wow-iteration="100" class="wow rotateInDownRight">rotateInDownRight</div>
<div data-wow-iteration="100" class="wow rotateInUpLeft">rotateInUpLeft</div>
<div data-wow-iteration="100" class="wow rotateInUpRight">rotateInUpRight</div>
<div data-wow-iteration="100" class="wow rotateOut">rotateOut</div>
<div data-wow-iteration="100" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
<div data-wow-iteration="100" class="wow rotateOutDownRight">rotateOutDownRight</div>
<div data-wow-iteration="100" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
<div data-wow-iteration="100" class="wow rotateOutUpRight">rotateOutUpRight</div>
<div data-wow-iteration="100" class="wow hinge">hinge</div>
<div data-wow-iteration="100" class="wow rollIn">rollIn</div>
<div data-wow-iteration="100" class="wow rollOut">rollOut</div>
<div data-wow-iteration="100" class="wow zoomIn">zoomIn</div>
<div data-wow-iteration="100" class="wow zoomInDown">zoomInDown</div>
<div data-wow-iteration="100" class="wow zoomInLeft">zoomInLeft</div>
<div data-wow-iteration="100" class="wow zoomInRight">zoomInRight</div>
<div data-wow-iteration="100" class="wow zoomInUp">zoomInUp</div>
<div data-wow-iteration="100" class="wow zoomOut">zoomOut</div>
<div data-wow-iteration="100" class="wow zoomOutDown">zoomOutDown</div>
<div data-wow-iteration="100" class="wow zoomOutLeft">zoomOutLeft</div>
<div data-wow-iteration="100" class="wow zoomOutRight">zoomOutRight</div>
<div data-wow-iteration="100" class="wow zoomOutUp">zoomOutUp</div>
</section><section class="wowWrap">
<h4>wow-data-offset="200"</h4>
<div data-wow-offset="200" class="wow bounce">bounce</div>
<div data-wow-offset="200" class="wow flash">flash</div>
<div data-wow-offset="200" class="wow pulse">pulse</div>
<div data-wow-offset="200" class="wow rubberBand">rubberBand</div>
<div data-wow-offset="200" class="wow shake">shake</div>
<div data-wow-offset="200" class="wow swing">swing</div>
<div data-wow-offset="200" class="wow tada">tada</div>
<div data-wow-offset="200" class="wow wobble">wobble</div>
<div data-wow-offset="200" class="wow bounceIn">bounceIn</div>
<div data-wow-offset="200" class="wow bounceInDown">bounceInDown</div>
<div data-wow-offset="200" class="wow bounceInLeft">bounceInLeft</div>
<div data-wow-offset="200" class="wow bounceInRight">bounceInRight</div>
<div data-wow-offset="200" class="wow bounceInUp">bounceInUp</div>
<div data-wow-offset="200" class="wow bounceOut">bounceOut</div>
<div data-wow-offset="200" class="wow bounceOutDown">bounceOutDown</div>
<div data-wow-offset="200" class="wow bounceOutLeft">bounceOutLeft</div>
<div data-wow-offset="200" class="wow bounceOutRight">bounceOutRight</div>
<div data-wow-offset="200" class="wow bounceOutUp">bounceOutUp</div>
<div data-wow-offset="200" class="wow fadeIn">fadeIn</div>
<div data-wow-offset="200" class="wow fadeInDown">fadeInDown</div>
<div data-wow-offset="200" class="wow fadeInDownBig">fadeInDownBig</div>
<div data-wow-offset="200" class="wow fadeInLeft">fadeInLeft</div>
<div data-wow-offset="200" class="wow fadeInLeftBig">fadeInLeftBig</div>
<div data-wow-offset="200" class="wow fadeInRight">fadeInRight</div>
<div data-wow-offset="200" class="wow fadeInRightBig">fadeInRightBig</div>
<div data-wow-offset="200" class="wow fadeInUp">fadeInUp</div>
<div data-wow-offset="200" class="wow fadeInUpBig">fadeInUpBig</div>
<div data-wow-offset="200" class="wow fadeOut">fadeOut</div>
<div data-wow-offset="200" class="wow fadeOutDown">fadeOutDown</div>
<div data-wow-offset="200" class="wow fadeOutDownBig">fadeOutDownBig</div>
<div data-wow-offset="200" class="wow fadeOutLeft">fadeOutLeft</div>
<div data-wow-offset="200" class="wow fadeOutLeftBig">fadeOutLeftBig</div>
<div data-wow-offset="200" class="wow fadeOutRight">fadeOutRight</div>
<div data-wow-offset="200" class="wow fadeOutRightBig">fadeOutRightBig</div>
<div data-wow-offset="200" class="wow fadeOutUp">fadeOutUp</div>
<div data-wow-offset="200" class="wow fadeOutUpBig">fadeOutUpBig</div>
<div data-wow-offset="200" class="wow flip">flip</div>
<div data-wow-offset="200" class="wow flipInX">flipInX</div>
<div data-wow-offset="200" class="wow flipInY">flipInY</div>
<div data-wow-offset="200" class="wow flipOutX">flipOutX</div>
<div data-wow-offset="200" class="wow flipOutY">flipOutY</div>
<div data-wow-offset="200" class="wow lightSpeedIn">lightSpeedIn</div>
<div data-wow-offset="200" class="wow lightSpeedOut">lightSpeedOut</div>
<div data-wow-offset="200" class="wow rotateIn">rotateIn</div>
<div data-wow-offset="200" class="wow rotateInDownLeft">rotateInDownLeft</div>
<div data-wow-offset="200" class="wow rotateInDownRight">rotateInDownRight</div>
<div data-wow-offset="200" class="wow rotateInUpLeft">rotateInUpLeft</div>
<div data-wow-offset="200" class="wow rotateInUpRight">rotateInUpRight</div>
<div data-wow-offset="200" class="wow rotateOut">rotateOut</div>
<div data-wow-offset="200" class="wow rotateOutDownLeft">rotateOutDownLeft</div>
<div data-wow-offset="200" class="wow rotateOutDownRight">rotateOutDownRight</div>
<div data-wow-offset="200" class="wow rotateOutUpLeft">rotateOutUpLeft</div>
<div data-wow-offset="200" class="wow rotateOutUpRight">rotateOutUpRight</div>
<div data-wow-offset="200" class="wow hinge">hinge</div>
<div data-wow-offset="200" class="wow rollIn">rollIn</div>
<div data-wow-offset="200" class="wow rollOut">rollOut</div>
<div data-wow-offset="200" class="wow zoomIn">zoomIn</div>
<div data-wow-offset="200" class="wow zoomInDown">zoomInDown</div>
<div data-wow-offset="200" class="wow zoomInLeft">zoomInLeft</div>
<div data-wow-offset="200" class="wow zoomInRight">zoomInRight</div>
<div data-wow-offset="200" class="wow zoomInUp">zoomInUp</div>
<div data-wow-offset="200" class="wow zoomOut">zoomOut</div>
<div data-wow-offset="200" class="wow zoomOutDown">zoomOutDown</div>
<div data-wow-offset="200" class="wow zoomOutLeft">zoomOutLeft</div>
<div data-wow-offset="200" class="wow zoomOutRight">zoomOutRight</div>
<div data-wow-offset="200" class="wow zoomOutUp">zoomOutUp</div>
</section></main>

Create a subfolder in your child theme called css
Place animate.min.css there.
Create a subfolder in your child theme called js
Place wow.min.js there.
Add following lines to the functions.php file on wp

//* Enqueue Animate.CSS and WOW.js
add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ );
function sk_enqueue_scripts() {
wp_enqueue_style( ‘animate’, get_stylesheet_directory_uri() . ‘/css/animate.min.css’ );
wp_enqueue_script( ‘wow’, get_stylesheet_directory_uri() . ‘/js/wow.min.js’, array(), ”, true );
}
//* Enqueue script to activate WOW.js
add_action(‘wp_enqueue_scripts’, ‘sk_wow_init_in_footer’);
function sk_wow_init_in_footer() {
add_action( ‘print_footer_scripts’, ‘wow_init’ );
}
//* Add JavaScript before </body>
function wow_init() { ?>
<script type=”text/javascript”>
new WOW().init();
</script>
<?php }

Tuesday, 3 October 2017

Refer : SSL HTTPS

https://www.sslforfree.com/

ANIMATION : FLY IN animation

DEMO

Copy This CSS Code


/*------------------------------------------------*/

/*--------[GQ - CUSTOM FLY-IN ANIMATIONS]---------*/

/*------------------------------------------------*/



/* hide overflow */

    .gq_s_slider1 {

        overflow:hidden;}



/* font */

    .gq_s_slider1 p {

        color: #2aa6c2;

        font-size: 46px;

        line-height: 46px;

        background: #ffffff;

        padding: 7px 25px 14px;

        display: inline-block;

        display: -webkit-inline-box;

        margin-bottom: 28px;

        border-radius: 4px;}



/* offset padding */

    .gq_text_slidein_r1 {padding-left: 20%;}

 .gq_text_slidein_r2 {padding-left: 40%;}

 .gq_text_slidein_r3 {padding-left: 60%;}

 .gq_text_slidein_r4 {padding-left: 80%;}



  

    .gq_text_slidein_l1 {padding-right: 20%;}

    .gq_text_slidein_l2 {padding-right: 40%;}

 .gq_text_slidein_l3 {padding-right: 60%;}

 .gq_text_slidein_l4 {padding-right: 80%;}



/*code



gq-animated gq-waypoint gq_text_slidein_l2 gq_animation_left1

gq-animated gq-waypoint gq_text_slidein_r2 gq_animation_right1



*/



/* right */



.gq_animation_right1.gq-animated {

        -webkit-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeRight 1.0s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeRight 1.0 1 cubic-bezier(0.77, 0, 0.175, 1);}



.gq_animation_right2.gq-animated {

        -webkit-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeRight 2.0s 1 cubic-bezier(0.77, 0, 0.175, 1);}



 .gq_animation_right3.gq-animated {

        -webkit-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeRight 3 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);}



.gq_animation_right4.gq-animated {

        -webkit-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeRight 3 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeRight 3s 1 cubic-bezier(0.77, 0, 0.175, 1);}



/* left*/

  



    .gq_animation_left1.gq-animated {

        -webkit-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}



  



    .gq_animation_left2.gq-animated {

        -webkit-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeLeft 2.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}



  .gq_animation_left3.gq-animated {

        -webkit-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}



  .gq_animation_left4.gq-animated {

        -webkit-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -moz-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        -o-animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);

        animation: GQfadeLeft 3.5s 1 cubic-bezier(0.77, 0, 0.175, 1);}



  



/* keyframe animations */

    @-webkit-keyframes GQfadeLeft {

        0% {opacity: 0; -webkit-transform: translateX(-100%);}

        100% {opacity: 1!important; -webkit-transform: translateX(0);}}

    @-moz-keyframes GQfadeLeft {

        0% {opacity: 0;-moz-transform: translateX(-100%);}

        100% {opacity: 1!important; -moz-transform: translateX(0);}}

    @-o-keyframes GQfadeLeft {

        0% {opacity: 0; -o-transform: translateX(-100%);}

        100% {opacity: 1!important; -o-transform: translateX(0);}}

    @keyframes GQfadeLeft {

        0% {opacity: 0; transform: translateX(-100%);}

        100% {opacity: 1!important; transform: translateX(0);}}



    @-webkit-keyframes GQfadeRight {

        0% {opacity: 0; -webkit-transform: translateX(100%);}

        100% {opacity: 1!important; -webkit-transform: translateX(0);}}

    @-moz-keyframes GQfadeRight {

        0% {opacity: 0; -mox-transform: translateX(100%);}

        100% {opacity: 1!important; -moz-transform: translateX(0);}}

    @-o-keyframes GQfadeRight {

        0% {opacity: 0; -0-transform: translateX(100%);}

        100% {opacity: 1!important; -o-transform: translateX(0);}}

    @keyframes GQfadeRight {

        0% {opacity: 0; transform: translateX(100%);}

        100% {opacity: 1!important; transform: translateX(0);}}

USE THIS CSS CLASSES

FROM LEFT

gq-animated gq-waypoint gq_text_slidein_l1 gq_animation_left1
gq-animated gq-waypoint gq_text_slidein_l2 gq_animation_left2
gq-animated gq-waypoint gq_text_slidein_l3 gq_animation_left3
gq-animated gq-waypoint gq_text_slidein_l4 gq_animation_left4

FROM RIGHT

gq-animated gq-waypoint gq_text_slidein_r1 gq_animation_right1
gq-animated gq-waypoint gq_text_slidein_r2 gq_animation_right2
gq-animated gq-waypoint gq_text_slidein_r3 gq_animation_right3
gq-animated gq-waypoint gq_text_slidein_r4 gq_animation_right4

COPY THIS SCRIPT PUT IN BODY

Sunday, 1 October 2017

KIV : WOW FORM

Wow Forms – create any form with custom style

WP PLUGIN - ANIMATION & HOVER

Hover Effects – easily create any hover effect
CSS hero Animator

Friday, 29 September 2017

Plugin : Mobile Zoom In

Definitely allow mobile zooming

Monday, 25 September 2017

DIVI MESSAGE PATTERN

NEW INQUIRY COMING FROM..

name : %%name%%
phone : %%phone%%.
Email: %%email%%.
Message : " %%message%% ".

Monday, 18 September 2017

DIVI FULL SCREEN SLIDE

.et_fullscreen_slider

PASTE ON <HEAD>

<script>
(function($) {
$(window).on('load resize', function() {
$('.et_fullscreen_slider').each(function() {
et_fullscreen_slider($(this));
});
});
function et_fullscreen_slider(et_slider) {
var et_viewport_height = $(window).height(),
et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
$admin_bar = $('#wpadminbar'),
$main_header = $('#main-header'),
$top_header = $('#top-header');
$(et_slider).height('auto');
if ($admin_bar.length) {
var et_viewport_height = et_viewport_height - $admin_bar.height();
}
if ($top_header.length) {
var et_viewport_height = et_viewport_height - $top_header.height();
}
if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
var et_viewport_height = et_viewport_height - $main_header.height();
}
if (et_viewport_height > et_slider_height) {
$(et_slider).height(et_viewport_height);
}
}
})(jQuery);
</script>

REF : CSS3 HOVER EFFECT

https://codepen.io/search/pens/?limit=all&page=3&q=hover+effect

REF : HTML5 CANVAS

http://www.html5canvastutorials.com/
http://creativejs.com/2011/08/31-days-of-canvas-tutorials/
http://www.bit-101.com/
http://scrollmagic.io/
http://creativejs.com/2011/08/31-days-of-canvas-tutorials/

Saturday, 16 September 2017

CREATE A LINK/URL THAT EXPIRED AND SECRET

https://onetimesecret.com/

TRIGGER ANIMATION WHEN SCROLL UP/DOWN

Past the code on <body> for divi/html

<script>
(function($) {
var $animation_elements = $('.et-waypoint'),
$window = $(window);

function check_if_in_view() {
var window_height = $window.height(),
window_top_position = $window.scrollTop(),
window_bottom_position = (window_top_position + window_height);

$animation_elements.each(function() {
var $element = $(this),
element_height = $element.outerHeight(),
element_top_position = $element.offset().top,
element_bottom_position = (element_top_position + element_height);

//check to see if this element is within viewport
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
$element.addClass('et-animated');
} else {
$element.removeClass('et-animated');
}
});
}

$window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

Friday, 15 September 2017

CSS ANIMATION REFERENCE

http://www.justinaguilar.com/animations/#

CSS : IMAGE / TEXT FLOATING / SCALING

.floating{
/*float: left; */
display: inline-block; /* to make image center */
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;

}

@-webkit-keyframes Floatingx{
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px); }
}

@-moz-keyframes Floating{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}

.scaling{
/* float: left; */
display: inline-block; /* to make image center */
-webkit-animation-name: scalex;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-name: scale;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-in-out;
}

@-webkit-keyframes scalex{
from {-webkit-transform: scale(0.9);}
65% {-webkit-transform: scale(1.0);}
to {-webkit-transform: scale(0.9);}
}

@-moz-keyframes scale{
from {-moz-transform: scale(0.9);}
65% {-moz-transform: scale(1.0);}
to {-moz-transform: scale(0.9);}
}

Thursday, 14 September 2017

DlVl CSS KEN BURN EFFECT

Css ni buat slider atau image bergerak. untuk DlVl. Header atau slider.

ref : https://www.elegantthemes.com/blog/divi-resources/ken-burns-effect-divi

.kb-zoomout .et_pb_slide .et_parallax_bg {
animation: zoomout 7s forwards;
-ms-animation: zoomout 7s forwards;
-webkit-animation: zoomout 7s forwards;
-0-animation: zoomout 7s forwards;
-moz-animation: zoomout 7s forwards;

}

.kb-zoomin .et_pb_slide .et_parallax_bg {
animation: zoomin 7s forwards;
-ms-animation: zoomin 7s forwards;
-webkit-animation: zoomin 7s forwards;
-0-animation: zoomin 7s forwards;
-moz-animation: zoomin 7s forwards;

}

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
animation: zoomin-right 7s forwards;
-ms-animation: zoomin-right 7s forwards;
-webkit-animation: zoomin-right 7s forwards;
-0-animation: zoomin-right 7s forwards;
-moz-animation: zoomin-right 7s forwards;

}

.kb-zoomout-right .et_pb_slide .et_parallax_bg {
animation: zoomout-right 7s forwards;
-ms-animation: zoomout-right 7s forwards;
-webkit-animation: zoomout-right 7s forwards;
-0-animation: zoomout-right 7s forwards;
-moz-animation: zoomout-right 7s forwards;

}

.kb-zoomout .et_parallax_bg {
animation: zoomout 17s forwards;
-ms-animation: zoomout 17s forwards;
-webkit-animation: zoomout 17s forwards;
-0-animation: zoomout 17s forwards;
-moz-animation: zoomout 17s forwards;

}

.kb-zoomin .et_parallax_bg {
animation: zoomin 17s forwards;
-ms-animation: zoomin 17s forwards;
-webkit-animation: zoomin 17s forwards;
-0-animation: zoomin 17s forwards;
-moz-animation: zoomin 17s forwards;

}

.kb-zoomin-right .et_parallax_bg {
animation: zoomin-right 7s forwards;
-ms-animation: zoomin-right 17s forwards;
-webkit-animation: zoomin-right 17s forwards;
-0-animation: zoomin-right 17s forwards;
-moz-animation: zoomin-right 17s forwards;

}

.kb-zoomout-right .et_parallax_bg {
animation: zoomout-right 7s forwards;
-ms-animation: zoomout-right 17s forwards;
-webkit-animation: zoomout-right 17s forwards;
-0-animation: zoomout-right 17s forwards;
-moz-animation: zoomout-right 17s forwards;

}

@keyframes zoomout{
0% {
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100% {
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;

}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomout-right{
0%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin-right{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);

}
}

CSS Image zoom on hover

.image-zoom img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}

.image-zoom img:hover{
transform:scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform:scale(1.1);
}

.image-zoom-constrained {
overflow:hidden;
}

Refer : http://www.twobluetoucans.co.uk/divi/image-hover-zoom-effect-divi/

/* -------- Media equiry ------------------*/

/* above 1400 the default sizes are used */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
/* tablets and desktop */
.image-zoom {
max-width:400px !important;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
/* tablets and desktop */
.image-zoom {
max-width:220px !important;
}
}
@media only screen and (min-width: 980px) and (max-width: 1099px) {
/* tablets and desktop */
.image-zoom {
max-width:200px !important;
}
}
/* below 980 Divi takes moves to a single column layout */
@media only screen and (max-width: 979px) {
/* landscape phones */
}
@media only screen and (max-width: 979px) and (orientation: portrait) {
/* portrait phones */
}

----------------------------------- script ---------------------------------

$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".zoom img").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
//Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
//"-webkit-filter": "blur(" + (scroll/200) + "px)",
//filter: "blur(" + (scroll/200) + "px)"
});
});

Wednesday, 13 September 2017

Video without player button auto play & loop

<video autoplay="autoplay" id="video" preload="preload" width="800" height="480">
<source src="video/t12.webm" type="video/webm"></source>
<source src="http://nucleus.fanatikapps.com/wp-content/uploads/2017/09/Sequence-02_1.mp4" type="video/mp4" height="42" width="42"></source>
</video>

Autoplay Video Youtube

Animate Product Presentation Wordpress

Nak buat produk animasi. Gunalah Animate It.
https://wordpress.org/plugins/animate-it/

Tuesday, 12 September 2017

Add font-awesome on header

Tampal link bawah ni kat bahagian <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Friday, 8 September 2017

Woocommerce button shortcode without price

There are 2 method to bypass the woocommerce button.

1. Shortcode

[add_to_cart id="812" show_price="false"]

2. Use this url ( change the url.com to your url) then add it to your button

http://url.com/?add-to-cart=357

Plugin need to be install if you are using woocommerce to by pass the add to cart. Follow the setting images bellow

WooCommerce Direct Checkout

Thursday, 7 September 2017

Wordpress dan buddypress geledah

Disable admin bar yang ada log in untuk visitor https://dfactory.eu/wp-how-to-remove-disable-admin-bar/

/* Plugin yang aku gunakan untuk setup media sosial guna wordpress dan buddypress */

Activity Reactions For Buddypress
Admin Custom Login - Customize Your WordPress Login Screen Amazingly
AG Custom Admin
All-in-One WP Migration
BP Redirect To Profile
BuddyPress
BuddyPress Activity Autoloader
BuddyPress Activity Plus
BuddyPress Activity ShortCode
BuddyPress Activity Social Share
BuddyPress Cover Photo
BuddyPress Notifications Widget
Divi Builder
G1 Socials
Hide/Unhide Menu for Guest/Member
LH Private BuddyPress
MailChimp for WordPress
Menu Icons
rtMedia for WordPress, BuddyPress and bbPress
Simple Custom CSS
Snax
Three Column Screen Layout
Transcoder
Widget Options Phpbits Creative Studio
Yoast SEO

Monday, 14 August 2017

Divi Custom CSS

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

.et_fullscreen_slider .et_pb_slides,
.et_fullscreen_slider .et_pb_slide,
.et_fullscreen_slider .et_pb_container {
min-height: 100% !important;
height: 100% !important;
}

@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important; } }

.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}

Wednesday, 2 August 2017

INSTALL IONIC ON WINDOWS

http://ionicframework.com/docs/v1/guide/installation.html
http://git-scm.com/download/win
http://nodejs.org/
$ npm install -g ionic [ installing ionic ]
$ ionic start todo blank --type ionic1 [ start blank project ]
$ cd [ find location of your save project ]
$ ionic serve [ opening for local host ]
install visual studio to sync with ionic

https://cygwin.com/install.html <-- malik was using this when i facing problem to install ionic for the second time on windows.

Friday, 28 July 2017

Disable right click

<!-- Disable Right-click -->
	<script type="text/javascript" language="javascript">
	jQuery(function($) {
	$(this).bind("contextmenu", function(e) {
	e.preventDefault();
	});
	});
	</script>
	<!-- END of Disable Right-click -->

Sunday, 23 July 2017

FORM SETUP ON formspree.io

Read this to setup

https://formspree.io/

test your form code here

http://testformspree.com/

Monday, 17 July 2017

Typography - Fallback (UX)

If the first font unable/uninstalled, use the next one (Fallback)

Earlier, you learned that users must have the fonts specified in the stylesheet installed on their computer in order for their browser to display that font. What happens when a font is not installed on a user's computer?

Most computers have a small set of typefaces pre-installed. This small set includes serif fonts and sans-serif fonts, like Times New Roman and Arial, respectively.

When the stylesheet specifies a font not installed on a user's computer, the pre-installed fonts can be used as fallback fonts for users.

To use fallback fonts, the following syntax is required:

h1 { font-family: Garamond, Times, serif; }

The CSS rule above says: "Use the Garamond font for all <h1> elements on the web page. If that font is not available, use the Times font.

If both of those fonts are not available, use any serif font pre-installed on the user's computer." The fonts specified after Garamond are the fallback fonts.

Fallback fonts help ensure a consistent experience for the diverse audience of users that visit a site.

Typography (UX)

The practice of typography has been around for centuries! Over time, typographers have refined their craft and have developed many different typefaces, which has allowed them, in some cases, to classify them as one of the following two types: serif fonts and sans-serif fonts.

Serif - the letters in these fonts have extra details on the ends of each letter. Examples include fonts like Times New Roman or Georgia, among others.
Sans-Serif - the letters in these fonts do not have extra details on the ends of each letter. Instead, letters have straight, flat edges. Some examples include Arial or Helvetica.

MEASUREMENT

There are three units of measurement for font size:
1. px - Represents the unit of pixels. The display of a computer monitor can be measured in pixels. A pixel is a small point on the display. How small? Most computer monitors have a resolution of 72 pixels per inch, so a pixel represents about 1/72nd of an inch. Pixels are sometimes also referred to as points. Pixels are used to set the exact size of an element, in this case, text.


p {
  font-size: 18px;
}

2. ems - Pronounced just as it looks, "em." An em is equal to the width of the letter "m". Ems are a relative unit of measurement. They change the size of text relative to the parent element's size of text.


p {
  font-size: 1.3em;
}

3. % - Percentages are also a relative unit of measurement. The default size of text in web browsers is 16 pixels, or 16px. When percentages are used, they set the size of text relative to this default size. For example, setting the font size to 200% would be equivalent to setting it to 32px.


p {
  font-size: 150%;
}