Own My Code - AngularJS, JS, JQuery, C,C++,C Graphics,Mini Project,Computer Programming

This might be a simple angular filter, but more helpful to reduce ugly code in your controller. Angular provides '$interpolate' service to evaluate angular expressions.  Consider you have some constant template with some expression expecting a dynamic value - lets say userName. Example: //example.js angular.module('app.example',[]) .constant('TEMPLATE',{ WELCOME_MSG: 'Hi {{userName}} Welcome to our Portal' }) .controller('sampleCtrl', function($scope, TEMPLATE, $interpolate){ $scope.data = { userName:'Ajai' }; $scope.MSG = $interpolate(TEMPLATE.WELCOME_MSG)($scope.data); }); <!--example.html--> <div ng-app="app.example" ng-controller="sampleCtrl"> <h1>{{MSG}}</h1> </div> Instead you can simplify the above one with custom interpolate filter. Below example wont make much difference, but consider if you have some 100 template constants - ...

A Mutator method is used to control changes to a variable, which is formerly known as   getter and setter methods. Several server side languages supports Mutator methods. Lets see how to achieve the same in JavaScript.  There are some restrictions to achieve it in obsolete browsers. Lets see the different ways to implement mutator methods in JavaScript, Method 1: Exposing our own getter and setter methods function User(){ this._name = ''; this.getName = function(){ return 'Hey ' + this._name; } this.setName = function(name){ this._name = name } } var u1 = new User(); u1.setName('Ajai') console.log(u1.getName()) //Hey Ajai Method 2: Using ES5 Syntax (supported in all ES5 ready browsers) //with Prototype function User(){ this._name = ''; } User.prototype = { get name(){ return 'Hey ' + this._name; }, set name(name){ this._name = name; } } var u1 = new User(); u1.name = "Ajai" console.log(u1.name) //H...

Use window.name for simple session handling window object has its own property 'name'. The name of the window is used primarily for setting targets for hyperlinks and forms. Windows do not need to have names. With this property we can achieve simple session storage. Browser preserves the property value ( window.name ) until the window/tab is closed.   Labels You can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution. var i, j; loop1: for (i = 0; i < 3; i++) { //The first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //The second for statement is labeled "loop2" if (i === 1 && j === 1) { continue loop1; } console.log('i = ' + i + ', j = ' + j); } } // Output is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = ...

The Conflict: Peoples who are using Laravel and AngularJs may know, Laravel’s Blade templating engine and AngularJs uses the same markup when displaying variables {{ variableName }} Solution 1 (Laravel): Laravel Blade template engine comes with an option to change the literal tags. so if you want to keep the angular syntax, then include the following code in  app/routes.php //general syntax Blade::setContentTags('<%', '%>'); //for escaped data: Blade::setEscapedContentTags('<%%', '%%>'); Solution 2 (AngularJs): AngularJs comes with an option to change the literal tags using $interpolateProvider It should be declared within your module. angular.module('MyApp', [], function($interpolateProvider) { $interpolateProvider.startSymbol(' '); });

This is a new try with the simple maths that we already know. I have used basic trigonometric equations and JQuery animation for the play. DEMO Demo Explained: Create set of div and append it to the body for (var i = 0; i < 360; i++) { //random color var color = '#'+parseInt(Math.random()*0xccccc); //create and append DOM $('<div/>').appendTo('body').css('background',color); } For random positioning use Math.random() to generate random x,y values for (var i = 0; i < 360; i++) { var left = 100 + Math.random() * 300 + 'px'; var top = 100 + Math.random() * 300 + 'px'; $('div').eq(i).animate({left:left,top:top},1000); } To draw circle , x = tx +  r cos(t) y = ty + r sin(t) so looping through t value from 0 to 360 will generate circle for (var i = 0; i < 360; i++) { r = 150; var left = 400 + r*Math.cos(i); var top = 200 + r*Math.sin(i); ...

This is my new JQuery plugin for replacing select box. I have tried to implement some cool features which makes it easy to implement and you can play with it as like the native one. Your suggestions, issues are welcome, so that I can improve this plugin DEMO Fork this on GitHub Implementation: Step 1: include css and scripts in head section <link href="customselectbox.css" rel="stylesheet" type="text/css"></link> <script src="http://code.jquery.com/jquery-1.9.0.js"></script> <script src="customselectbox.js"></script> Step 2: initialize customselect box $(document).ready(function(){ $('select').customSelect(); }); Features: Support thumbnails within option Search option Set and Get value with normal JQuery method. No need to process or query the generated new select box, you can use the ref of the native select box. eg: //set value $('#myselect').val(va...

This is my new JavaScript plugin for generating Android like Pattern locker for web applications. This is fully customizable plugin. Don't know where it can be used.... Just developed in my own interest.... please suggest some improvements for the same..... I think the captcha can be replaced with this plugin. I have created the plugin using raphaeljs. DEMO Fork this on GitHub How to use?  Step 1: Include the  following scripts in your head section ( click here to download raphaeljs , click here to download pattern.js ) <script src="raphael-min.js" type="text/javascript"></script> <script src="pattern.js" type="text/javascript"></script> Step 2: Create an instance for the pattern with your custom properties and draw the pattern within the container with instance.draw(container). var s = new Pattern(properties); s.draw(container); Properties Property ...

This is my New jQuery Plugin.  You can find the working example at http://jsfiddle.net/ajai/k8Ube/ Hope it will be useful to some one....  I have used " pixastic " for image processing.  To implement the plugin you have to include the pixastic library . and call the plugin in $(window).load event, Beacuse for image processing first the image should be loaded. Hope you all know $(window).load will be triggered after all the assets are loaded. DEMO Fork this on GitHub How to use? It is very simple to implement the plugin 1. include you jQuery  2. include Pixastic Library 3. include the plugin code 4. Add attribute fitler="blur" for images that you want to apply 5. on $(window).load Event call the following code $('img').blurLens(); or $('img').blurLens({ width: 200, height: 200, blur: 5 }); width - Width of lens height - Height of lens blur - Blur Amount JQuery  (function (...

You might think how base conversion worked out in JavaScript. Here the solution,  Number to Base Value   Number.toString([radix]); Number - Integer number that is to be converted radix - base value either 2, 8, 16 (optional parameter) Example: <script>  //INTEGER TO BASE VALUE var n = 42; document.write(n.toString(2)); document.write(n.toString(8)); document.write(n.toString(16)); //HEX TO base var h = 0xa; document.write(n.toString(2)); document.write(n.toString(8)); </script> Output: 101010 52 2a 1010 12 Any Base value to In tege r value parseInt(string, [radix]);  string - string that is to be converted. The string can be binary value, octal value or hexadecimal value   radix - base value either 2, 8, 16 (optional parameter) Example: <script>  //Binary to integer document.write(parseInt('111',2)); //Octal to integer document.write(parseInt('12',8)); //Hex to integer document.write(parseInt('0xc',16)); </sc...