How to Post a Tweet using JavaScript

In this post we will post a tweet using JavaScript. Let us assume we have a button like following

image

On click event of this button we want to post a tweet. For that we need to navigate to user to URL

image

After status we can put text to be tweeted. So on click event we need to navigate to this URL and append text to be tweeted. Very first we need to check whether tweet length is less than 140 or not. If it is more than 140 then we will show error message to user.

image

txttoTweet is variable containing text to be tweeted. In Else part we can tweet by redirecting to said URL as following,

image

Full code is as following,

<html>
<head>
 <title>
 </title>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js">
</script>
 <script type="text/javascript">
 $(document).ready(function () {
 $('#btnTweet').click(function (e) {
 alert('hello11');
 var textToTweet = "Hi I am tweeting from here";
 if (textToTweet.length > 140) {
 alert('Tweet should be less than 140 Chars');
 }
 else {
 var twtLink = 'http://twitter.com/home?status=' +encodeURIComponent(textToTweet);
 window.open(twtLink,'_blank');
 }
 });
 });

</script>
 <style type="text/css">
 #btnTweet {
 width: 159px;
 height: 38px;
 }
 </style>
</head>
 <body>
 <h1>tweet from debugmode</h1>
 <button id="btnTweet">Tweet</button>
 </body>
</html>

Some of the important point worth discussing here is as following,

  • Text to Tweet must be inside encodeURIComponet . Else you will get error.
  • Check Text to Tweet is less than 140 characters.
  • If you want can open windows as dialog also.

On running above script you should be getting output as following,

image

On click of Tweet button in next tab or windows as of your browser setting you will be asked to log in to Twitter, if not already logged in

image

On successfully sign in you should be able to tweet.

image

In this way you can tweet using JavaScript. I hope this post was useful. Thanks for reading.

Consuming WCF SOAP Service in Windows 8 Metro Application

In this post we will consume WCF SOAP Service in C#/XAML based Metro Application. This is level 100 post showing basic steps to create simple WCF Service and consume that in Metro Application.

Very first let us create a WCF Service using VS2012. Form File menu create a new project by choosing WCF Service Application project template from WCF tab.

image

Remove all the default code from IService1.cs and replace it with following code. In below service contract we are going to return a simple greeting message. From client a name as string will be input to the service and service will return a greeting message as string.

IService1.cs


using System.ServiceModel;
namespace ServiceToConsumeinMetro
{
 [ServiceContract]
 public interface IService1
 {

[OperationContract]
 string GreetingMessage(string name);

 }

}

Service is implemented as following. It is concatenating two string and returning it .

Service1.svc.cs


namespace ServiceToConsumeinMetro
{

 public class Service1 : IService1
 {
 public string GreetingMessage(string name)
 {
 return "Welcome to Metro Word " + name;
 }
 }
}

We will go with the default binding and will not configure anything in Web.Config. Leave Web.config as it is and press F5 to run and host created WCF service in local server. On successful running in your browser you should have below output.

image

Now let us create a Metro Application to consume this service. From File menu in VS 2012 choose Blank App project template from Windows Metro Style tab.

image

Next let us design the page. On the page we are going to put one TextBox, One Button and one TextBlock. User will enter Name in textbox and on the click event of the button service will be called. Returned output from service will be displayed in the textblock. Xaml is as following

MainPage.xaml


<Page
 x:Class="App1.MainPage"
 IsTabStop="false"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <Grid.RowDefinitions>
 <RowDefinition Height="200" />
 <RowDefinition Height="200" />
 <RowDefinition Height="200" />
 </Grid.RowDefinitions>
 <TextBox x:Name="txtName" Margin="286,25,583,113" />
 <Button x:Name="btnCallService" Content="Enter Name above and touch to call service" Height="100" Width="364" Grid.Row="1" Margin="367,10,0,90" Click="btnCallService_Click_1"/>
 <TextBlock x:Name="textResult" Grid.Row="2" FontSize="30" FontWeight="Bold" />
 </Grid>
</Page>

