Monday, November 25, 2013

Print the page using javascript

<!DOCTYPE html>
<html>
<HEAD>
<title>Print the page using javascript</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function varitext(){
var printContents = document.getElementById('printtext').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
//  End -->
</script>
<!-- Remove header and footer text in the print page -->
<style>
@media print {
 @page { margin: 0; }
 body { margin: 1.6cm; }
}
.printtext-content{
border:1px solid #000;
padding:10px;
font-weight:bold;
}
.printtext-content .content-title{
text-align: center;
text-decoration: underline;
font-size: 24px;
}
</style>
</HEAD>
<BODY>
<div >
<div id="printtext">
<div class="printtext-content">
<p><div class="content-title">SAYONARA</div></p>
<p>
As a number of you already know that today is my last day @IndiaNIC . It's hard to imagine that I won't be coming here from tomorrow. Things will be different, life won't be the same.
</p>
<p>
Everybody comes office to work , to gain knowledge , to make money  . but it;s the friends and colleagues who give me strength to come everyday at the same place and do the same thing again and again . i made life long friends @IndiaNIC, which is the only thing i cherish about.
</p>
<p>
I want you all to know that I am truly leaving here with mixed feelings; happy about my new career opportunity (really happy), but sad to be leaving such a wonderful friends and colleagues. The last   years as a member of IndiaNIC was the best period of my career so far.
</p>
</div>
</div>
<form>
<INPUT NAME="print" TYPE="button" VALUE="Print this Document!" ONCLICK="varitext()">
</form>
</div>
</html>

Thursday, November 21, 2013

Simple banner rotator with jQuery

 <!DOCTYPE html>
<html>
  <head>
   <!--Included jquery script library-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(window).load(function() {
        startRotator("#rotator");
      })
//Initialise rotate js
 function rotateBanners(elem) {
 var active = $(elem+" img.active");
 var next = active.next();
 if (next.length == 0)
next = $(elem+" img:first");
 active.removeClass("active").fadeOut(200);
 next.addClass("active").fadeIn(200);
}

function prepareRotator(elem) {
 $(elem+" img").fadeOut(0);
 $(elem+" img:first").fadeIn(0).addClass("active");
}

function startRotator(elem) {
 prepareRotator(elem);
 setInterval("rotateBanners('"+elem+"')", 2000);
}
</script>
<!-- Initialise rotate css -->
<style>
#rotator img { position: absolute; }
</style>
  </head>
<body>
 <!-- Rotator images -->
  <div id="rotator">
    <img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg" width="550" />
    <img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Garden.jpg" width="550" />
    <img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Green Sea Turtle.jpg" width="550" />
    <img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg" width="550" />
    <img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Garden.jpg" width="550" />
    <img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Green Sea Turtle.jpg" width="550" />
   
  </div>
</body>
</html>