JavaScript Try Catch

Try Catch (Exception)

try
{
}
 catch(err)
{
}
 finally
{
} 

Try Catch (Exception)

Javascript Error Handling

Try Catch

Example

try
{
    //lines of codes
}
catch(err)
{
    //err.description
    //err.message
    //err.name
    //err.number
    //err.stack
}
finally
{
    //success or failure , code executes here
}

Throw

Example

function ThrowHelper()
{
    var err = new Error(123,"Error in helper");
    throw err;
}

//elsewhere in code
try
{
    ThrowHelper();
}
catch(ex)
{
    var msg = ex.number +" :"+ex.message;
    //log msg
}

-

Read More

JavaScript Array Functions

Javascript Array Functions (Array)

var fruit = ["apple","orange","banana"];
log(fruit.sort());//apple,banana,orange
fruit.push("pear");
log(fruit.sort());//apple,banana,orange,pear

var vegitables = ["carrot","broccoli","cauliflovd"];
var all = fruit.concat(vegitables);
log(all);//apple,orange,banana,carrot,broccoli,cauliflovd

 

Javascript Array Functions (Array)

Javascript Array functions

push,pop,concat,map,filter,some,every,forEach,reduce,sort,splice,slice,join,reverse
Array is a Stack data sructure (first in first out)

Example

var fruit = ["apple","orange","banana"];
log(fruit.sort());//apple,banana,orange

fruit.push("pear");
log(fruit.sort());//apple,banana,orange,pear

var vegitables = ["carrot","broccoli","cauliflovd"];
var all = fruit.concat(vegitables);
log(all);//apple,orange,banana,carrot,broccoli,cauliflovd

var firt = fruit.slice(0,1);
log(first);//apple

var result = fruit.splice(1,2,"melon","grape");
log(result);//start in 1 no of 2 remove and add "melon","grape"
//out put is orange,banana
//splice is immutable function in javascript

fruit.splice(1,2,"melon","grape");
log(fruit);
//apple,melon,grape

fruit = fruit.map(function(i){return i.toUpperCase()});
log(fruit);
//APPLE,MELON,GRAPE

fruit = fruit.map(function(i){return {fruitname:i}});
log(fruit);
//[object Object],[object Object],[object Object]

fruit = fruit.filter(function(){
    return i[0]==="a";
});
log(fruit);
//apple

fruit = fruit.every(function(){
    return i[0]==="a";
});
log(fruit);
//false //if every items start with "a"


fruit = fruit.every(function(){
    return i.length>0;
});
log(fruit);
//true //if every items has more than 0 length

fruit = fruit.some(function(){
    return i.length>0;
});
log(fruit);
//true //if some items has more than 0 length

fruit.forEach(function(){
    log(i);
});

Read More

Javascript Function

Javascript function definitions,
There are few different methods to define a function in javascript

Example
function Samsple1()
{
 log('Hello Aruna');
}...

 

Javascript Function

 

Javascript function definitions

There are few different methods to define a function in javascript

Example

function Samsple1()
{
    log('Hello Aruna');
}

Example

var fun = function Samsple2()
{
    log('Hello Aruna');
};

Example

var ops = {
    Add:function AddNumbers(n1,n2)
    {
        return n1+n2;
    }
};

var x = ops.Add(3,5); //x =8
var y = ops.AddNumbers(3,5); //

not valid

Encapsulation-in-JavaScript

 

Example

var x = 2000;
var fun = function Encas()
{
    var y = 12;
    return y;
};

var total = x+y; //

Invalid use of y

var total = x+Encas()//total is 2012

Functions in Functions

Example

function OuterFunction(n)
{
    function InnerFunction()
    {
        return n*n;
    }
    return InnerFunction();
}
var x = OuterFunction(10);// x = 100
//InnerFunction can not call direcly

Immediate Functions

Example

(

function() {...}()

)

;

or

(

function() {...}

)

();

Module Pattern

  Extended immediate function

Example

var fun = (function(){
    var m=2000,c=0,d=10,y=2;
    return {
        GetHiddenYear:function()
        {
            return m+c+d+y;
        }
    }
}());

var x = fun.GetHiddenYear(); //x==2012;

Passing function as a parameter

Example

function Add(n1,n2)
{
    return n1+n2;
}

function calc(n1,n2,processForCalc)
{
    return processForCalc(n1,n2);
}

function executeMath()
{
    log(calc(4,4,Add));//output 8
}

Refferenced from URl »

 

Read More

-ms-grid-columns property (Internet Explorer)

Gets or sets one or more values that specify the width of each grid column within the object.

This property is read/write.
Syntax

-ms-grid-columns: [ auto | width | min-content | max-content | minmax(min, max) ] + | none
Property values

One or more column widths, separated by spaces...

 

-ms-grid-columns property (Internet Explorer)

Gets or sets one or more values that specify the width of each grid column within the object.
This property is read/write.

Syntax

-ms-grid-columns: [ auto | width | min-content | max-content | minmax(min, max) ] + | none