Next we need to add Service Reference in the Metro project. For that right click on Metro Application project Reference tab and select Add Service Reference

image

Add the reference as following. My metro application name is App1. If your Metro application name is XYZ then you will be adding XYZ.ServiceReference1 provided you have not changed reference name while adding it.

image

In Metro word everything is asynchronous. So we need to make async call to service. When you add reference automatically visual studio creates async function for you.

image

We can call this function from service as following

image

If you notice we have put await keyword before making a call to service. Since service is called in await manner so the function inside which we are calling service must be async. On click event of the button service can be called as following

image

Combining all discussion together code behind will look like as following

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using App1.ServiceReference1;

namespace App1
{

 public sealed partial class MainPage : Page
 {
 public MainPage()
 {
 this.InitializeComponent();
 }

protected override void OnNavigatedTo(NavigationEventArgs e)
 {
 }

private async void btnCallService_Click_1(object sender, RoutedEventArgs e)
 {
 Service1Client proxy = new Service1Client();
 string result = await proxy.GreetingMessageAsync(txtName.Text);
 textResult.Text = result;
 }
 }
}

On running you should be getting output as following

image

I am sorry for poor UI experience but any way making UI immersive was not purpose of this post. I hope now you know basic steps to consume WCF SOAP service in metro application.

Sharing on Facebook using JavaScript

Objective

In this post we will see how can integrate our application with Facebook. We will look into how a status, picture or video can be shared on Facebook wall using JavaScript.

Expected output is as following

image

Register Application to Facebook

Very first we need to register our app on Facebook. We can register that by navigating on following link.

https://developers.facebook.com/apps

Select option of Create New App. Provide App Name and App Namespace. We need to provide unique App name and App Namespace.

image

After that, we need to complete Security Check.

image

Once Application has been successfully registered, you will get App ID and App Secret ID as following,

image

Once we got the App ID and App Secret ID, we need to provide information about site or mobile web from where we are going to share on Facebook. There are two important points very important here.

  1. App Domains
  2. Site URL and Mobile Web URL

Since I am going to do this sample on local server, hence I have set AppDomains as localhost and Web Page URL or Mobile Web URL will be http://localhost:1461/ . So I have configured that as following. Make sure you configure your App Domains and Site URL/Mobile URL as of your application. For example if your site domain is XYZ then give App Domains as XYZ and Site URL http://XYZ/yourpage

image

As of now we have registered and configured application on Facebook. Next we need to write JavaScript code to share on Facebook.

Code to Share on Facebook

Let us put a button on page. On clicking of this button we will share status on Facebook.

clip_image002

Very first we need to initialize page for Facebook integration. Put following code just before closing <body> tag. Do not forget to replace Your App Id with your real app Id.

clip_image003

Now we need to add reference of following JavaScript file. Add these references in Head section of HTML.

clip_image005

Once all references being added we need to write code on click event of button to share something on Facebook. We can share Video, Status, and Picture. FB.ui function will be used to share. Different parameters of this function is explained as following

clip_image007

Now we can share status as following,

clip_image009

If you are not logged in to Facebook then you get prompted to login and then share as following,

clip_image012

clip_image013

clip_image014

In this way we can share status on the Facebook using JavaScript. Combining all the codes together as following


<html>
<head>
<title>
Share on Facebook
</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js">
</script>
<script src="https://connect.facebook.net/en_US/all.js">
</script>
<script type="text/javascript">
 $(document).ready(function () {
 $('#shareonfacebook').click(function (e) {
 alert('hello9');
 e.preventDefault();
 FB.ui(
 {
 method: 'feed',
 name: 'DebugmodeEventPlans',
 link: 'http://localhost:1461/ShareonFB.html',
 caption: 'hey how is my Application ? tell me dude',
 description: 'hey how is my Application ?',
 message: ''
 });
 });
 });
</script>
</head>
<body>
<button id="shareonfacebook" >ShareOnFaceBook</button>

<script>
FB.init({
appId : 'urappid'
});
</script>
</body>
</html>

If you want to share a Video you can share it by giving Source vale and Picture values as following.

image

