Javascript

Lightbox plugin

2013-08-21T13:45:00.003+02:00

LightBox

How to implement a basic lightbox plugin, follow the below steps.

1. Import the 3 files by clicking on the links and save them in a forlder and make a note of the path.
jquery-1.10.2.min.js
lightbox.js
lightbox.css

2. Save the below images
image-1.jpg
image-2.jpg
overlay.png (download the image shown below)

3. Now implement all the above resources into your HTML source as shown below.

<!DOCTYPE html>
<html>
<head>
<title>Lightbox</title>
<script type="text/javascript" src="c:/js/lightbox/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="c:/js/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="c:/js/lightbox/css/lightbox.css" media="screen" />
</head>
<body>
<a href="c:/js/lightbox/img/demopage/image-1.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 1 </a> <br>
<a href="c:/js/lightbox/img/demopage/image-2.jpg" rel="lightbox" alt="lightbox image" title="You can add text here"> Image 2 </a>
</body>
</html>

4. section highlighted in red should be replaced by the path you have saved the files and images.
5. Also note that section highlighted in yellow is mandatory you have to add it.
6. View the page on the browser and click on the image links.

If you come across with any error message or unable to implement you can leave a comment below and we will get back to you shortly.

Jquery animate

2013-03-01T15:31:00.003+01:00

Jquery Animate.

A small example to illustrate the animate function.In this example I have used 3 buttons which modifies the fontsize.

<button class='increase'>Increase</button>

<button class='decrease'>Decrease</button>

<button class='reset'>Reset</button>

This is the sample text and now check how the font increases and decreases when clicked on the respective buttons.

<br />

</div>

******************script****************

$(document).ready(function() {

(function display(){

$('.increase').on('click',function(){

$('div.div1').animate({

fontSize:'+=1'

},100);

});

$('.decrease').on('click',function(){

$('div.div1').animate({

fontSize:'-=1'

},100);

});

$('.reset').on('click',function(){

$('div.div1').animate({

fontSize:'16'

},100);

});

})();

});

You can also view the live working example on the below mentioned link.

http://jsfiddle.net/informativejavascript/9YjTM/5/

Similarly you can implement the image resize functionality. I can check the below link for working example

http://jsfiddle.net/informativejavascript/vENbK/2/

Timer

2013-02-24T15:36:00.002+01:00

Timer using Jquery.

<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

</head>
<body>
<input ="text" id="i1"/>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>
<script>
var counter=0;
var timer=0;
$('#start').on('click',function(){
timer=setInterval(function(){
$('#i1').val(++counter);
},300);
});

$('#stop').on('click',function(){
clearInterval(timer);
});

$('#reset').on('click',function(){
$('#i1').val(0);
counter=0;
});

})();
</script>
</body>
</html>

You can check the live demo on http://jsfiddle.net/informativejavascript/AWGD6/9/

Create objects

2013-01-27T18:12:00.003+01:00

What is an object
object is a special kind of data which properties and methods.

We can create objects in multiple ways.

1.
var obj1={
name:"John",
age:20
};

2.
var obj2=new Object();
obj2.name="Jim";
obj2.age=30;

How create a object within a object for example create a object(obj3) within (obj1)

var obj1={
name:"John",
age:20,
obj3={
city:"Enschede",
country:"The Netherlands"
}
};

How to access the properties and the values

console.log(obj1.name);//output is John
console.log(obj1.age);//20
console.log(obj2.name);//Jim
console.log(obj2.name);//30
console.log(obj1.obj3.city);//Enschede
console.log(obj1.obj3.country);//The Netherlands

How to create functions.

Syntax is as below.
var functionname=function(){
};

Example

var display=function(name,age){
this.name=name;
this.age=age;
};

or

function display(name,age){

this.name=name;
this.age=age;

};

lets create an example in which different object try to access a single method.

1. create an object.

var object1={
name:"John",
age:30
};

2. Create the method.

var method1=function(name,age){
this.name=name;
this.age=age;
};

3. Relate the object to the method.

object1.method1=method1;

4. check the output.

console.log(object1.name);//John
console.log(object1.age);//30
object1.method1("Jason",40);
console.log(object1.name);//Jason
console.log(object1.age);//40

or you can also use this

function function1(name,age){
this.name=name;
this.age=age;
};

var obj1=new function1("John",30);
var obj2=new function1("Jason",32);
console.log(obj1.name);
console.log(obj1.age);
console.log(obj2.name);
console.log(obj2.age);

