Nasrul Hazim Bin Mohamad

System Development: Must Have 3rd Party Library

Dec
22

A list of useful libraries used for system development – such as uploading, sorting, beautiful alert messages.

So, you don’t have to stick to those old schools methods for all the above. 🙂

ply

Ply, beautiful alert messages and even you can customize for login or registration modal.

DropzoneJS, similar to WordPress uploading Media.

DropzoneJS, similar to WordPress uploading Media.

sortable

Sortable, useful when it’s come to sort out your staff list for instance, or probably you have a list of products need to be sort.

Bootstrap, CSS3, Development, HTML5, JavaScript, jQuery , , , , , , , 0 Comment

Slide in Elements

Dec
17

CSS

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

jQuery

$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});

Reference: Bootstrap Theme “Company”

CSS, JavaScript, jQuery , , , 0 Comment

jQuery: Smooth Scrolling

Dec
17
 
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#back-to-top']").on('click', function(event) {

  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  });
})

Reference: Bootstrap Theme “Company”

JavaScript, jQuery , 0 Comment

WordPress: Custom Post Type Slider

Nov
29

Getting Light Slider

Download Light Slider here.

Then extract the content, copy the img, js and css in src directory into your WordPress Plugin folder.

Include Light Slider JavaScript & CSS

wp_enqueue_style( 'light-slider-css', plugin_dir_url( __FILE__ ) . 'css/lightslider.css', array(), $this->version, 'all' );
wp_enqueue_script( 'light-slider-js', plugin_dir_url( __FILE__ ) . 'js/lightslider.js', array( 'jquery' ), $this->version, false );

Add Some Padding to the item and set link to white

