Convert Text to Image using canvas

With using canvas we can export image with dynamic text. Let see example below.

HTML code

<h2>Text</h2>
<div id="contentToWrite1" style="border: solid 1px gray; padding: 5px;">
first line
</div>
<br />
<br />
<div id="contentToWrite2" style="border: solid 1px gray; padding: 5px;">
second line
</div>
<h2>Canvas</h2>
<canvas id="canvas" width="200" height="200" style="border: solid 1px gray;">
</canvas>
<br />
<h2>Exported Image</h2>
<img id="exportedImage" width="200" height="200" src="#" />
<br />
<input type="button" name="name" value="export canvas to image" onclick="exportImage();" />

JavaScript code

window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "20px Georgia";
var ele = document.getElementById("contentToWrite1");
var ele1 = document.getElementById("contentToWrite2");
if (ele.textContent) {
// for firefox
context.fillText(ele.textContent, 10, 90);
context.fillText(ele1.textContent, 10, 110);
} else {
// for other browser
context.fillText(ele.innerText, 10, 90);
context.fillText(ele1.innerText, 10, 110);
}
}
function exportImage() {
var img = document.getElementById("exportedImage");
img.src = canvas.toDataURL('image/png');
}

On windows load function creates object of canvas and context of canvas. We will use different properties and method of context to
render content on canvas.

  • context.font : This property used to set font style to content on canvas.
  • context.fillText(textToWrite,x,y): this method used to render text on canvas.

By using above methods we have rendered content on canvas, looks like below.

Convert Text to Image using canvas

When we click on button export ‘canvas to image’ image will be set to html image element below to canvas.

  • canvas.toDataURL: This is canvas method to render it as image.

Enjoy JavaScript…

Call function of the parent window from iframe window from JavaScript

You can call code of the parent window form child window.

f you open window by using iframe, you can communicate from child window with the parent.

Let’s see an example

Page1.html (Parent window)
<script>
        function HelloFromChild(name) {
            alert("Hello " + name + " , (called from child window)");
        }
    </script>
<iframe src="Page2.html" width="200"></iframe>
Page2.html (child window opened in iframe)
<script>
        function onClick() {
            parent.HelloFromChild(document.getElementById("name").value);
        }
</script>
Iframe page
<input type="text" name="name" value="techie" id="name" />
<button onclick="onClick();">Call Parent Window Function</button>

When you open Page1.html in browser you will see the output as below. Click on the button to call parent function.

When you click on the button, onClick event will be fired. onClick event will call function from parent window by using parent variable. By using parent variable you can call function from parent window.

Call function of the parent window from iframe window from JavaScript

 

Check internet connection using JavaScript

Sometimes you need to check device have internet connection or not.

This can be done by simple JavaScript function

var connectionMessage = "Your device have internet connection.";
var noConnectionMessage = "Ohh! It seems that your device dont have internet connection.";
window.onload = checkInternetConnection;
function checkInternetConnection() {
  var isOnLine = navigator.onLine;
  if (isOnLine) {
    alert(connectionMessage);
  } else {
    alert(noConnectionMessage);
  }
}

Enjoy JavaScript…

Making Field Read only in SharePoint 2010

Many times you need to disable the fields in SharePoint form for ‘New Item’. By using JavaScript we can disable field in easier way. Lets
discuss an example.

Using JavaScript

Find field id by inspecting element in browser’s developer tools. The filed id is something like this
‘ctl00_m_g_efe2ea91_242b_4746_bb44_5a67e8cbc5c2_ff331_ctl00_ctl00_DateTimeField_DateTimeFieldDate’

Then write down few steps to disable it.

function DisableField()
{
  try
  {
    var element = document.getElementById('ctl00_m_g_efe2ea91_242b_4746_bb44_5a67e8cbc5c2_ff331_ctl00_ctl00_DateTimeField_')
    element.disabled=true;
  }
  catch(err)
  {
  }
}

Now you need to call the function ‘DisableField()’ on body load.

SharePoint gives out of the box functionality for JavaScript developer to inject custom function into function list of SharePoint function lists.

You can push ‘DisableField()’ function as follows.

_spBodyOnLoadFunctionNames.push("DisableField()");

Enjoy JavaScript…

Fixed width, centered design in SharePoint site using css

By default SharePoint gives 100% width to sites created. We can fixed width of site by using custom css and changing some class names
in master page.

Lets have look to the solution.

div.s4-title.s4-lp, body #s4-mainarea, #s4-topheader2, #s4-statusbarcontainer
{
width: 960px;
margin: auto;
padding: 0px;
float: none;
background-image: none;
background-color: white;
}

To get fixed width design add css classes to the following element.

Default

<div id="s4-workspace">

Fixed Width

<div id="s4-workspace">

Default

<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

Fixed Width

