Technical Session on Building a Rich Web Application at DotNetters Tech Summit 2015- NUB

On 14th November, 2015, DotNetters organized an event for the students of Northern University Bangladesh (NUB) where 4 speakers given different concepts on latest technologies and their importance on real world projects. Also students were advised on how they can start their career and what necessary technologies they need to learn to work in a professional software companies.

I mainly focused on how they can build a web application which would be rich in functionalities and user experience. Also gave them a short description about what technologies they need to learn and for their university project how then can create  a rich web application.

Click here to see the event page on Facebook and follow DotNetters on Facebook to know their recent activities and next events.

Technical Session on Single Page Application at DotNetters Tech Summit 2015- RUET

On 6th June, 2015, DotNetters organized an event for the students of Rajshahi University of Engineering & Technology (RUET) where 7 speakers given some basic concepts on latest hot technologies and their importance on real world projects.

I talked about Single Page Applications and some key factors of developing a project using this model. My presentation also covered what kind of projects are best suited to SPA model and what basic things they need to learn to start making their first Single Page Application.

Here is the slide of my presentation:



Click here to see the event page on Facebook and follow DotNetters on Facebook to know their recent activities and next events.

MatEffects- A jQuery Pack Based On Material Design (Documentation)

Index

• Introduction
• Usage
  • Color Slider
  • Over View
  • Section Navigator
  • Group Slider
• Conclusion
• View Demo

Introduction

MatEffects is a jQuery plugin based on Google's Material Design guide. With this plugin you can easily add some modern effects on your website. Currently this plugin has four different animations. This article shows how you can add this plugin into your website. You'll get this documentation after you purchase this.

Usage

MatEffects is a jQuery plugin, meaning that it extends the jQuery JavaScript library to include extra functionality. First, you must include the jQuery library's source before you include the source of any jQuery plugin. It's recomended that you use jquery ui library as well to get easing effects. You can download latest version of jQuery library from here and jQuery UI library from here. Then add MatEffect's additional files like jquery.mateffects.js and mateffects.css. There is also an image folder which is necessary as well and you have to add it in the same folder where your mateffects.css file is placed. Also it is my recommendation that you add this source file in head tag.

Now you can call different MatEffect's function to generate different effects. There are 4 types of animation you can create.

Color Slider

This function will create an hover effects that is shown on this demo. Also you can check the color-slider.html file that is provided with the downloaded package. This is mainly an hover effect. Whenever user will mouse hover on any element, some color will slide from any given direction and after hovering out, it will again slide back. Here is html of an element where we want to use this effect:

    

    

        
Slide From
        
Top
    

Now call below function to get Color Slider in the element with id divSliderTop:

$(document).ready(function () {
    $("#divSlideTop").ColorSlider({
        color: ['#00897b', '#00796b', '#00695c', '#004d40'],
        speed: 1500,
        easing: 'easeOutQuint',
        slideFrom: 'top',
        mouseEnter: function () {
            $("#divSlideTop").find(".effect-text").stop().animate({
                top: "55px"
            }, 1000, "easeOutQuint");
        },
        mouseLeave: function () {
            $("#divSlideTop").find(".effect-text").stop().animate({
                top: "75px"
            }, 1000, "easeOutQuint");
        }
    });
});

Here ColorSlider function will create a div element inside divSliderTop. Inside this div element it will generate another four div with the given 4 background color. So when user will mouse over it will slide those four color and bring the last color on the element and vice versa when you mouse out from the element. It also have callback function for mouseEnter and mouseLeave. Here are the options in detail:

Variable/Function	Default Value	Description
color	['#673ab7', '#3f51b5', '#2196F3', '#03a9f4', '#00bcd4', '#00acc1']	It will take any number of color array. Make sure you give '#' when you are giving color codes.
easing	linear	Easing effect for the animation.
speed	1200	Speed of the animation which will accept integer value and in milisecond unit.
slideFrom	"right"	This indicates from where the animation will show. It accepts four value in string format: "top", "right", "bottom", "left".
mouseEnter		This is a callback function which will call after the mouse hover on the element.
mouseLeave		This is another callback function which will call after mouse out from the element.

If you want to use this same effect in multiple element then you can call the ColorSlider function using class name as well.

Over View

