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.

CSS: Custom Scrollbar

Nov
22

custom-scrollbar

/* Let's get this party started */
::-webkit-scrollbar {
    width: 9px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background: rgba(242,242,242,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    cursor: pointer !important;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(242,242,242,0.3); 
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(242,242,242,0.5); 
}

Reference: Custom Scrollbar

HTML5 & CSS3: Sticky Footer

Oct
27
Sticky Footer

Sticky Footer

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kklw</title>
    <link rel="stylesheet" href="./embed/bootstrap/default/bootstrap.min.css" />
    <link rel="stylesheet" href="./embed/bootstrap/fonts/font-awesome.min.css" />
</head>

<body>

<div id="wrapper">

<header></header>


<div id="content"></div>


<div id="footer"></div>

    </div>

</body>

</html>
div#wrapper{
  min-height:100%;
  position:relative;
  background-color:blue;
}

body{
  padding:0;
  height:100%;
  background-color:grey;
}

div#content{
  padding-bottom:200px;
}

div#footer{
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  left:0;
  background-color:black;
}

header{
  width:100%;
  min-height:200px;
  background-color:red;
}

html{
  height:100%;
  margin:0;
}

Source code: <a href=”https://github.com/nasrulhazim/bootstrap-studio-samples/tree/master/sticky-footer”>Sticky Footer</a>

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

Training – PHP & MySQL: Basic to Advanced

Jan
02

Bootstrap: Show and Hide Loading Icon in Modal (option Remote used)

Jul
08

Problems:

  1. Need to load remote content
  2. Need to display a loading indicator
  3. Need to ensure each time modal display, it’s request new modal body content

Following are the solutions, however…

I’m looking for solutions using event handler instead of using a timer, .change() in jQuery does not monitor the html value change.

&lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-header&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Ă—&lt;/button&gt;
    &lt;h3&gt;Details&amp;nbsp; &lt;img src=&quot;/img/loading-tiny.gif&quot; alt=&quot;loading...&quot; id=&quot;modal-loading&quot; class=&quot;hidden&quot;&gt;&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div id=&quot;modal-body&quot; class=&quot;modal-body&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;modal-footer&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;a onclick=&quot;viewRemoteModal()&quot;&gt;View Modal&lt;/a&gt;
var t; // a timer variable
function viewRemoteModal() {
    $('#myModal .modal-body').removeData(); // clean up modal body content
    $('#modal-loading').removeClass('hidden'); // display the loading icon
    t = setInterval(function(){
        // check if modal body is not empty, hide loading icon
        // time interval of 500ms to check the modal body content
        if($('#myModal .modal-body').html() != '')
        {
            $('#modal-loading').addClass('hidden');
            window.clearInterval(t);
        }
    },500);
    // open up modal using remote option
    $('#myModal').modal({
        'remote': 'http://www.google.com.my',
        'show': true
    });
}

Foundation: Startup

May
01

Download Foundation and Foundation Icon.

&lt;!doctype html&gt;
&lt;html class=&quot;no-js&quot; lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Foundation | Welcome&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/foundation.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/foundation-icons.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/learn.css&quot; /&gt;&lt;!-- Your own set CSS --&gt;
    &lt;script src=&quot;js/vendor/modernizr.js&quot;&gt;&lt;/script&gt;
    &lt;!--[if lte IE 8]&gt;&lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- Layout Start --&gt;
    &lt;!-- PUT YOUR LAYOUT, CONTENT HERE --&gt;
    &lt;!-- Layout End --&gt;
    &lt;script src=&quot;js/vendor/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/foundation.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).foundation();
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

GeoServer – GetFeatureInfo Template Data Model (structure)

Mar
21

Extend from this GeoServer – Custom Get Feature Info Display

Knowledge requirement – Freemaker

The standard template files is header.tpl, content.tpl, footer.tpl.

header.tpl usually where JavaScript, CSS, meta tag, title placed here.

footer.tpl where you put your HTML page footer, Copyright, etc.

