WBDSGNR - Real Life Implement

Saturday, 16 September 2017

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%;
}

User Experience (UX)

Colors are an important aspect of the user experience (UX), but an overview of UX is not complete without a focus on fonts. It's very likely that a lot of the important information a user will see on a web page will be in the form of text. Styling text to make web page content accessible and visually engaging creates a great experience for users.

h1 {
  font-family: Garamond;
}

In the example above, the font family for all main heading elements has been set to Garamond.

When setting typefaces on a web page, keep the following points in mind:

The font specified in a stylesheet must be installed on a user's computer in order for that font to display when a user visit the web page. We'll learn how to work around this issue in a later exercise.
You've probably noticed that we haven't been specifying a typeface in previous exercises of this course. How exactly does the browser know what typeface to use when displaying the web page? The default typeface for all HTML elements is Times New Roman. You may be familiar with this typeface if you have ever used a formatted word processor.
It's a good practice to limit the number of typefaces used on a web page to 2 or 3.
When the name of a typeface consists of more than one word, it must be enclosed in double quotes (otherwise it will not be recognized), like so:

Sources : codecademy.com

Tuesday, 16 May 2017

Fixed Div On Top (for menu/image)

CSS

.fixed{
position:fixed;
top:0;
z-index: 1;
width:800px;
height:100%;
background-image:url(img/reminder.jpg);
background-repeat: repeat-x;
}

add this on content

<div class='fixed' ></div>

Floating menu

http://www.quackit.com/css/codes/css_floating_menu.cfm

Sunday, 12 February 2017

Iframe base Website

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Test Layout</title>
        <style type="text/css">

html,body
{
height: 100%;
margin: 0;
padding: 0;
}

        </style>

    </head>
    <body> <table><center>
       <iframe id="AlertMaintenance" scrolling="no" style="border-style: none; border-color: inherit; border-width: 0px; height:450px; width:50%;" src="http://khat.muhaza.com"></iframe>

<iframe id="DelayReason" style="border-style: none; border-color: inherit; border-width: 0px; height:450px; width:50%;" src="http://muhaza.com"></iframe>
     </center> </table></body>
</html>

IFrame remove border

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0">
</iframe>

Instead Iframe

Friday, 10 February 2017

Open Multiple Link Using One Link

 <a href="http://virtual-doctor.net" onclick="window.open('http://runningrss.com');
return true;">multiopen</a>

Hidden Div in Mobile View

@media screen and (max-width: 600px) {
#site-generator .powered {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

Tuesday, 6 January 2015

My Step To Step On Wordpress Ecommerce

Buy From Cpanel
Install wordpress
Choose template
find woocommerce widget
add on (Done! Part1)
Then Something happened my registration emai keep viewing wordpress@domain.com.
here the solution

You can overwrite this by modifying the functions.php file that is located within your theme.
This file can be accessed via Appearance ->Editor and look for Theme functions OR by FTP wp-content/themes/whatevertheme/functions.php
Add the following (but modify "admin@domainaddress.com" and "Your Blog" to match what you want the display email address and 'from' field to show)

add_filter('wp_mail_from', 'new_mail_from');
add_filter('wp_mail_from_name', 'new_mail_from_name');

function new_mail_from($old) {
 return 'admin@domainaddress.com';
}
function new_mail_from_name($old) {
 return 'Your Blog';
}

And then having problem when the wordpress Icon still viewed on the admin bar.
go to theme> find Function.php

paste this.

add_action( 'wp_before_admin_bar_render', function() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('wp-logo');
}, 7 );

Then I choose lot of plug in

Workpress social log in
Buddy press
advance random post

Then All Done! Thank God Alhamdulillah.

Saturday, 3 January 2015

scroll to top

--html--

<div id="content">Scroll ↓</div>
<a href="#" id="back-to-top" title="Back to top">↑</a>

--css--
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #e9ebec;
}
#back-to-top.show {
    opacity: 1;
}
#content {
    height: 2000px;
}

---js--
if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}

Monday, 18 September 2017