Property values

One or more column widths, separated by spaces.

auto

The width of a column is computed based on the widest child element in that column. This keyword is equivalent to minmax(min-content, max-content).

width

The width of each column specified as one of the following values:

• A length consisting of an integer number, followed by an absolute units designator ("cm", "mm", "in", "pt", or "pc") or a relative units designator ("em", "ex", or "px").
• A percentage of the object width.
• A proportion of the remaining horizontal space (that is, the object width, less the combined widths of other tracks), consisting of an integer number followed by a fractional designator ("fr"). For example, if "200px 1fr 2fr" is specified, the first column is allocated 200 pixels, and the second and third columns are allocated 1/3 and 2/3 of the remaining width, respectively.

min-content

The minimum width of any child elements is used as the width of the column.

max-content

The maximum width of any child elements is used as the width of the column.

minmax(min, max)

The width of the row is between min and max, as available space allows. The min and max parameters can be any other value of the -ms-grid-columns property, except for auto.

none

Initial value. The object has no specified columns. Implicit, auto-sized columns will still be created based on the grid position(s) of the child element(s).

CSS information

Applies To	non-replaced block elements
Media	visual paged
Inherited	no
Initial Value	auto

Standards information

• CSS Grid Layout, Section 5

Remarks

This property also supports a repeating syntax. If there are a large number of columns that are the same or exhibit a recurring pattern, a repeat syntax can be applied to define the columns in a more compact form. The repeated values are enclosed by parentheses, and are followed by an integer within brackets (for instance, [4]) that indicates how many times to repeat the values in parentheses. See Examples for a demonstration.
When space is allocated to a column, priority is given to those columns that have their width specified as a length or as a percentage. Any remaining space is then allocated to those columns that have their width specified as a proportion.
Each distance value defines a column that can be referred to by a number that corresponds to its position in the list. The first distance value specified defines a column 1, the second 2, and so on.
Child elements are clipped if they are too large to fit in the allocated space.

Examples

The following two examples illustrate the repeating -ms-grid-columns syntax. They are equivalent. There is a single row, and a pattern of four repeated columns: a 250px column followed by a 10px gutter.

CSS

Copy

<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  } 

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>

Refferenced from http://msdn.microsoft.com »

Read More

HTML5 Web Storage

HTML5 web storage, a better local storage than cookies.

What is HTML5 Web Storage?

With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.
The data is stored in key/value pairs, and a web page can only access data stored by itself.

---

Browser Support

Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 7 and earlier versions, do not support web storage.

---

localStorage and sessionStorage 

There are two new objects for storing data on the client:

• localStorage - stores data with no expiration date
• sessionStorage - stores data for one session

Before using web storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

---

The local Storage Object

The local Storage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

Try it yourself »

Example explained:

• Create a localStorage key/value pair with key="lastname" and value="Smith"
• Retrieve the value of the "lastname" key and insert it into the element with id="result"

Tip: Key/value pairs are always stored as strings. Remember to convert them to another format when needed.
The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example

if (localStorage.clickcount)
  {
  localStorage.clickcount=Number(localStorage.clickcount)+1;
  }