<div id="s4-titlerow"  class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">

Fixed width, centered design in SharePoint site using css

JavaScript – Strict mode

Strict mode is new feature in ECMA Script 5. This mode allows you to run program, piece of program (context) in strict mode.

This mode will help your code by throwing error if your program violets standard.

Let’s see example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use Strict mode</title>
</head>
<body onload="loadDoc()">
<div id="content1"></div>
<div id="content2"></div>
<script type="text/javascript">
var ele1 = document.getElementById("content1");
foo1 = "Hello";
ele1.innerHTML = "" + foo1;
function loadDoc() {
"use strict";
var ele2 = document.getElementById("content2");
foo2 = "Hello from page load";
ele2.innerHTML = "" + foo2;
}
</script>
</body>
</html>

In above example we have used foo1 and foo2 variables without declarations.
Here we put “use strict”; statement in loadDoc() function then it will throw error like below(tested in chrome). Uncaught
ReferenceError: foo2 is not defined Just add declaration of foo2 in loadDoc() function and browser will not throw any error.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use Strict mode</title>
</head>
<body onload="loadDoc()">
<div id="content1"> </div>
<div id="content2"> </div>
<script type="text/javascript">
var ele1 = document.getElementById("content1");
foo1 = "Hello";
ele1.innerHTML = "" + foo1;
function loadDoc() {
"use strict";
var ele2 = document.getElementById("content2");
var foo2 = "Hello from page load";
ele2.innerHTML = "" + foo2;
}
</script>
</body>
</html>

Output is:

JavaScript Strict Mode

If you put “use strict” at top of file, then it will enable strict mode in entire file. It keeps your code safe and standard.

Note: You will not see any error in IE9 or below browser. IE 10 will support strict mode.

http://msdn.microsoft.com/en-us/library/ie/hh673540(v=vs.85).aspx

JavaScript – Ternary Operator

Following is syntax of ternary operator in JavaScript.

test?expression1:expression2

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ternary Operator</title>
</head>
<body> <p id="demo"> </p>
<script type="text/javascript">
var ele = document.getElementById("demo");
var now = new Date();
var greeting = "Current time: " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + " " + ((now.getHours() < 11) ? "am" : "pm"); 
ele.innerHTML = "" + greeting;
</script>
</body>
</html>

Output is:

Current time: 17:33:14 pm

Here we have used ternary operator to show ‘am’ or ‘pm’ next to current time. It checks hours is less than 11 then it add am or add pm next to time

app_offline.htm, make your application offline in minute

Some time you need to change/update database or update back end services or just shut down the application. During this activity you need to make your application offline. So, no user can access your web application during this activity.

app_offline.htm file make your work easier. This is very quick solution to make your application offline.

Create html file named app_offline.htm and write some custom message into the file just like ‘Application is down due to maintenance’. Place this file in the root directory of your application. As soon as you place file, application will be made offline to users and will show content of the app_offline.htm file for all the requests. Also the application will shut down and application domain will be unload from the server.

Existing request to the application will continue as it is. Only new request to the application  will get the content of the app_offline.htm file.

If you have added the reference of the JavaScript and the style sheets to your app_offline.htm file, this will not work. The request to these files will not be processed. So make your scripts and style inline. For the image you can use base 64 data of the image. Here you will find the various tool to convert image to base 64 from Google search.

 

JavaScript – Hello world! example

In this post we are going to see simple hello world example. Below example writes “Hello world” to html document.

<html>
<body>
<h1>Hello world example</h1>
<script type="text/javascript">
document.write("<p> hello world!</p>");
</script>
</body>
</html>

Output is:

Hello world example
hello world!

In above example JavaScript code is written in <script> tag. Use type=” text/javascript” attribute to declare JavaScript language.
Statements inside <script> tag are executed by browser.

What is document?

This is object of html document loaded into browser. We have used write method to write content into html page. We will see all methods and properties in next post. Note: Don’t use document.write(“’); method in real life.. It will overwrite entire page with  contents provided in the method. We have used for demo purpose. We will see other techniques to write content on html page.

Introduction to JavaScript

JavaScript developed by Netscape in 1995. JavaScript is structured language much similar to ‘C’ language. Today JavaScript is
essential and popular language.

What is JavaScript?

JavaScript language is scripting language and known to all major browsers like IE, Mozilla, Chrome, Safari, and Opera. This language used
for client side scripting. It executes at client side i.e. into browser.

What JavaScript provides?

Client side events:

JavaScript supports client side events of an HTML element. For example, button is clicked, page finished loading.

JavaScript can interact with elements:

JavaScript can access, change content of element.

Validate user input:

JavaScript makes easy to validate the user input at client side. We can save call to server. We can make page more interactive using
JavaScript.

To run JavaScript code, you need browser which supports JavaScript.