content.tpl where we going to iterate through all the features to display interactive UI. But here, I’m going to explain the structure of all available variables.

/**
features (array of Feature)
	[0]
		- fid
		- typeName
		- attributes
			-&gt; name
			-&gt; type
			-&gt; isGeometry
			-&gt; value
		- type
			-&gt; name
			-&gt; title
			-&gt; abstract
			-&gt; description
			-&gt; keywords
			-&gt; metadataLinks
			-&gt; SRS
			-&gt; nativeCRS
	[n]
	
type (object of Feature Map)
	- name
	- attributes
		-&gt; name
		-&gt; type
		-&gt; isGeometry
**/

Accessing the variables as following:

&lt;!-- Accessing Feature Type Name --&gt;
&lt;h3&gt;${type.name}&lt;/h3&gt;

&lt;!-- Accessing Features at index 0 and assign to a variable named feature --&gt;
&lt;#assign feature = features[0]&gt;

&lt;!-- Get feature's attributes values and assign to a variable named attrs --&gt;
&lt;#assign attrs = feature.attributes&gt;

&lt;!-- Display an attribute --&gt;
&lt;p&gt;${attr.someFieldName.value}&lt;/p&gt;

The result may display as below:

This is type name

some field name value

Reference: http://docs.geoserver.org/2.1.4/user/tutorials/freemarker.html

WordPress – Using Bootstrap in Custom Theme

Mar
06

Create a folder name custom_theme containing index.php,header.php,footer.php,functions.php and style.css.

Download Bootstrap and extract it into custom_theme folder.

Now the structure should be as following:

Custom Theme for WordPress

Custom Theme for WordPress

Custom theme should be save in $WORDPRESS_DIRECTORY/wp-content/themes/$THEME_NAME.

For header.php, include the following:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
		&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
		&lt;link href=&quot;&lt;?php bloginfo('stylesheet_url');?&gt;&quot; rel=&quot;stylesheet&quot;&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;?php wp_enqueue_script(&quot;jquery&quot;); ?&gt;
		&lt;?php wp_head(); ?&gt;
	&lt;div id=&quot;wrap&quot;&gt;
		&lt;div class=&quot;container&quot;&gt;

For index.php, include the following:

&lt;?php

get_header();

// ======= Start: Content Here =======			

// ======= End: Content Here =========	

get_footer(); 

?&gt;

For footer.php, include the following:

			&lt;/div&gt;
		&lt;/div&gt;
		
		&lt;hr&gt;

		&lt;footer&gt;
			&lt;p style=&quot;text-align: center;&quot;&gt;&amp;copy; Your Website Name &lt;?php echo date('Y'); ?&gt;&lt;/p&gt;
		&lt;/footer&gt;

		&lt;?php wp_footer(); ?&gt;
	&lt;/body&gt;
&lt;/html&gt;

For functions.php, include the following:

&lt;?php

function wpbootstrap_scripts_with_jquery()
{
	// Register the script like this for a theme:
	wp_register_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.js' , array('jquery') );
	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script( 'bootstrap-script' );
}

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?&gt;

For style.css, include the following:

@import url('css/bootstrap.css'); 
@import url('css/bootstrap-responsive.css');

Reference: How to Build a Responsive WordPress Theme with Bootstrap

More reading about custom theme & functions can be use, please visit WordPress Functions.

UI – Bootstrap

Jan
30

An easy way to setup a nice & clean UI, and responsive UI.

Bootsrap use HTML5 & CSS3. Please ensure you have the following:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  ...
&lt;/html&gt;

Include the following in head

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
&lt;link href=&quot;css/bootstrap-responsive.min.css&quot; rel=&quot;stylesheet&quot;&gt;

Include the following at the bottom – before end of body tag – to make sure the page load fast.

&lt;!-- I use jQuery 1.9.0 --&gt;
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

Here is the screen shot of my test. đŸ™‚

Bootstrap Test

Bootstrap Test