This function will create a popup/modal effects that is shown on this demo. OverView is mainly a pop up or modal. It will always appear on top layer of your website's elements and always slide from right side. The main feature of this effect is, the modal will be devided into several part and all the part will animate separately and also animation back separately as well. Here is html of an element where we want to use this effect:

    

    
    

        

            

            
        
        

            
Over View Demo
        
        

            
Sed ut perspiciatis unde ... aliquam quaerat voluptatem.
        
    

Here on the parent div you have to use ov-container class and inside that div you have to use ov-body on the child div to help understand the function that which one is container and which one is the body of the plugin. This is what you must use:

 

    Any button to close over view
    

        .....
    

Now inside the div where ov-body class is given, you must place several number of div element which will be devided into separate element and OverView() will animate them separately. You can place any number of div element inside ov-body. Here is javascript part to call OverView function:

    
$(document).ready(function () {
    $("#divDemoA").OverView({
        easingIn: 'easeInCirc',
        easingOut: 'easeOutCirc',
        speed: 1300
    });

    $("#ancViewDemo").click(function () {
        $("#divDemoA").OverView('show');
    });

    $(".a-close").click(function () {
        $("#divDemoA").OverView('hide');
    });
});

Here first you have to initialize OverView with the div element. After that you can use $.fn.OverView("show") and $.fn.OverView("hide") to show and hide the over view. In the code above we have a button which id is ancViewDemo and by clicking it we are showing the over veiw and by click the .a-close button which is placed inside over view element, we are sliding it back. Here are the options in detail:

Variable/Function	Default Value	Description
easingIn	linear	Easing effect while the over view appears.
easingOut	linear	Easing effect while the over view slide back.
speed	1200	Speed of the animation which will accept integer value and in milisecond unit.
$("#OverViewId"").OverView('show');		By calling this function Overview will appear.
$("#OverViewId"").OverView('hide');		By calling this function Overview will slide back.

Section Navigator

This function will create a navigation that is shown on this demo. It's mainly a menu that will automatically generate on your website. For example lets assume you have following section on your html file. This is the body section of your page:

    

    

        .....
    
    

        .....
    
    

        .....
    
    

        .....
    

Here we have 4 sections in our webpage and we've given an unique id on each of them. Now here is the javascript part to call SectionNavigator:

   
$(document).ready(function () {
    $('body').SectionNavigator({
        sections: ['divFirst', 'divSecond', 'divThird', 'divFourth'],
        navigationClasses: ['home glyphicon glyphicon-home', 'nav-features glyphicon glyphicon-star', 'one glyphicon glyphicon-question-sign', 'two glyphicon glyphicon-file'],
        labels: ['Home', 'Features', 'One', 'Two'],
        prevButtonClass: "glyphicon glyphicon-chevron-up",
        nextButtonClass: "glyphicon glyphicon-chevron-down",
        easing: 'easeOutSine',
        speed: 700,
        afterNavigate: function (index) {
            //do something after navigating to that section
        }
    });
});

Here, as our sections are inside body tag so we are calling SectionNavigator with body. Here are the options in detail:

Variable/Function	Default Value	Description
sections	[]	This is an array of id of our sections inside body element.
navigationClasses	[]	This an array of classes that will be injected into the button of navigation. Make sure you use same number of array element that are given in sections array.
labels	[]	This is an array of name that you'll see after you hover on any button on the navigation. Again make sure you use same number of array element that are given in sections array.
prevButtonClass	""	This will take a single string of the class for previous button on the navigation. OverView will inject this class name on the previous button.
nextButtonClass	""	This will take a single string of the class for next button on the navigation. OverView will inject this class name on the next button.
easing	linear	Easing effect for the animation.
speed	700	Speed of the animation which will accept integer value and in milisecond unit.
afterNavigate		This is a callback function which will call after the window will scroll to the desired section. It will always send the index of your menu item as parameter.

This function will generate the navigation automatically. So for navigation you don't have to write any html code.

Group Slider

This function will create a slider that is shown on this demo. The main feature of this slider is, it will slide in a group and you can decide from where each slider will slide. There are two options, horizontally and vertically. Here is the html part of a slider:

    

        
        
        
        
    

        
        
    
    

        
        
    
    

        

            
Welcome!
            
This is Group Slider. This whole slider is working as one slider. You can add time bar and navigation if you want.
        
        

            
Other Options!
            
Easing effect, sliding speed, time are configurable in this slider. More details are given in the documentation.
        
    
    

        
        
        
    

        
        
        
        
    
    

        
        
    
    

        
    

This is the html that is shown on the demo. The main structure that you must follow is, there will be a parent div and inside that you can add several div element. Now inside the child div what will you provide is upto you. Like here some child div contains images and some contains another div with texts. Now another thing is, you have to tell each div whether it will slide horizontally or vertically. Use slide attribute here and it supports two value: horizontal and vertical. Here is the javascript part:

$(document).ready(function () {
    $("#divSlider").GroupSlider({
        easing: 'easeInOutCubic',
        speed: 1000,
        time: 5000,
        timebar: true,
        control: true
    });
});

Here is the options more in detail:

Variable/Function	Default Value	Description
easing	linear	Easing effect for the animation.
speed	1000	Speed of the animation which will accept integer value and in milisecond unit.
time	5000	Time is the time difference between each slide and it also accept integer value and in milisecond unit.
timebar	true	Timebar is the bar that that gives us an idea of after how much time the slide may rotate. It takes boolean value (true or false). For false it will not show.
control	true	Control is a set of buttons by which you can view next slide or previous slide or pause/play the slide. It also takes boolean value (true or false). For false it will not show.

Conclusion  

You can change CSS attribute from mateffects.css file so that the plugin match your website's style. 

Thank you very much for you interest on MatEffects. If you have any question then feel free to contact me from CodeCanyon or from my Website.

Callback Function After Angular Finished Data Binding

Download Source Files (version 1.0)

Introduction:

This article mainly focuses on a solution of a common problem that usually being faced doing projects with angular and other JavaScript Frameworks. It's recommended that a basic knowledge of Angular data binding and directive is required for reading this article. A demo application is also created to help understand the solution more in detail.

Problem:

Often we need to bind different JavaScript events or initialize Jquery plugin after ng-bind-html or ng-repeat finished binding. As most of the time the data is retrieved from AJAX call so it's hard to estimate exact time when the DOM will be ready to bind those events or initialize plugins for new loaded element. One very common example would be, when we make a custom dynamic menu where data are bound using ng-repeat and jQuery is used to make all the animation. So the jQuery function, which contains the animation code, must call after data loaded successfully and angular completed binding all the DOM elements.

Solution:

We can solve this problem by creating a custom directive and send a callback function to that directive. For ng-repeat the directive will check whether scope's last object has completed binding and after that it will call the given callback function. Now for ng-html-bind it will watch scope’s htmlElement has any value and when it will see a value, it will call the given callback function. So here is a generic directive that will work for both ng-repeat and ng-html-bind:

app.directive('ngcDone', function ($timeout) {
    return function (scope, element, attrs) {
        scope.$watch(attrs.ngcDone, function (callback) {

            if (scope.$last === undefined) {
                scope.$watch('htmlElement', function () {
                    if (scope.htmlElement !== undefined) {
                        $timeout(eval(callback), 1);
                    }
                });
            }

            if (scope.$last) {
                eval(callback)();
            }
        });
    }
});

Let me give a short description of what is happening here. But before that it is important to know what is directive.

Directives are markers of DOM element which allow you to play with that specific DOM element.

Here we have created a custom directive name ngc-done and sending a callback function as string. The reason for sending it as string is just to make this directive a generic one. Like here if we want call a function which is define under scope then we can give it like ‘scope.YourFunction’.

We’ve used $watch inside the directive’s definition to track changes of our directive. $watch is a great feature of Angular and it takes two parameters. One is the object or property that we like to watch or track changes and another is a listener which will be called if any change is detected. Now we have used two $watch here. One is to track change of our directive and another is to track change of scope’s htmlElement if $last is undefined.

Now the $last is a property of scope which is related to ng-repeat and it’s a Boolean type and it will return true here if ng-repeat has finished binding the last value or object.  $last will return undefined if there is no ng-repeat in the DOM element. If this directive is used in the same element where ng-html-bind is used then $last will be undefined and then it will start watching scope’s htmlElement. If htmlElement is not undefined then directive will invoke the given callback function.

Using the Code:

It is recommended to download the source and there are three examples showing how to use this directive. 2 examples showing how to bind dynamic jQuery menu plugin, one with ng-repeat and another with a ng-html-bind and another example shows how to bind 2 lists and call callback function after it finished binding. The menu plugin that we've used here is available for purchase at CodeCanyon.

Referrences:

• AngularJs API Docs: https://docs.angularjs.org/api
• John Papa: http://www.johnpapa.net/
• Dan Wahlen: https://weblogs.asp.net/dwahlin
• Ben Nadel: http://www.bennadel.com/