HTML5 – Sibeesh Passion

Programmatically Change The Element Or Page Into Full Screen Mode

SibeeshVenu — Mon, 07 Mar 2016 00:00:49 +0000

In this article we are going to see how we can change any element or any page into full screen mode programmatically. To do this requirement we are going to use client side API requestFullscreen . To make it compatible to all the browsers, we will be using separate API calls for each browsers. By using requestFullscreen , you can easily make the items to be viewable in a full screen mode. That’s cool right? You can use Video’s, Audio’s, Images, Pages or anything. Now shall we go and see this in detail? I hope you will like this.

Download the source code

You can always download the source code here:

Programmatically Change The Element Or Page Into Full Screen Mode

Background

Yesterday I have got a requirement to do the full screen option programmatically in one of my application, I was required to open a chart, which is already being loaded to a page, in full screen mode. I have done that with the help of full screen API. Here I am going to show you that. Now we will start our coding. I hope you will enjoy reading.

Create an Empty Website in Visual Studio

Click File-> New-> Web Site.

Empty Website In Visual Studio

Create a new HTML page

Now create a new page, start coding.

[html]

Programmatically Change The Element Or Page Into Full Screen Mode

[/html]

Using The Code

We will be using pure JavaScript code to do this requirement. Firs of all create the container element and one other element in which we can fire the full screen function in on click event.

[html]

[/html]

Here changeToFullScreen() is the function which does the task.

[js]

[/js]

Now if you run your page in Google Chrome and fire the function, you will be given an output as preceding.

Chnage_Element_To_Full_Screen_In_Google_Chrome_Error

As you can see that the window is opened in full screen, but not the element. To fix this, you must add a custom CSS style as follows. This is a hot fix which is applicable only to Google Chrome.

[css]
#container:-webkit-full-screen {
width: 100%;
height: 100%;
}
[/css]

Now run your page again, and make sure the fix is applied.

Chnage_Element_To_Full_Screen_In_Google_Chrome

Now if you want to escape from full screen whenever user press any keys, you can do that too. You can add a new function as follows.

[js]
function changeToFullScreenOnKeyPress() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
[/js]

And you can call this function in keydown event as preceding.

[js]
document.addEventListener("keydown", function (e) {
changeToFullScreenOnKeyPress();
}, false);
[/js]

Run your page again and notice that the full screen is getting escaped whenever you press any keys.

Complete Code

[html]

Programmatically Change The Element Or Page Into Full Screen Mode

[/html]

Here msRequestFullscreen, mozRequestFullScreen, webkitRequestFullscreen is for Internet Explorer, Mozilla Firefox, Google Chrome respectively.

We have done everything needed, Now it is time to see the output.

Output

Chnage_Element_To_Full_Screen_Click

Chnage_Element_To_Full_Screen_Output

Have a happy coding.

References

Fullscreen_API

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Custom Pager Using prev and next In jQuery

SibeeshVenu — Wed, 21 Oct 2015 10:44:24 +0000

In this post we will create a custom pager using prev and next functions in jQuery. You can treat this post as a simple demo of using prev and next functions. We will be using some html UI elements and we will apply the paging functionality by using native jQuery codes. In this way you can get the information about on which page is requested by the user, once you get it, you can create an jQuery ajax call and fetch the data from the database and show. You need to know the basic of jQuery and CSS before going further. I hope you will like this.

Background

We can find so many pager in on-line. Here in this post I am just trying to populate my own pager. Please be noted that this is just a demo, so that you can not find more functionalities here.

Using the code

First thing you need to do is create a page.

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/html]

Then we will apply some CSS, so that it will look nice.

[css]

[/css]

Now add jQuery reference.

[js]

[/js]

Run your page and make sure that our custom pager design is fine.

Custom Pager Using prev and next In jQuery

Now it is time to add our scripts.

[js]

[/js]