In this way we can share status on Facebook from JavaScript. I hope this post is useful. Thanks for reading.

Creating Netflix Movie Explorer Application using KendoUI and OData:Part 1


Objective

In this post series we are going to make Netflix Movie Explorer App. We will use Kendo UI OData feed of Netflix to create application. Final application (after this post) will look like as following,

And on tapping of a movie, we will be navigated to

In order to create this application we will explore following in this post

  • Working with KendoUI Mobile ListView
  • Working with KendoUI Mobile View
  • Working with kendoUI Mobile View Layout
  • Working with Navigation between views
  • Working with creating datasource and OData.

To start with we need to add following reference on HTML page

After adding all the required references let us try to create a Mobile View. A Mobile view contains single HTML page with multiple mobile views on that. For example you can have LoginView, ShowDataView ,AboutView . All mobile views are a div element with data-role property set to view. A View can be created as following,

You can set default view of the application in Application Startup. Let us set default view of the application as LoginView. That can be set as following,

Additionally we can set layout of the mobile application as well. There are two ways we can set the layout. Either we can set on the application level or we can set on particular view level. Let us set layout on application level. This can be set as following,

We have set the layout of the application. Now we need to create application layout we set. A Layout can be created as following,

  • Create a <div> element.
  • Set data-role property as “layout”

Hence layout can be created as following,

A Layout can have a Header and Footer. We can define Header and Footer in layout as following,

Let us put a back button in the header. A back button can be put as following

image_thumb26

We have put nav bar and inside that a back button as header. A nav bar can be created as following

  • Create a <div> element.
  • Set data-role property to “navbar”

Inside the navigation bar we are putting a back button. That can be put as <a> link with setting data-role as “backbutton”

As of now we are done with navigation bar in header. Now let us create TabStrip in the footer.

image_thumb29

A TabStrip can be created as following,

  • Create a <div> element
  • Set data-role property to “tabstrip”

Inside “tabstrip” we can have buttons to navigate between the pages. We are putting three buttons to navigate. We can specify view to navigate in href property of <a>.

  • View to be navigated can be set by providing view id with hash tag as href property.
  • Data-icon can be set to provide a specific look to button.

Putting all the codes together,

<html>
 <head>
 <title>
 Test Application
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>
 </head>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>
 <div data-role="view" id="DataView" >
 <h1>This is a Data View </h1>
 </div>
 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 </div>

<script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"
 }
 );
 </script>

 </body>
</html>
</html>

Now go ahead and run the application. In mobile browser you should be getting output as following

image_thumb32

As of now we have set layout at the application level. If we want we can have different layout for different view. Let us try that by giving different layout to DataView.

Create specific layout for DataView as following,

image_thumb35

We can set layout for DataView as following,

image_thumb38

If you notice here we have set layout at application level as well as view level. When layout is set at both levels then view level layout takes precedence over application level layout. After doing above modifications we should be getting following output,

image_thumb41

On clicking of Data, you should be getting below output. If you notice Back button from header is working as expected.

image_thumb44

Now let us try to show some data from service. In this case we will be displaying Movie details from OData feed of Netflix.

You can find Title of all the Movies from Netflix ODATA from below link.

http://odata.netflix.com/Catalog/Titles

Very first we need to create DataSource reading data from ODATA feed. We can create KendoUI Datasource as following

image_thumb47

  • Instance of kendo.data.DataSource being created
  • Since data being fetched from ODATA feed so type is set to odata
  • Pagesize property is set to tell server how many records need to be fetched. In this case it is 5.
  • In Trasnport property we need to provide URL of ODATA feed.

Once we created datasource we need to create Template. In template we say how we want to show data in listview. A template can be created as following

image_thumb50

In template we set property of DOM elements with the property of datasource. For example we want to display name of the movie. We are setting that with datasource property data.Name. Here data is name of the datasource and Name is property. A very important point need to be noticed is href value of <a> DOM element. We are setting that to DataDetailView. On tap user will be navigated to this view.

As of now we have created datasource and temple. Now let us create listview. To create a listview modify data div as following,