Concludes by using this keyword we can use as many objects as possible.

How to add a new property to an object.

consider the below object

var obj4={
name:"Helen",
age:35
};

obj4.city="london";

console.log(obj4.city);//london

Hope this post was informative, will get back with more updates.

Window object

2013-01-02T21:52:00.003+01:00

This post will help you to deal with window, location and history objects.

So lets get started.....
we will see how to open a new window and close the window. I have pasted the the code below and you can also view the live working example regarding the same.

function openwin(){

x=window.open('http://informativejavascript.blogspot.nl','','width=800px,height=250px');

}
function closewin(){
window.close(x);
}
function relaodwin(){
location.reload();
}

</script>

Click on the button to open/close the new window, while reload will reload the page.

Now moving on to the location object.

We have assign, reload and replace methods, we will use the same window created in the previous section.

Next is the history object

History object are used to create back,forward button and length property which loads the previous URL's in the history list.

<input type="button" value="back" onclick="backwin()" />

<input type="button" value="forward" onclick="forwardwin()" />
<input type="button" value="go" onclick="gowin()" />
<input type="button" value="length" onclick="lengthurl()" />

<script type="text/javascript">
function backwin(){
history.back();
}
function forwardwin(){
history.forward();
}
function gowin(){
history.go();//go back 2 pages
}
function lengthurl(){
alert(history.length);
}
</script>

Timer

2013-01-01T19:33:00.001+01:00

How to set Timer using Javascript.

Below code explains how to set a timer and stop a timer, you will also find a working example regarding the same.

<form name="f1">
<input type="text" id="but" />
<input type="button" value="start" onclick="timer()" name="theButton" />
<input type="button" value="stop" onclick="stoptimer()" />
</form>

var count=0;

var x;

function timer(){

x=setTimeout("timer()",1000);

count=count+1;

document.getElementById("but").value=count;

}

function stoptimer(){

clearTimeout(x);

}

</script>

Click the below start and stop button to view the timer.

Tools

2012-12-30T21:44:00.002+01:00

How to use Sublime Text 2

I hope you have downloaded the Sublime Text 2 from the link mentioned on the previous Page.If not you can use this link to download Sublime Text 2

Next download the firebug tool and this is applicable if you are using Firefox browser, once installed open the Firefox browser and press F12. You can use F12 on any of the browser it could be IE or chrome you would get the small window on the bottom of a screen as shown below.

You can use F12 key to on the firebug option and F12 to close the firebug.

To know more on using firebug tool please visit the below link How to use firebug

Hope you found this post informative, Please visit my posts regularly for more details.

Cookies

2012-12-30T14:14:00.002+01:00

Javascript Cookies

Cookie

A cookie is a piece of text that a Web server can store on a user's hard disk. Cookies allow a Web site to store information on a user's machine and later retrieve it.For example, a Web site might generate a unique ID number for each visitor and store the ID number on each user's machine using a cookie file.

when are cookies created.

when you load a webpage,click on ads, submit forms.

what does the text file consists of

name-value pair containing the actual data
expiry date
path and domain of the server to which the cookie details should be sent to.

Sample cookie file

UserID    A9A3BECE0563982D    www.goto.com/


It is possible to retrieve other cookie information stored on the user's system.

Types of cookie

Firt Party Cookies are written by your site and can only be read by your site.
Third Party Cookies are created by advertising in your page that is loaded from a third party site. These can only be read by the advertising code on any site displaying the same ads.
Session Cookies are not actually written to a file but are stored in the browser itself. These cookies only last as long as the browser is open.

what are the steps involved in cookie creation.

If you type the URL of a Web site into your browser, your browser sends a request to the Web site for the page For example, if you type the URL http://www.google.com into your browser, your browser will contact Google's server and request its home page.
When the browser does this, it will look on your machine for a cookie file that google has set. If it finds an Google cookie file, your browser will send all of the name-value pairs in the file to google's server along with the URL. If it finds no cookie file, it will send no cookie data.
Google's Web server receives the cookie data and the request for a page. If name-value pairs are received, Google can use them.
If no name-value pairs are received, Google knows that you have not visited before. The server creates a new ID for you in Google's database and then sends name-value pairs to your machine in the header for the Web page it sends. Your machine stores the name-value pairs on your hard disk.
The Web server can change name-value pairs or add new pairs whenever you visit the site and request a page.