<style type="text/css">
  .lslide {
    min-height: 250px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  .lSSlideOuter .lSPager.lSpg > li a {
    background-color: white !important;
  }
</style>

Getting posts

$posts = wp_get_recent_posts( ['numberposts' => 5,'category_name' => 'Announcement'], OBJECT );

The View Part

<?php $index = 0; ?>

<ul id="light-slider">
  <?php foreach ($posts as $key => $value): ?>
    <li>
      <h4 style="color:white !important;font-style: bold !important;"><?= $value->post_title; ?></h4>
      <p style="color:white !important;"><?= strip_tags($value->post_content, ['p','span']); ?></p>
      <a href="<?= $value->guid; ?>" style="color:white !important;text-decoration: underline;float: right;"><?php echo (get_locale() != 'ms_MY') ? 'Read More':'Baca Lagi'; ?></a>
    </li>
    <?php $index++; ?>
  <?php endforeach ?>
</ul>

Final Part: initialize the Light Slider

jQuery(document).ready(function($) {
    jQuery("#light-slider").lightSlider({auto:true,item:1,speed:1000});
});

Result

lkim-slider

lkim-slider

WordPress Post Slider available here

Bootstrap, HTML5, jQuery, Wordpress , , , 0 Comment

Bootstrap Studio: Demos

Oct
26

Bootstrap Studio, is a powerful web design tool for creating responsive websites using the Bootstrap framework.

Here are some screen shots that I have when working with it. An awesome desktop application, recommended for frond-end developer, reducing time spent for front-end development.

Carousel

Carousel

Columns Sizing

Columns Sizing

Options for Columns

Options for Columns

CSS Panel

Similar to Chrome Developer Tools CSS Panel

For Dekstop

For Dekstop

The Files

The Files

The Files

The Files

For Desktop

For Desktop

For Mobile

For Mobile

Source Code

Clean Source Code Generated

Here are some samples that I’m able to create with Bootstrap Studios. Hope you guys enjoy it.

Source code available here

  1. Carousel (component available in BS 1.0.9)
  2. Simple Login

Here are the summary from my experience using Bootstrap Studio:

      Reducing time spent for front-end development
      Doing two job at one time – design & write codes
      Lightweight and easy-going UI

Anyways, before you consider to buy Bootstrap Studio, please make sure that you’re understand how HTML5, CSS3, JavaScript works, and of course Twitter Bootstrap itself, else, you might get confusing or too dependent with the tool.

Happy Bootstrapping!

Bootstrap, HTML, HTML5, JavaScript, jQuery , , , , , 0 Comment

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit – https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration – https://bit.ly/training-mobile-app-android-config
  3. API Template – https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration – http://bit.ly/android-config-xml
  3. Chrome Device Mode – http://bit.ly/chrome-device-mode

 

Android, Bootstrap, Data Structure, Database, Development, Git, HTML, HTML5, JavaScript, JDK, jQuery, jQuery Mobile, JSON, MVC, PHP, PHP ActiveRecord, Slim Framework, Training , , , , , , , , , , 0 Comment

jQuery Mobile: Set Selected Item for jQM Select

Jul
31

There’s a minor different how to set selected item in drop down list in jQuery Mobile. We can’t set by using standard jQuery $().val(value);. Here the workaround

$("#selector option[value='your-value']").attr('selected', 'selected');  
$('#selector').selectmenu('refresh');

Reference: Is there a way to set the selected value in JQM select?

JavaScript, jQuery, jQuery Mobile , , , 0 Comment

Bootstrap DatePicker I18N – Malay

Jun
24

Setting up for Malay Language. Copy & paste the following, save it as bootstrap-datepicker.my.js and include in your HTML pages as needed.

$.fn.datepicker.dates['my'] = {
    days: ["Ahad", "Isnin", "Selasa", "Rabu", "Khamis", "Jumaat", "Sabtu"],
    daysShort: ["Ahd", "Isn", "Sel", "Rab", "Kha", "Jum", "Sab"],
    daysMin: ["Ah", "Is", "Sl", "Rb", "Kh", "Jm", "Sa"],
    months: ["Januari", "Februari", "Mac", "April", "Mei", "Jun", "Julai", "Ogos", "September", "Oktober", "November", "Disember"],
    monthsShort: ["Jan", "Feb", "Mac", "Apr", "Mei", "Jun", "Jul", "Ogo", "Sep", "Okt", "Nov", "Dis"],
    today: "Hari Ini",
    clear: "Bersihkan"
};

Sample usage:

$('.input-daterange').datepicker({
    language: 'my',
    format: "MM yyyy",
    startDate: "Januari 2000",
    minViewMode: 1
});
Bootstrap DatePicker - Malay

Bootstrap DatePicker – Malay

Reference: Bootstrap DatePicker I18N

Bootstrap, HTML, HTML5, JavaScript, jQuery , , , 0 Comment

jQuery: Create Loading Indicator with ajaxSend & ajaxComplete

May
27

Referring to my earlier post jQuery: Show Loading…, a better way to show & hide loading icon – by binding to ajaxSend and ajaxComplete event.

The Html Markup

 <div id="loading" class="overlay-loading">
    <i class="loading-icon fa fa-5x fa-circle-o-notch fa-spin"></i>
 </div>

The CSS

.overlay-loading {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 2000;
}
.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
}

The JavaScript

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

References:

  1. Ajax Events
  2. JsFiddle
  3. FontAwesome
CSS, CSS3, HTML, HTML5, JavaScript, jQuery , , , , 0 Comment

jQuery: Get Non-empty Text Area Inputs

May
08

Simple solutions to get non-empty text area inputs. Let say you have a list or text area like the following:

<textarea name="remark[about_us] id="remark-about_us"></textarea>
<textarea name="remark[about_us2] id="remark-about_us2"></textarea>
<textarea name="remark[about_us3] id="remark-about_us3"></textarea>
<textarea name="remark[about_us4] id="remark-about_us4"></textarea>
<textarea name="remark[about_us5] id="remark-about_us5"></textarea>

var remarks = $('[name^=remark]');
$.each( remarks, function( index, value ){
	var remark = $.trim($('#'+value.id).val());
	if(remark.length != 0) { 
		console.log(value.id + ' - ' + value.value);
	} else {
		console.log(value.id + ' - empty');
	}
});

Here a sample I have on my current working project.

Get Non-Empty Text Area

HTML, HTML5, JavaScript, jQuery , , , 0 Comment