Online Tool to Convert Webpage(HTML) into PDF Format

You may be saving a webpage as a html file to read it offline. But instead of saving it as html, you can convert a webpage into pdf format. This can prove to be more effective way of viewing data offline.

html-2-pdf.com is an online tool to convert webpages into PDF(Portable Document Format) documents. It’s basically an online converter which could transform any websites to a PDF document. Generally it could be more useful if you want to print a website.

It is very simple to use this tool. Just enter the URL of the web page which you want to be converted and few seconds after that it is ready to be downloaded. The site is just an interface of the amazing html to pdf library.

Due to some reasons there are websites which are not converted correctly. This is because of HTTP headers which these sites restricting.

A Simple jQuery Image Fade In/Fade Out With A Delay

Simple jQuery

 

 

Clients looooooove images that fade in and fade out on home pages. Flash was once the main tool of choice for this but jQuery now lets us do it with less code and guarantees that things will show up on multiple devices, iPhones included.

I had to do this recently for the project

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A Simple jQuery Fade In/Fade Out</title>
 
<style>
#picOne, #picTwo {
position:absolute;
display: none;
}
 
#pics {
width:100px;
height:100px;
}
</style>
 
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(document).ready(function() {
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500);
});
</script>
 
</head>
<body>
 
<div id="pics">
<img src="firstPic.gif" width="100" height="100" id="picOne" />
<img src="secondPic.gif" width="100" height="100" id="picTwo" />
</div>
 
</body>
</html>

Let’s review the specific parts of the code that make the fade in/fade out work…

We create unique CSS IDs for each of our two images. They need to be hidden when the page first loads and also need to be stacked one on top of the other, so we respectively use display:none andposition:absolute. We also need to create a containing <div> for our images, so we create a unique CSS ID called “pics”:

<style>
#picOne, #picTwo {
display: none;
position:absolute;
}
 
#pics {
width:100px;
height:100px;
}
</style

We have to embed the jQuery library into our web page…in this case, I embedded the one hosted over at jQuery.com:

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

As soon as the page is loaded, the jQuery .fadeIn() function fades in our first image in 1500 milliseconds (or, 1.5 seconds). The .delay() function acts as a counter and waits 3500 milliseconds (or, 3.5 seconds), then the .fadeOut() function fades it out in 1500 milliseconds (or, 1.5 seconds).

$(‘#picOne’).fadeIn(1500).delay(3500).fadeOut(1500);

At the same time that the first image is doing its thing on page load, the .delay() function makes the second image wait 5 seconds before the .fadeIn()function fades it in in 1.5 seconds.

$(‘#picTwo’).delay(5000).fadeIn(1500);

We place our two images in our “pics” <div> tag. The images and <div> tag are of equal width and height. And since the images were styled with position: absolute, they will be stacked one on top of the other. Whichever one is listed first is the one on top:

<div id="pics">
<img src="firstPic.gif" width="100" height="100" id="picOne" />
<img src="secondPic.gif" width="100" height="100" id="picTwo" />
</div>

That should do it…but let me make two points:

  • I used transparent GIFs for this because transparent PNGs looked weird when they faded in and out. Of course, you can use a JPEG if your images don’t need to be transparent.

     

     
  • Properly syncing the various fades took a little planning. Note the combined time for .fadeIn()and .delay() for the first image is five seconds, equal to the timing on the .delay() for the second image. Also note that the first image takes 1.5 seconds to fade out while the second one takes the same amount of time to fade in. This keeps everything neat.