image_thumb53

A listview can be created by setting data-role property of <ul> as listview. If you notice we are setting data-init property of view as getMovieDetails. In getMovieDetails function we are fetching data from OData feed and setting the template as following. We are setting template and datasource value in the property.

image_thumb56

Combining all the discussions together and putting all the codes together we should have following code in HTML file.

<html>
 <head>
 <title>
 Test Application
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

 </head>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>

<div data-role="view" id="DataView" data-init="getMovieDetails" >
 <ul id="movieTitleView" data-role="listview"></ul>
 </div>

 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 <script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"

 }
 );
 </script>
<script id="movieTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="50" width="50" />
 <strong>${data.Name}</strong>
 <a href="\#DataDetailView?Id=#:data.Id#"" data-role="detailbutton" data-style="detaildisclose"></a>
 </div>
 </script>
<script>
 var data;
 data = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 5,
 endlessScroll: true,
 scrollTreshold: 30,
 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

 });
 var getMovieDetails = function () {
 $("#movieTitleView").kendoMobileListView(
 {
 template: kendo.template($("#movieTemplate").html()),
 endlessScroll: true,
 scrollTreshold: 30,
 dataSource: data
 });
 };
</script>

 </body>
</html>

On running we should be getting output as following

image_thumb59

On tap of Data button we should get below output

image_thumb62

At this point of time of you tap on the detail button you will be getting an exception because we have not created detail view yet. Let us create detail view

image_thumb65

Here we are setting different layout to DataDetailView. Let us create layout as below,

image_thumb68

This layout structure is same as we discussed previously. Now we need to write function shwDeatilsView function. In this function we will fetch selected data from the server on basis of Movie selected in first view.

image_thumb71

This function is quiet simple. First we are reading query parameter as following,

image_thumb74

After that we are making a call to server to fetch specific detail of the movie. Server call is as following. We are setting filter to fetch specific record.

image_thumb77

Once data is being fetched from the server, we need to initialize downloaded data to Movie Detail template. This template will tell how we are going to show data in movie detail page.

image_thumb80

We need to write MovieDetailtemplate as following,

image_thumb84

Combining all the discussions together and putting all the codes together we should have following code in HTML file.


<html>
 <head>
 <title>
 Test Application
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

 </head>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>

<div data-role="view" id="DataView" data-init="getMovieDetails" >
 <ul id="movieTitleView" data-role="listview"></ul>
 </div>

 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 </div>
 <div data-role="layout" data-id="TestAppDataLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Data
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#DataView" data-icon="download">Save</a>
 </div>
 </div>
 </div>
 <div data-role="view" id="DataDetailView"
 data-layout="TestAppDataLayout"
 data-show="showDetailsView">
 <h1>This is a Data Detail View </h1>
 </div>

<script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"

 }
 );
 </script>

<script id="movieTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="50" width="50" />
 <strong>${data.Name}</strong>
 <a href="\#DataDetailView?Id=#:data.Id#"" data-role="detailbutton" data-style="detaildisclose"></a>
 </div>
 </script>

<script id="movieDetailTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="100" width="100"/>
 <br/>
 Movie Name : <strong>${data.Name}</strong>
 <br/>
 ${data.Synopsis}
 </div>
 </script>
 <script>
 var data;
 data = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 5,
 endlessScroll: true,
 scrollTreshold: 30,

 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

});

console.log(data);

 var getMovieDetails = function () {

$("#movieTitleView").kendoMobileListView(
 {
 template: kendo.template($("#movieTemplate").html()),
 endlessScroll: true,
 scrollTreshold: 30,
 dataSource: data
 });
 };
 var movieDetailTemplate = kendo.template($("#movieDetailTemplate").text());

function showDetailsView(e) {
 var view = e.view;
 console.log(view.params.Id);
 var query = view.params.Id.toString();
 var data1 = new kendo.data.DataSource(
 {
 type: "odata",
 serverPaging: true,
 serverFiltering: true,
 pageSize: 50,
 transport: {

 read: "http://odata.netflix.com/Catalog/Titles"
 },

filter: { filters: [{ field: "Id", operator: "eq", value: query}] }
 });
 data1.read();
 data1.fetch(function () {
 var item = data1.at(0);
 console.log(item);
 view.scrollerContent.html(movieDetailTemplate(item));
 kendo.mobile.init(view.content);
 });
 }