There are other pieces of information that the server can send with the name-value pair. One of these is anexpiration date. Another is a path (so that the site can associate different cookie values with different parts of the site).

How are cookies useful?

Track the number of site visitors

Sites can accurately determine how many people actually visit the site. the only way for a site to accurately count visitors is to set a cookie with a unique ID for each visitor. Using cookies, sites can determine how many visitors arrive, how many are new versus repeat visitors and how often a visitor has visited.

customization

For example, if you visit msn.com, it offers you the ability to "change content/layout/color." It also allows you to enter your zip code and get customized weather information.

E-commerce sites can implement things like shopping carts and "quick checkout" options.

How to create a cookie using javascript.

Create the front end to capture the cookie value.

Enter the cookie value<input type="text" name="cookievalue" />

<form>

2. now create the function createcookie.

function createcookie(name){

var x=document.f1.cookievalue.value;

if(!x){

alert("enter values");

}

else{

callcookie(name,x,2); // created cookie for 2 days

alert('cookie created');

}

3. Create function call cookie which is the main cookie creation;

function callcookie(name,value,days){

if(days){

var d=new Date();

d.setTime(d.getTime()+(days*24*60*60*1000));

var expires = "; expires="+d.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

4. Now we have created the cookie, its time to read the created cookie

create a button or s link so that we can call the function readcookie

5. Create the function readcookie

function readcookie(name){

var allcookie=document.cookie;

var cookiesplit=allcookie.split(';');

for(var i=0;i<cookiesplit.length;i++){

name=cookiesplit[i].split("=")[0];

value=cookiesplit[i].split("=")[1];

alert("cookie is : " + name + " and Value is : " + value);

}

6. Delete/clear the Cookie.

7. Create the function eraseCookie

function eraseCookie(name) {

callcookie(name,"",-1);//by setting day to -1 it clears the cookie

}

you can check the cookie creation by entering the value in the below text field.

Array object

2012-12-27T23:39:00.003+01:00

List of array methods

1.toString()
2.join()
3.sort()
4.reverse()
5.concat()
6.push()
7.pop()
8.shift()
9.unshift()
10.slice()
11.splice()

toString() is used convert the array element into string separated by comas. for example

var x=new Array("apples","orange","grapes");
document.write(x.toString()); //output is apples,orange,grapes

join() is used to combine each element in the array with given parameter, for example.

var x=new Array('a','s','d','f','g');
document.write(x.join('*'));//output is a*s*d*f*g

sort() is used to sort the array in ascending order. for example

var y=new Array('a','s','d','f','g');
document.write(y.sort());//output is a,d,f,g,s

consider another example

var y=new Array(10,30,45,23,78,1,23);
document.write(y.sort());//output would be 1,10,23,23,30,45,78

If you consider the same array y and wish to reverse the order hen we cannot use reverse function instead we need to use the below function.

var y=new Array(10,30,45,23,78,1,23);
document.write(y.sort(function(a,b){return b-a;}));//output would be 78,45,30,23,23,10,1

For more details refer -Sort function

concat() is to combine arrays, for example

var x=new Array(10,20,78,1,3);
var y=new Array('a','g','r');
document.write(x.concat(y));//output is 10,20,78,1,3,a,g,r

pop()- pop function is used to delete the last element in the array and output the deleted element.
for example

var x=new Array(10,20,30,40);
document.write(x.pop());//this would delete 40 and output 40;

shift() - Similar like pop function, shift is used to delete the first element in the array and output the deleted element.for example

var x=new Array(10,20,30,40);
document.write(x.shift());//this would delete 10 and output 10;

push() - Shift method is used to add an element at the end of the array and return the length of the array.
for example

var x=new Array(10,20,30,40);
document.write(x.push(99));//and the output would be the length of the new array which is 5, which indicates that 99 has been added as the last element in the array.

unshift()- unshift method is used to add an element to the beginning of the array and return the length of the array.for example

var x=new Array(10,20,30,40);
document.write(x.push(99));//and the output would be the length of the new array which is 5, which indicates that 99 has been added as the first element in the array.

slice()- slice method is used to retrieve a part of the array.
for example

var x=new Array(10,20,30,40);
document.write(x.slice(1,3));//output would be 20,30

splice() - Splice method performs two function one is inserting and deleting elements from the array.

for example

var x=new Array(10,20,70,40);
document.write(x.splice(2,1,30));//output is 70
document.write(x.toString());//output is 10,20,30,40

explanation
(x.splice(2,1,30)) - this indicates that it add 30 to the 2 nd position and delete 1(one) element from the 2nd position.

Hope this post was useful,will get back with some more post.

Global object

2012-12-26T17:57:00.001+01:00

List of global objects are.

eval()
escape()
unescape()
isNaN()
isfinite()

eval() is used to evaluate expression, which is provided within the parenthesis. for example.

eval((2*3)+5); //output is 11
Click on the eval button and try with expression.

escape('informative javascript'); //output is informative%20javascript

Click on the escape button and try with value.

unescape('informative javascript'); //output is informative javascript

Click on the unescape button and try with values.

isNaN(10); this check if the specified number is not a number, the output is false because 10 is a number.

Click on the NaN button and try with values.

isNaN('a'); this is not a number hence it reflects true in the output.

Click on the NaN button and try with value.

isfinite(2334); checks if the entered value is finite or not.output is true in this case.

Click on the Finite button and try with values.

Hope this post was informative , will get back with more posts.

Math function

2012-12-25T23:08:00.000+01:00

This post will demonstrate the commonly used Math functions.

1. abs() - this function is used to provide the absolute value(which ignores the negative sign). you can try this function by clicking the button and entering a value to find its absolute value.The code is avaliable

<html>
<input name="button" onclick="abs()" type="button" value="Absolue" />
<script type="text/javascript">
function abs(){
absvalue = prompt("Please enter a number:", " ");
alert('Absolute value of the number::'+Math.abs(absvalue));
}
</script>
</html>

2. ceil() - This function provides the next highest integer value.
Click on the ceil button to explore the functionality.

<html>
<input onclick="ceil()" type="button" value="ceil" />
<script type="text/javascript">
function ceil(){
ceilvalue = prompt("Please enter a number:");
alert('Ceil value of the number is::'+Math.ceil(ceilvalue));
}
</script>
</html>

3. floor() - This function provides the next lowest integer value.
Click on the floor button to explore the functionality.

<html>
<input onclick="floor()" type="button" value="floor" />
<script type="text/javascript">
function floor(){
floorvalue = prompt("Please enter a number:");
alert('Floor value of the number is::'+Math.floor(floorvalue));
}
</script>
</html>

Please note while using the ceil and floor function with (negative (-) values) the logic is different for example ceil value of -45.9 is -45 and not -46, similarly floor value of -27.8 is -28 and not -27.

5. random() - this number is used to generate random numbers of no particular order.
Click on the button and check that every time you are displayed with different values.

<html>
<input onclick="random()" type="button" value="Random" />
<script type="text/javascript">
function random(){
alert('Random number::'+Math.random());
}
</script>
</html>

6. max() - This function aids in finding the maximum value out of the given values.

<html>
<script type="text/javascript">
function max1(){
var t1=document.for1.txt1.value;
var t2=document.for1.txt2.value;
var t3=document.for1.txt3.value;
alert('Max value of the number is::'+Math.max(t1,t2,t3));
}
</script>
<form name="for1">
Enter the first number:<input name="txt1" type="text" /><br />
Enter the second number:<input name="txt2" type="text" /><br />
Enter the Third number:<input name="txt3" type="text" /><br />
<input onclick="max1()" type="button" value="Max value" />
</form>
</html>

7. min() - This function aids in finding the minimum value out of the given values.

<html>
<script type="text/javascript">
function min1(){
var t1=document.for2.tx1.value;
var t2=document.for2.tx2.value;
var t3=document.for2.tx3.value;
alert('Max value of the number is::'+Math.min(t1,t2,t3));
}
</script>
<form name="for2">
Enter the first number:<input name="tx1" type="text" /><br />
Enter the second number:<input name="tx2" type="text" /><br />
Enter the Third number:<input name="tx3" type="text" /><br />
<input onclick="min1()" type="button" value="Minimum value" />
</form>
</html>

8. round() - This function rounds to the next integer value.
Click on the round button to explore the functionality.

<html>
<input onclick="round()" type="button" value="Round" />
<script type="text/javascript">
function round(){
roundvalue = prompt("Please enter a number:");
alert('Round value of the number is::'+Math.round(roundvalue));
}
</script>
</html>

String object

2012-12-25T20:26:00.003+01:00

The most commonly used Javascript String objects are listed below with the usage.

1. length()
Length function is used to determine the length of string but it doesn't use the index count. Always length of string is one more than the index of the last character. for example

var x="Javascript";
/* index starts with 0 and the last index is 9, but length would be last index +1 which is (9+1=10). hence length of the string is 10 and not 9.*/
var x="Javascript";
alert(x.length()); //output is 10;

2. charAt()
This function take one parameter which would be the index value and identifies the corresponding character.

var x="javascript";
alert(x.charAt(5));//output would be c

3. indexOf()
This string function provides the corresponding index value of the string.

var x="javascript";
alert(x.indexOf('s'));//output would be 4

4. LastIndexOf()

This string function provides the corresponding index value of the last occurrence of the character specified.

var x="javascript";
/* we know that character 'a' appears twice in the string, inorder to track the index value of the last occurence of the character 'a', we use this function.*/
alert(x.lastIndexOf('a'));//output would be 3

5. substring()
If you would like to retrieve a part of the string then this function could be used, unlike others this function requires 2 parameter which holds the index values of the desired string.

var x="javascript";
alert(x.substring(4,10)); //output would be script

6. split()

Split function takes one parameter as delimiter and split the string into array of strings, for example.

var x="informative javascript";
alert(x.split(" "));
/* firstly i have used space as the delimiter, now by applying the split function, it splits the string after space and adds them to array.note the output would be (infirmative,javascript)*/

7. toUpperCase(),toLowerCase()
These functions are used to transform the given string to uppercase and lower case.

var x="JavaScript";
alert(x.toUpperCase());//output would be JAVASCRIPT.
alert(x.toLowerCase());//output would be javascript.

Date Display

2012-12-25T16:39:00.002+01:00

Date Function

This post illustrate as how to display the current date on a button click.The date format that I have used in the below example is dd/mm/yyyy. we can imply different formats.

1. Add the below code in the body section of the HTML file.

<input type="text" id="dis" /><br />

<input type="button" value="Display Date" onclick="display()" />

2. Add the below script in the .js file or you could implement the script in the head section of the HTML file.

function display(){
var x="You have clicked";
var d=new Date();
var date=d.getDate();
var month=d.getMonth();
month++;
var year=d.getFullYear();
document.getElementById("dis").value=date+"/"+month+"/"+year;
}

Hope this post was informative. Will get back with more posts shortly.

Convert Int to string

2012-12-25T00:33:00.001+01:00

Importance of +""

We all are aware of string to Int conversion,(which could be accomplished by parseInt) but how do we convert a Int to string? We do have multiple solutions but one of the most easiest and commonly used procedure is +"".

Below example illustrates the same.

var x=Math.random(); // this generates random number and type of x is number.

var x=Math.random()+""; // now check the type of x its string!!!! how is that possible.

Note: Just by using +"" it converts the type from number to string. This implementation is mostly used in displaying date. It helps to CONCAT the date, month or year value instead of adding them.

Hope this post was helpful. Will be adding some more post shortly.

Add two numbers

2012-12-25T00:01:00.002+01:00

Adding Two numbers

This post focuses on adding two numbers, adding two numbers does not mean static value but dynamic inputs with a simple number validation. Below is the step by step procedure.

Create a index.html and place the below code in the body section of the HTML file.

<!DOCTYPE HTML>

<head>

<title>Add two numbers</title>

</head>

<body>

Enter the first number: <input type="text" id="txt1" /><br />

Enter the seccond number: <input type="text" id="txt2" /><br />

</body>

</html>

Create a javascript file(script.js) with the below content.

function call(){

var q=parseInt(document.getElementById("txt1").value);

var w=parseInt(document.getElementById("txt2").value);

var result=q+w;

if(isNaN(q)||isNaN(w)){

alert("please enter a number");

}

else

{

var result=q+w;

alert("The sum is " +result);

}

Please do not forget to include the javascript file(script.js) in the index.html.

In this example you would have observed the following javascript terms.

onclick
document.getElementById
parseInt
isNaN

1. onclick-In the above example onclick it calls the function call();

2. document.getElementById -gets the values entered in the input fields which defined with id's txt1 and txt2.

3.parseInt - converts the value to Int type.

4.isNaN - checks if the value is NaN.

Couple of things to be noted

document.getElementById always returns a string value, so we need to convert the value to Int(parseInt) for mathematical operations.
In order to ensure that the entered inputs are only numbers , a if condition is implemented to check the values. If the entered value is not a number then it would alert with(please enter a number).

Thorough this example we can add dynamic inputs and validate.

Hope this post was informative, would be adding some more post shortly.