Archive

Author Archive

HTML5: Vibration API


<!DOCTYPE html>
<html>
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="author" content="Aurelio De Rosa">
    <title>Vibration API Demo by Aurelio De Rosa</title>
    <style>
      body
      {
          max-width: 500px;
          margin: 2em auto;
          font-size: 20px;
      }
      h1
      {
          text-align: center;
      }
      .hidden
      {
          display: none;
      }
      .buttons-wrapper
      {
          text-align: center;
      }
      .button-demo
      {
          padding: 0.5em;
          margin: 1em auto;
      }
      .author
      {
          display: block;
          margin-top: 1em;
      }
    </style>
   </head>
   <body>
    <h1>Vibration API</h1>
    <div class="buttons-wrapper">
      <button id="button-play-v-once" class="button-demo">Vibrate Once</button>
      <button id="button-play-v-thrice" class="button-demo">Vibrate Thrice</button>
      <button id="button-stop-v" class="button-demo">Stop</button>
    </div>
    <span id="v-unsupported" class="hidden">API not supported</span>
    <small class="author">
      Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>
      (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>)
    </small>
    <script>
      window.navigator = window.navigator || {};
      if (navigator.vibrate === undefined) {
          document.getElementById('v-unsupported').classList.remove('hidden');
          ['button-play-v-once', 'button-play-v-thrice', 'button-stop-v'].forEach(function(elementId) {
            document.getElementById(elementId).setAttribute('disabled', 'disabled');
          });
      } else {
          document.getElementById('button-play-v-once').addEventListener('click', function() {
            navigator.vibrate(1000);
          });
          document.getElementById('button-play-v-thrice').addEventListener('click', function() {
            navigator.vibrate([1000, 500, 1000, 500, 2000]);
          });
          document.getElementById('button-stop-v').addEventListener('click', function() {
            navigator.vibrate(0);
          });
      }
    </script>
   </body>
</html>
Categories: UI Developer

AngularJS sorting rows by table header ?


Another way to do this in AngularJS is to use a Grid.

The advantage with grids is that the row sorting behavior you are looking for is included by default.

The functionality is well encapsulated. You don’t need to add ng-click attributes, or use scope variables to maintain state:

var app = angular.module('myApp', ['ngGrid', 'ngAnimate']);
app.controller('MyCtrl', function($scope) {

  $scope.myData = {
    employees: [{
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }, {
      firstName: 'Frank',
      lastName: 'Burns',
      age: 54
    }, {
      firstName: 'Sue',
      lastName: 'Banter',
      age: 21
    }]
  };

  $scope.gridOptions = {
    data: 'myData.employees',
    columnDefs: [{
      field: 'firstName',
      displayName: 'First Name'
    }, {
      field: 'lastName',
      displayName: 'Last Name'
    }, {
      field: 'age',
      displayName: 'Age'
    }]
  };
});
/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px;
    height: 200px
}
<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
         src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js">
         src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-animate.js">
         type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js">
         type="text/javascript" src="main.js">
    </head>
    <body ng-controller="MyCtrl">
        
class=“gridStyle” ng-grid=“gridOptions”>

 


    </body>
</html>

 

Categories: UI Developer

Don’t you need a constructor function to specify object instantiation behavior and handle object initialization?


No.

Any function can create and return objects. When it’s not a constructor function, it’s called a factory function.

let animal = {
  animalType: 'animal',
 
  describe () {
    return `An ${this.animalType} with ${this.furColor} fur, 
      ${this.legs} legs, and a ${this.tail} tail.`;
  }
};
 
let mouseFactory = function mouseFactory () {
  return Object.assign(Object.create(animal), {
    animalType: 'mouse',
    furColor: 'brown',
    legs: 4,
    tail: 'long, skinny'
  });
};

let mickey = mouseFactory();

More : https://medium.com/javascript-scene/common-misconceptions-about-inheritance-in-javascript-d5d9bab29b0a

Categories: UI Developer

Aren’t classes the right way to create objects in JavaScript?


No.

There are several right ways to create objects in JavaScript. The first and most common is an object literal. It looks like this (in ES6):

// ES6 / ES2015, because 2015.

let mouse = {
  furColor: 'brown',
  legs: 4,
  tail: 'long, skinny',
  describe () {
    return `A mouse with ${this.furColor} fur,
      ${this.legs} legs, and a ${this.tail} tail.`;
  }
};

Of course, object literals have been around a lot longer than ES6, but they lack the method shortcut seen above, and you have to use `var` instead of `let`. Oh, and that template string thing in the `.describe()` method won’t work in ES5, either.

