Mobile Menu with Flex

Here is the simple menu using flex.

See the Pen NEzKJK by hari (@zenasen) on CodePen.

The explanation of the code:

To make the full height menu, the secret is flex.

What we need first is the parent to have height 100%;

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

The main point is parent (ul) should have style :
display:flex;
flex-direction:column;

flex-direction => make the li element become going to down or become a row

For the children(li)< we need to give style :
flex: 1;

flex:1 => this code make the li element have the full height of the parent with the even distribution for each li element

Standard html menu :

The Style :

html, body{
 height:100%;
 padding:0px;
 margin:0px;
}
.menu-container{
 width:350px;
 height:100%;
 background:#eee;
 padding:10px;
 box-sizing:border-box;
}
.menu{
 height:100%;
 list-style:none;
 padding-left:0px;
 margin:0px;
 display:flex;
 flex-direction:column;
 overflow-Y:scroll
}
.menu::-webkit-scrollbar {
 width:4px;
}
.menu::-webkit-scrollbar-track {
 background:rgba(0,0,0,0.3);
}
.menu::-webkit-scrollbar-thumb {
 background-color: #000;
}
.menu>li{
 border:1px solid #000;
 border-bottom:0px;
 box-sizing:border-box;
 position:relative;
 flex: 1;
 transition:all ease 0.5s;
 min-height:70px;
}
.menu>li:last-child{
 border-bottom:1px solid #000;
}
.menu>li>a{
 display:block;
 width:100%;
 height:70px;
 line-height:50px;
 padding:10px;
 box-sizing:border-box;
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 transition:all ease 0.5s;
}
span.caret{
 display:block;
 min-height:50px;
 height:100%;
 width:50px;
 background:yellow;
 position:absolute;
 top:0px;
 right:0px;
 transition:0px;
 transition:all ease 0.5s;
 cursor:pointer;
}
.menu>li.aktif>a{
 height:50px;
 line-height:30px;
 top:0px;
 transform:translateY(0%);
 z-index:3;
}
.menu>li.aktif>span.caret{
 height:50px;
 z-index:4;
}
.submenu{
 position:absolute;
 top:50px;
 max-height:0px;
 overflow:hidden;
 transition:all ease 0.5s;
 background:#00000055;
 width:100%;
 box-sizing:border-box;
}
.menu>li:nth-of-type(2) .submenu.aktif{
 max-height:126px;
}
.menu>li.aktif:nth-of-type(2){
 min-height:176px;
}
.menu>li:nth-of-type(3) .submenu.aktif{
 max-height:90px;
}
.menu>li.aktif:nth-of-type(3){
 min-height:140px;
}

The Javascript :

$( document ).ready(function() {
  $("span.caret").click(function(){
    var parent_li = $(this).parent("li");
    var submenu = $(this).next();
    if(parent_li.hasClass("aktif") === false){
      parent_li.addClass("aktif");
      setTimeout(function(){
        submenu.addClass("aktif");
      }, 500);
    }else{
      submenu.removeClass("aktif");
      setTimeout(function(){
        parent_li.removeClass("aktif");
      }, 500);
    }
  });
});

Simple Fixed Header on Srolling

With all the website project I've been working, I already seen something in common. One of those thing is a header. So, here is the 2 header with simple fixed header on scrolling.

1. Header Hide

This header is hide when we scroll the page to bottom by 50px from top, but when you scrolling up, it will shown. I like the header, since we can see all the page without disturbed by header menu, But, some time I miss the header. lol :D

Here is the code :

See the Pen Scrolling Header #1 by hari (@zenasen) on CodePen.

2. Header Shrink

This header is shrink or more tight when we scroll the page to bottom by 50px, but when you scrolling up till you reach the top, the header will grow larger. 

Here is the code :

See the Pen Scrolling Header #2 by hari (@zenasen) on CodePen.

How To Create Widget in Siteorigin Wordpress

Paste this code in Theme > function.php

// this for hook 
function my_awesome_widgets_collection($folders){
    $folders[] = dirname(__FILE__).'/../widgets/';
    return $folders;
}
add_filter('siteorigin_widgets_widget_folders', 'my_awesome_widgets_collection');


// this for add new widget group
function imm_add_widget_tabs($tabs) {
    $tabs[] = array(
        'title' => __('Imm Widgets', 'imm_widget'),
        'filter' => array(
            'groups' => array('imm_widget')
        )
    );

    return $tabs;
}
add_filter('siteorigin_panels_widget_dialog_tabs', 'imm_add_widget_tabs', 20);

hook.php is place where i code on top.

widgets folder is place for all widget

the widget we use as example is imm-carousel

Folder Structure.

 
//***
<?php
/*
Widget Name: Imm Carousel
Description: Carousel
Author: Hari Seanli
Author URI: https://www.islandmediamanagement.com/
Widget URI: https://www.islandmediamanagement.com/,
Video URI: https://www.islandmediamanagement.com/
*/

class Imm_Carousel_Widget extends SiteOrigin_Widget {

 function __construct() {
     //Here you can do any preparation required before calling the parent constructor, such as including additional files or initializing variables.

     //Call the parent constructor with the required arguments.
     parent::__construct(
         // The unique id for your widget.
         'imm-carousel',

         // The name of the widget for display purposes.
         __('Imm Carousel Widget', 'imm-carousel-widget-text-domain'),

         // The $widget_options array, which is passed through to WP_Widget.
         // It has a couple of extras like the optional help URL, which should link to your sites help or support page.
         array(
             'description' => __('A hello world widget.', 'hello-world-widget-text-domain'),
             'help'        => 'http://example.com/hello-world-widget-docs',
             'panels_groups' => array('imm_widget')
         ),

         //The $control_options array, which is passed through to WP_Widget
         array(
         ),

         //The $form_options array, which describes the form fields used to configure SiteOrigin widgets. We'll explain these in more detail later.
         array(
             'text' => array(
                 'type' => 'text',
                 'label' => __('Hello world! goes here.', 'siteorigin-widgets'),
                 'default' => 'Hello world!'
             ),
         ),

         //The $base_folder path string.
         plugin_dir_path(__FILE__)
     );
 }

 function get_template_name($instance) {
     return 'imm-carousel-template';
 }

 function get_template_dir($instance) {
     return 'hw-templates';
 }

}
siteorigin_widget_register('imm_carousel_widget', __FILE__, 'Imm_Carousel_Widget');



?>

<div>
    <?php echo wp_kses_post($instance['text']) ?>
</div>

Json Object

Json object in Js Example :

var datapost = {'id':'01'};
datapost.nama = "i wayan xxx";

when you call it

 console.log(datapost);

it will shown like below

{
id: "01", 
nama: "i wayan xxx"
}

Create Array In Javascript

Simple Array example :

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon", "Pineapple");

Array with key

var ska_bidang_data = [{id:"00",nama_bidang:"ARSITEKTUR"}];
ska_bidang_data.push({id:"01",nama_bidang:"ARSITEKTUR"});
ska_bidang_data.push({id:"02",nama_bidang:"SIPIL"});