Friday, December 28, 2012

Published 12:22 AM by with 0 comment

HTML5 Web Storage

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

Internet ExplorerFirefoxOperaGoogle ChromeSafari
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 »




Read More
    email this       edit

Wednesday, December 26, 2012

Published 10:14 PM by with 0 comment

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.


Internet ExplorerFirefoxOperaSafariGoogle Chrome ΙΕ not Support.
var source=new EventSource("sample.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "
"; };
Read More
    email this       edit
Published 9:38 PM by with 0 comment

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.


Internet ExplorerFirefoxOperaSafariGoogle Chrome ΙΕ 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
    email this       edit

Thursday, December 20, 2012

Published 8:28 PM by with 0 comment

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
    email this       edit
Published 8:26 PM by with 0 comment

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
    email this       edit

Monday, December 17, 2012

Published 4:36 AM by with 1 comment

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
    email this       edit

Thursday, December 13, 2012

Published 2:32 AM by with 1 comment

Departures S01E11 Sri Lanka full video

Read More
    email this       edit
Published 2:11 AM by with 0 comment

How To Configure XDebug - NetBeans

Modify these lines at the end of the .ini file:
Read More
    email this       edit

Wednesday, December 12, 2012

Published 1:52 AM by with 0 comment

@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
    email this       edit
Published 1:06 AM by with 0 comment

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
    email this       edit