else
  {
  localStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

Try it yourself »

---

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.
The following example counts the number of times a user has clicked a button, in the current session:

Example

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

Try it yourself » Refferenced from W3school »

Your suggestion:

Your E-mail (optional):
Page address:
Description:

Close [X]

Thank you for your support.

Close [X]

Read More

HTML5 Server-Sent Events

What is the Web workers
 
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.


 ΙΕ not Support.

var source=new EventSource("sample.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "
";
  };

Read More

HTML5 Web Workers

What is the Web workers
  A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.


 ΙΕ not Support.

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
  {
  if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker()
{
w.terminate();
}
</script>

Read More

JQuery Message Box

This message box is designed for asp.net pages using JQuery


collect all files in one folder and test the sample page

Message box with animation

//#--Scrolling with Animation-----------------
//$("#ContentDivMessage").animate( { left:left1}, 500 )
//.animate( { top:top1 }, 500);
//#-------------------------------------------
Message box with out animation

//#--With out Animation-----------------------
document.getElementById('ContentDivMessage').style.left = left1;
document.getElementById('ContentDivMessage').style.top = top1;
//#-------------------------------------------

Read More

Spelling Check In Testbox

this is a usefull method to check spelling in testbox

//make all references
Microsoft Office 12.0 Object Library
Microsoft Word 12.0 Object Library


using System;
using System.Collections.Generic;
using System.Reflection;
using System.Text;
using System.Web.UI.WebControls;
using Microsoft.Office.Interop.Word;



public void SpellChecking(TextBox tBox)
{
try
{
Application app = new Application();
if (tBox.Text.Length &gt; 0)
{
app.Visible = false;
object template = Missing.Value;
object newTemplate = Missing.Value;
object documentType = Missing.Value;
object visible = false;
object optional = Missing.Value;
_Document doc = app.Documents.Add(ref template, ref newTemplate, ref documentType, ref visible);
doc.Words.First.InsertBefore(tBox.Text);
ProofreadingErrors we = doc.SpellingErrors;
doc.CheckSpelling(ref optional, ref optional, ref optional,
ref optional, ref optional, ref optional, ref optional,
ref optional, ref optional, ref optional,
ref optional, ref optional);
object first = 0;
object last = doc.Characters.Count - 1;
tBox.Text = doc.Range(ref first, ref last).Text;
}
object saveChanges = false;
object originalFormat = Missing.Value;
object routeDocument = Missing.Value;
app.Quit(ref saveChanges, ref originalFormat, ref routeDocument);
}
catch (Exception ex)
{
//what ever u want to display on error
}
}

Read More

Random Images - Photo Album

DOWNLOAD SOURCE
.pic {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #EEEEEE;
    border-image: none;
    border-style: solid;
    border-width: 5px 5px 18px;
    box-shadow: 2px 2px 3px #333333;
    position: absolute;
   background-color: #EEEEEE;
}
#imagecontainer{
    width:100%;
    height:400px;
}
</style>
<script>
    function randomFromInterval(from,to)
    {
        return Math.floor(Math.random()*(to-from+1)+from);
    }
function jsonFlickrApi(rsp) {
      var s = "";
      // http://farm{id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
      // http://www.flickr.com/photos/{user-id}/{photo-id}
      //s = "total number is: " + rsp.photos.photo.length + "<br/>";

      for (var i=0; i < rsp.photos.photo.length; i++) {
        //var rand = randomFromInterval(1,10);
        var stage_width=800;
        var stage_height=400;
        var left = randomFromInterval(0,stage_width);
 var top = randomFromInterval(0,400);
 var rot = randomFromInterval(-40,40);
 
  if(top>(stage_height-130) && left > (stage_width-230))
  {
   top-=120+130;
   left-=230;
  }
       
        photo = rsp.photos.photo[i];
      var _url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "m.jpg";
        p_url = "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id;
        s +=  '<div class="pic" style="top:'+top+'px;left:'+left+'px; -moz-transform:rotate('+rot+'deg); -webkit-transform:rotate('+rot+'deg);">'+
'<img src="' + _url + '"/></div>';
      }
      $('#imagecontainer').append(s);
  }
$(document).ready(function() {

 });

</script>

<div id="imagecontainer">
</div>


<script src="http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=f3c5222d18401ab6991a5532da0208b1&amp;tags=nature&amp;per_page=50&amp;format=json"></script>

Read More

Departures S01E11 Sri Lanka full video

Read More

How To Configure XDebug - NetBeans

Modify these lines at the end of the .ini file:

Read More

@keyframe

.animate-get-angry
{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:get-angry 5s linear 2s infinite alternate;;
  -moz-animation:get-angry 5s linear 2s infinite alternate;; /* Firefox */
  -webkit-animation:get-angry 5s linear 2s infinite alternate;; /* Safari and Chrome */
  -o-animation:get-angry 5s linear 2s infinite alternate;; /* Opera */
}
@keyframes get-angry
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes get-angry/* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes get-angry/* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes get-angry/* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

Read More

Html5 Transform : Translate,Scale,Rotate & Transition

#pic {
  transition:all 2s;
}
#pic:hover
{
  /*General*/
  transform: translate(50%, 50%) scale(2, 2) rotate(10deg);
  /*Firefox*/
  -moz-transform: translate(50%, 50%) scale(2, 2) rotate(10deg);
  /*Microsoft Internet Explorer*/
  -ms-transform: translate(50%, 50%) scale(2, 2) rotate(10deg);
  /*Chrome, Safari*/
  -webkit-transform: translate(50%, 50%) scale(2, 2) rotate(10deg);
  /*Opera*/
  -o-transform: translate(50%, 50%) scale(2, 2) rotate(10deg);
}

A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark

Read More

html5 Figure & Figcaption

  
  
this is the figure caption 

A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark

Read More

Flexbox

.flex
   {
      /* basic styling */
      width: 350px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;
 
      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;
 
      display: flex;
      flex-direction: row;
   }
 
   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
 
      width: 30px; /* To make the transition work nicely.  (Transitions to/from
                      "width:auto" are buggy in Gecko and Webkit, at least.
                      See http://bugzil.la/731886 for more info.) */
 
      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }
 
   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }
 
   .flex > div:hover
   {
        width: 200px;
   }

uno

due

tre

Read More

SVG Scalable Vector Graphics

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e., interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape. All major modern web browsers—including Mozilla Firefox, Internet Explorer 9 and 10, Google Chrome, Opera, and Safari—have at least some degree of support for SVG and can render the markup directly. Earlier versions of Microsoft Internet Explorer (IE) do not support SVG natively. from Wikipedia

Read More

css3 columns

.two-columns
{
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
}

Animation is the rapid display of a sequence of images to create an illusion of movement.
a camera and a projector or a computer viewing screen which can rapidly cycle through images in a sequence.

Read More