Wednesday, August 21, 2013

Lightbox plugin

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.

Posted by at 8 comments:

Friday, March 1, 2013

Jquery animate

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>
<div class="div1">
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/
Posted by at No comments:

Sunday, February 24, 2013

Timer

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/
Posted by at No comments:

Sunday, January 27, 2013

Create objects


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.








Posted by at No comments:

Wednesday, January 2, 2013

Window object

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.

<input type="button" value="open" onclick="openwin()" />
<input type="button" value="close" onclick="closewin()" />
<input type="button" value="reload" onclick="reloadwin()" />

<script type="text/javascript">
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.

<input type="button" value="assign" onclick="assignwin()" />
<input type="button" value="replace" onclick="replacewin()" />

 <script type="text/javascript">
function assignwin(){
x.location.assign("http://feeds.feedburner.com/blogspot/Puccab");
}
function replacewin(){
x.location.assign("http://informativejavascript.blogspot.nl/2013/01/window-object.html");
}
</script>

Click on the button to assign/replace a new window


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>



Informative Javascript
Posted by at No comments:

Tuesday, January 1, 2013

Timer

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>

<script type="text/javascript">
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.

Informative Javascript
Posted by at No comments:
Subscribe to: Posts (Atom)