Skip to main content

Posts

Showing posts from 2014

Things you may not know about CSS

Grammatical error like style using CSS: .grammar{ -moz-text-decoration-color: green; -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; text-decoration-color: green; text-decoration-line: underline; text-decoration-style: wavy; } Output : CSS 'empty-cells' Property table{ empty-cells:hide; }    CSS @supports  Usually we do CSS feature-test using JavaScript. Now it can be done in CSS with a new property '@supports' . So for Firefox 22+ , Chrome 28+, Opera 12.1+ supports this feature. So we can look forward to using it soon! Example: /* basic usage */ @supports(prop:value) { /* more styles */ } /* real usage */ @supports (display: flex) { div { display: flex; } } /* testing prefixes too */ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: f

Javascript - Some Useful Tips & Tricks

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 =

Using Angular with Laravel / Conflict between Laravel Blade and Angular

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('<%'); $interpolateProvider.endSymbol('%>'); });

A fair play with Maths and JQuery Animation

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);

Custom Select Box with new approach

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