javascript – Page 2

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">

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:

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

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.