You can attach delegate prototypes with `Object.create()` (an ES5 feature):

let animal = {
  animalType: 'animal',
  
  describe () {
    return `An ${this.animalType}, with ${this.furColor} fur, 
      ${this.legs} legs, and a ${this.tail} tail.`;
  }
};

let mouse = Object.assign(Object.create(animal), {
  animalType: 'mouse',
  furColor: 'brown',
  legs: 4,
  tail: 'long, skinny'
});

Let’s break this one down a little. `animal` is a delegate prototype. `mouse` is an instance. When you try to access a property on `mouse` that isn’t there, the JavaScript runtime will look for the property on `animal` (the delegate).

`Object.assign()` is a new ES6 feature championed by Rick Waldron that was previously 
implemented in a few dozen libraries. You might know it as `$.extend()` from jQuery or 
`_.extend()` from Underscore. Lodash has a version of it called `assign()`. 
You pass in a destination object, and as many source objects as you like, separated by
 commas. It will copy all of the enumerable own properties by assignment from the source 
objects to the destination objects with last in priority. If there are any property name
 conflicts, the version from the last object passed in wins.

`Object.create()` is an ES5 feature that was championed by Douglas Crockford so that we could attach delegate prototypes without using constructors and the `new` keyword.

I’m skipping the constructor function example because I can’t recommend them. I’ve seen them abused a lot, and I’ve seen them cause a lot of trouble. It’s worth noting that a lot of smart people disagree with me. Smart people will do whatever they want.

 

Categories: UI Developer

Prototypal inheritance in javascript


Classical and prototypal inheritance are fundamentally and semantically distinct.

There are some defining characteristics between classical inheritance and prototypal inheritance. For any of this article to make sense, you must keep these points in mind:

In class inheritance, instances inherit from a blueprint (the class), and create sub-class relationships. In other words, you can’t use the class like you would use an instance. You can’t invoke instance methods on a class definition itself. You must first create an instance and then invoke methods on that instance.

In prototypal inheritance, instances inherit from other instances. Using delegate prototypes (setting the prototype of one instance to refer to an examplar object), it’s literally Objects Linking to Other Objects, or OLOO, as Kyle Simpson calls it. Using concatenative inheritance, you just copy properties from an exemplar object to a new instance.

It’s really important that you understand these differences. Class inheritance by virtue of its mechanisms create class hierarchies as a side-effect of sub-class creation. Those hierarchies lead to arthritic code (hard to change) and brittleness (easy to break due to rippling side-effects when you modify base classes).

Prototypal inheritance does not necessarily create similar hierarchies. I recommend that you keep prototype chains as shallow as possible. It’s easy to flatten many prototypes together to form a single delegate prototype.

  • A class is a blueprint.
  • A prototype is an object instance.

 

 

 

 

 

 

 

 

 

View at Medium.com

View at Medium.com

Categories: UI Developer

How do JavaScript closures work?


Whenever you see the function keyword within another function, the inner function has access to variables in the outer function.

 

function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // will log 16
  }

  bar(10);
}

foo(2);
Categories: UI Developer

9 Ways to Make your Computer Run Faster

June 28, 2016 Leave a comment

Categories: Techanical

Ajax Pagination in CodeIgniter Framework


Nice article .. with in 15 minute you can integrate ajax pagination

Ajax Pagination in CodeIgniter Framework

Categories: ajax, Techanical

Disable select box based on check box click

April 22, 2016 Leave a comment

<form>
  <input type="checkbox" id="pizza" name="pizza" value="yes">
  <label for="pizza">I would like to order a</label>
  <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select>
  pizza.
</form>

 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

  var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $('#pizza_kind').prop('disabled', false);
    }
    else {
        $('#pizza_kind').prop('disabled', 'disabled');
    }
  };
  $(update_pizza);
  $("#pizza").change(update_pizza);
Categories: Techanical

Android json string object to javascript variable

April 4, 2016 Leave a comment

http://stackoverflow.com/questions/9036429/convert-object-string-to-json

 

97down voteaccepted

If the string is from a trusted source, you could use eval then JSON.stringify the result. Like this:

var str = "{ hello: 'world', places: ['Africa', 'America', 'Asia', 'Australia'] }";
var json = JSON.stringify(eval("(" + str + ")"));

Note that when you eval an object literal, it has to be wrapped in parentheses, otherwise the braces are parsed as a block instead of an object.

I also agree with the comments under the question that it would be much better to just encode the object in valid JSON to begin with and avoid having to parse, encode, then presumably parse it again. HTML supports single-quoted attributes (just be sure to HTML-encode any single quotes inside strings).

Categories: Techanical