</script>

 </body>
</html>

Now let us go ahead and run application

image_thumb87

Now when we select a movie, we will go into detail of that movie

image_thumb90

Conclusion

Yes detail view is not that immersive. In second part of this post, we will make it more immersive and implement much more features. I hope you like this post. Thanks for reading.

Presented in Pune User Group event

On 16th June 2012 , I got an opportunity to present on Windows 8 Metro Dev for Pune User Group .  It was a descent event with almost 100 audience. I presented on the topic “Windows 8 Metro Application Development using HTML and WinJS” . Please find slides of the session below,

I hope you find it useful. Thanks.

Saving and Retrieving JavaScript object in HTMl5 Local Storage

Recently while working I had a requierment to save Javascript array in local storage of HTML5. Let us say array is as follwing we want to save in local storage.

var movieArray = [
{ title: "The Artist", picture: "images/TheArtist.jpg" },
{ title: "A Better Life", picture: "images/abetterlife.jpg" },
{ title: "Abduction", picture: "images/abduction.jpg" },
{ title: "African Cats", picture: "images/africancats.jpg" },
{ title: "Angel Crest", picture: "images/angelscrest.jpg" },
{ title: "Arthur", picture: "images/arthur.jpg" },
{ title: "Anonymous", picture: "images/anonymous.jpg" },
{ title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },
];

Before saving iterate through array and display in the console. We can display on console as following

clip_image002

To see console log in chrome browser press F12 and select console tab.

clip_image003

everything is fine as of now and we can go ahead and save the data in local storage as following ,

clip_image005

As of now we have save data and fetched as well. let us try to display fetched data

clip_image007

in output windows you will be getting some expected data as following,

clip_image008

on matching you will find that type of original array was object whereas type of retrieve data is as string. This is where problem lies that HTMl5 stores data as string. so before saving data you need to stringify the array object and after retrieving data you need to parse the string as JSON object. saving and retrieving will be modified as following

clip_image010

now if you print retrieved result you should be getting the expected output. Full code to save and retrieve is as following ,


var movieArray = [
{ title: "The Artist", picture: "images/TheArtist.jpg" },
{ title: "A Better Life", picture: "images/abetterlife.jpg" },
{ title: "Abduction", picture: "images/abduction.jpg" },
{ title: "African Cats", picture: "images/africancats.jpg" },
{ title: "Angel Crest", picture: "images/angelscrest.jpg" },
{ title: "Arthur", picture: "images/arthur.jpg" },
{ title: "Anonymous", picture: "images/anonymous.jpg" },
{ title: "A Dangerous Method", picture: "images/adangerousmethod.jpg" },
];
 console.log('typeof movieArray: ' + typeof movieArray);
 console.log('movieArray:');
 for (var p in movieArray) {
 console.log(p+':'+movieArray[p].title+'|'+movieArray[p].picture);
 }

localStorage.setItem('movieArray', JSON.stringify(movieArray));
 var retrievedMovieArray = JSON.parse(localStorage.getItem('movieArray'));

console.log('typeof retrievedMovieArray: ' + typeof retrievedMovieArray);
 console.log('retrievedMovieArray:');
 for (var p in retrievedMovieArray) {
 console.log(p +':'+ retrievedMovieArray[p].title +'|'+retrievedMovieArray[p].picture);
 }
 });

In this way we can save and retrieve Javascript object in local storage of HTML5. I hope this post is useful. Thanks for reading.

Detect Internet connection in HTML5

In this quick post we will detect whether browser is connected to Internet or not? There are two ways you can detect it

  1. By making a AJAX call and setting the TimeOut property
  2. Using HTML5

In HTML5 you can detect it as following,

image

This is supported in all modern browsers. In this way you can detect whether browser is connected to Internet or not.