If you notice in the code block, you can see that we are checking $(‘#outer div’).length / 2 < i in each click. This will get true when the user clicked after the selection goes to end. We are just making the iteration to first when this occurs.

We are doing the above mentioned scenario both in prev click and next click. Now it is time for demo right?

Please see the demo here: Custom Pager

That is all. We did it.

Complete Code

[html]

Prev Next In jQuery – Sibeesh Passion

-6

-5

-4

-3

-2

-1

<<<

>>>

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Overwrite CSS Styles Using addClass In JQuery

SibeeshVenu — Wed, 21 Oct 2015 00:06:18 +0000

In this post we will see how we can overwrite CSS styles using addClass method in jQuery. We have so many options to change the styles of a particular element. We can do it by editing the style sheet manually. But what if you want to do the same dynamically? If you need to change a CSS property dynamically, I suggest you to read it here: CSS Important . In this post we are applying more CSS rules to the same element. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

Recently I have got a requirement of changing a CSS property of an element which is common for element. So I wanted to change the CSS property only if my condition becomes true. In this situation I used jQuery addClass to do this requirement. Here I will show you how.

Using the code

First thing you need to do is create a page.

[html]

AddClass JQuery Demo – Sibeesh Passion

AddClass JQuery Demo – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

Now you need to write the scripts.

[js]

[/js]

We are adding a new CSS style second to a class first . We will add this after five seconds of document ready. So now we need to create the styles right?

[css]

[/css]

Now please run your browser, you can see the following output.

Overwrite CSS Styles Using addClass

Now after five seconds, the same element will look as follows.

Overwrite CSS Styles Using addClass

If you look at your browser console, you can see both of the styles are applied to the element.

Overwrite CSS Styles Using addClass

That’s all, now we can see the complete code here.

Here I am using setTimeout as my condition, you can use any condition according to your requirement.

Complete Code

[html]

AddClass JQuery Demo – Sibeesh Passion

AddClass JQuery Demo – Sibeesh Passion

[/html]

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Check for any unsaved changes in page

SibeeshVenu — Tue, 29 Sep 2015 00:04:14 +0000

In this post we will discuss how we can check for any unsaved changes in the page by using JQuery. Normally this may need to be implemented in an application where we need to give any alert if any user try to reload the page when there any unsaved changes in the page. I hope you will like this.

Background

I was creating a page where I have some text boxes, So I wanted to give an alert if user try to get away from the page with out saving the data entered.

Using the code

First of all we will create a page and a html table.

[html]

Check for any unsaved changes in page

Sibi	Ajay
Ansu	Akhil
Shanto	Libin

[/html]

Now if you run your page and, you can see the table.

Check for any unsaved changes in page

No we will create a bool variable which will be true when there is an unsaved data.

[js]
var unsaved = false;
[/js]

What next? We will add call to an existing function when user reloads the page. Sounds good?

[js]
window.onbeforeunload = unloadPage;
[/js]

As you can see we are calling a function unloadPage, preceding is the function definition.

[js]
function unloadPage() {
if (unsaved) {
return "You have unsaved changes on this page.";
}
}
[/js]

Now please run your page and type anything in the text box given, then reload your page.
You will get an alert of You have unsaved changes on this page.. Shall we check that?

Check for any unsaved changes in page

We have done it finally.

Complete Code

[html]

Check for any unsaved changes in page

Sibi	Ajay
Ansu	Akhil
Shanto	Libin

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this requirement in your programming life? Does this article helps you in anyway? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Working With Client Side Local Storage

SibeeshVenu — Mon, 03 Aug 2015 00:09:38 +0000

[toc]

Introduction

In this article, we will learn how to use local storage in HTML5. For many years, we developers were depending on the server only for saving the data. And we used to retrieve the data by sending a request to our server and by manipulating some queries we could manage the formation, updating, insertion and so on. Great, we were doing a fantastic job.

But as the day’s passes, we must move on to the next level. Nowadays all are busy in their life, so a person can wait a maximum of a few seconds for a request that he has given in your blog, or website, or in your product. If it takes much time, he/she will just close the window and start searching for an alternative. Am I right?

Yeah, it happens when you are depending completely on the server. For each query, it will take some seconds. Just because of this, we started using the client-side state management techniques, mostly cookies.

But we do have the following issues if we are using cookies also:

The cookies can have only a limited amount of data, which is definitely not enough for us to work on (4096 bytes).
And as the number of requests increases, the data amount in cookies also increase. So at a point in time, we may encounter some performance issues. So in the modern web, we have a new solution, Local Storage.

Source Code

Download the source code here: Local Storage

Background

Currently, I am working on a dashboard application. As you all know a dashboard application must be as fast as possible. It must not make a user wait. So most of our codes are on the client side. So we are storing the necessary data on the client side itself, that makes my app fast. And we are using jQuery.

Using the code

Now we will work on how to save the data in local storage and retrieve it when we need it.

Saving the Data

To save the data we do have a function called setItem(). We can use the following syntax.

[js]
localStorage.setItem(“item”, “http://sibeeshpassion.com/”)
[/js]

Before going for this, you must check that your browser supports this feature since this is only applicable to modern browsers.

To check whether it supports it or not:

[js]
if (localStorage) {
}
else {
$(“#showitem”).text(“your browser does not support this feature”);
}
[/js]

Retrieving the data from local storage

We can use the getItem() function to retrieve the data from the local storage.

Please see the following syntax.
[js]
var itm = localStorage.getItem(“item”);
[/js]

Great, you have it. Congratulations.

Now we will work on how to remove this item from local storage.

Removing data from the local storage

To remove the data form the local storage, please see the following syntax.
[js]
localStorage.removeItem(“item”);
[/js]

Removing the all data from localStorage

To remove the data form the localStorage, please see the following syntax.
[js]
localStorage.clear();
[/js]

Demo

Here we will create 3 buttons and one h2 tag as in the following markup.

[html]

[/html]

Now we will add the jQuery reference.

[js]

[/js]

Set the Item

[js]
$(“#setitem”).click(function () {
localStorage.setItem(“item”, “http://sibeeshpassion.com/”)
});
[/js]

Once you set the item to localStorage, you can see it in your browser. To see it, press F12 after pressing the set Item button, then go to the resources tab.

Figure: Prior to setting the item

Figure: After setting the item

Get the Item

[js]
$(“#getitem”).click(function () {
var itm = localStorage.getItem(“item”)
$(“#showitem”).text(itm);
});
[/js]

Remove the Item

[js]
$(“#removeitem”).click(function () {
localStorage.removeItem(“item”);
$(“#showitem”).text(”);
});
[/js]

Complete Code

[html]

Use Of Local Storage – Sibeesh|Passion

[/html]

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Basic Difference Between Local Storage and Session Storage in HTML 5

SibeeshVenu — Sun, 29 Mar 2015 20:14:03 +0000

[toc]

Introduction

This article explains what is the basic difference between HTML 5 local storage and session storage. Basically, both session storage and local storage are part of storage mechanism which is introduced with HTML5. By using these two, we can store information on client side itself. I hope you will like it.

If you are new to the term local storage, I recommend you to read my article here: Local Storage

Basic scenario where you can use

If you need to carry a value throughout your application or throughout your pages, you can use local storage. For example, we can store a logged-in username in local storage that we may need to access all the pages. I strongly recommend to not store any secured data (for example a “password”) in local storage.

In some scenario, we may need to set a key element depending on the pages we have in the application. For example, if we need to store the page name (any key element that may be different).
So let’s start

Using the code

Here in my application, I have added two HTML5 pages.

HtmlPage1.html
HtmlPage2.html

In HtmlPage1.html I have set local storage and session storage, now I am trying to access that in HtmlPage2.html. Please see the following source.

HtmlPage1.html
[html]

xmlns=“http://www.w3.org/1999/xhtml”>

Difference between local storage and session storage

[/html]

HtmlPage2.html
[html]

xmlns=“http://www.w3.org/1999/xhtml”>

Difference between local storage and session storage

[/html]

When you run the first page, in the browser console you will see as in the following image.

Figure: Local Storage

Figure: Session Storage

Now it is time to run the second page. Once you run that please check in the console. You can see as follows.

Figure: Local storage

Figure: Session storage

Please note that session storage is null. You can see the session storage only if you set it on that running page.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Creating Custom Color Palette Using JQuery, HTML5, CSS

SibeeshVenu — Sun, 29 Mar 2015 20:11:35 +0000

Today I came across a requirement to integrate a colour palette into my application. When I searched for that, unfortunately I could not find any solution . So I thought of creating a custom color palette tool. This article explains how to do this. I will use this tool in my high chart application. I hope you will like it. Please see the following image if you do not know what a colour palette is.

Background

I am working in a dashboard application, where you can find many charts, maps and grids and so on. If you work with a chart, you will definitely know the word series . Previously we were applying the color for every series separately, in other words the user must select the color for each series or it will take some default color. Your user may think this process is too much work. Here I am providing a custom color palette control.

Download Source Code

Custom Colour Palette

Why

Instead of applying colors separately, we can just select a palette so that the colors set in the selected palette will be applied automatically as in Excel.

Using the code

I am using jquery-1.9.1.js for the implementation in my application, you can get this file from the attached application.

Once you include the jQuery file, please create an HTML5 page as shown below.
[html]

[/html]

Include the jQuery reference as in the following
[js]

[/js]

Now to replace our body tag as shown below
[html]

Custom Color Palette – sibeeshpassion

Change Series Color:
Change Color

Color Palette I :

Color Palette II :

Color Palette III :

Color Palette IV :

Here colors will be changed whenever you select the palette 🙂

[/html]

Here what I am doing is, I am creating a ul element and inside that I am creating some p elements with span. Please see that in the preceding HTML element section.

Once you are done with the elements, what would be the next step? Yeah, we need to style them. Please include the following styles.
[css]

[/css]

Our next step is writing the scripts. Please see that below.
[js]

[/js]

In the script, I am calling the checked event of the check boxes inside the p element and whenever a user selects one, I am finding the parent colors and applying that to the output UI.
That is all. Cool, we have done it.

Complete Code

[html]

Custom Color Palette – sibeeshpassion

Custom Color Palette – sibeeshpassion

Change Series Color:
Change Color

Color Palette I :

Color Palette II :

Color Palette III :

Color Palette IV :

Here colors will be changed whenever you select the palette 🙂

[/html]

Output

Create Custom Colour Palette

Conclusion

I hope you liked this article. Please provide your valuable suggestions.

Kindest Regards
Sibeesh Venu

HTML 5 Elements in a Look: Part 3

SibeeshVenu — Thu, 29 Jan 2015 19:43:00 +0000

Introduction

If you are new to HTML 5, I suggest you to read my other article parts here:

HTML 5 Elements in a Look: Part 1

HTML 5 Elements in a Look: Part 2

Introduction to HTML5 Video

Before going through the video part, let us return to our previous version of HTML and discuss what all the issues are that we have encountered with those versions for playing the videos.

I will list the following problems:

We wanted to have an external plug in like Flash to play the video in our page.

There were no specific standard tags for playing the video.

HTML5 has introduced a new element . Let us see how to use that element.

[html]

It seems your browser is an outdated one, be new year.

[/html]

Please find that I have added only a MP4 type. You can add the ogg type as follows:

[html]

[/html]

Complete Markup

[html]

HTML5 Video -Sibeesh Passion

It seems your browser is outdated one, be new yaar.

Your video URL here.

[/html]

Please note that this tag won’t be supported in IE 8 and below.

Points to remember

Here are some points that you must remember:

The text “controls“ in the video markup is for adding the video player controls like play, pause and so on.

The text “It seems your browser is outdated one, be new yaar.” Will display only if your browser won’t support HTML5.

It is always good to set the width for the video element to avoid the flickering in the browser.

Adding your own controls (play, pause and so on)

You can also add your own controls like play and pause to the video element, if you don’t want to have the built-in control functionality.

Procedure:

You must remove the text controls from the element first.
Add the video tag.

[html]

It seems your browser is outdated one, be new yaar.

[/html]

Add UI elements

[html]

Play/Pause

Big

Small

Normal

Create the functions in the scripts

[html]

[/html]

Complete Markup
[html]

Play/Pause

Big

Small

Normal

It seems your browser is outdated one, be new yaar.

[/html]

Wow, we have created our own controls.

Cool. That is all for today.

See you soon in the next part with another control. Please provide your valuable comments.

Kindest regards,

Sibeesh Venu.

HTML 5 Elements in a Look: Part 1

SibeeshVenu — Thu, 29 Jan 2015 19:39:28 +0000

HTML 5 Introduction

We all are familiar with HTML. Now HTML 5 is the latest version of markup language. HTML 5 has a semantic structure. In HTML 5 we have been given with some controls that will save your time when developing. Now we will see what all the controls and features are that were introduced in HTML 5.

Before we start, please ensure that you have installed Visual Studio 2010 SP1 (or later).

Then enable the HTML option in the target section.

Got to Tools -> Options -> Text Editor -> HTML.

HTML 5 Markup

The DOCTYPE declaration

[html]

[/html]

The character encoding (charset) declaration
[html]

[/html]

HTML 5 Example
[html]

Sibeesh Passion wish you a happy new year

Welcome to Sibeesh Passion

[/html]

Structure of HTML5

As I said earlier, HTML 5 has a semantic structure. It reduces the efforts of a UI developer. The following image will explain the structure.

Before Introducing HTML 5

After Introducing HTML 5

As you can see in the preceding image, HTML 5 has introduced new tags.

Header
Nav
Section
Aside
Article
footer

Adding our own elements!

Yes it is true, we can create our own element by introducing some styles, now we will see how to do this.

To do this we need a markup as follows.
[html]

Your own element

Normal element

< yourelement >My element

Your own element

Normal element

< yourelement >My element

[/html]

Please note that we have created a new element yourelement.

Cool.

See you soon in the next part.

Kindest Regards,

Sibeesh Venu

HTML 5 Elements in a Look: Part II

SibeeshVenu — Thu, 29 Jan 2015 19:37:23 +0000

Introduction

If you are new to HTML 5, I suggest you to read my first part article here: HTML 5 Elements in a Look: Part 1.

New Attribute syntax

In HTML 5, we have new attribute syntax as in the following:

Empty
Unquoted
Double Quoted
Single Quoted

Example

We can assign the text property of an input type as follows.

[js]

[/js]

To make IE lower versions to read HTML5 elements:

Add The Shiv
[js]

[/js]

Apply CSS to Elements

Since we can apply styles to our normal HTML4 elements, we can apply styles to our new semantic elements too.

Example:
[html]
footer{border:1px solid;}
[/html]

The preceding style will be applied to all the footers available in a page.

NB: Please be noted that it is not recommended (Footer, FOOTER) to use upper-case in the elements.

Introduction to Canvas Element

If you want to create some graphic content, the Canvas element is the right choice.

Let us see how to use it.

Declaring the Canvas
[html]

[/html]

Implementing Canvas
[js]
var c = document.getElementById(“canvasExample”); //Get the element
var ctx = c.getContext(“2d”); // Get the context for the element
var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line
grd.addColorStop(0, “blue”); // Apply the colors
grd.addColorStop(1, “white”); // Apply the colors
ctx.fillStyle = grd; //apply the style
ctx.fillRect(10, 10, 150, 80); // Fill
[/js]

Here we are applying the gradient to the canvasExample canvas.

Introduction to SVG

Scalable Vector Graphics is for implementing graphics for the web as canvas. One of the differences between canvas and SVG is that SVG supports event handlers but canvases don’t. We will discuss that later.

Declaring SVG
[html]

[/html]

See the complete HTML here
[html]

Canvas

SVG

stroke=“green” stroke-width=“4” fill=“yellow” />
Bad Luck, It seems your browser won’t support 🙁

[/html]

I hope you have tried this. See you soon with another set of elements in the next article.

Kindest Regards
Sibeesh Venu