Adding a "Download PDF" button on a webpage can give the user an option to print only a certain section of your webpage in PDF format. This feature is of great use if your website is used to generate a report. That report (or anything else) can be placed inside a DIV and then a "Download PDF" or "Print PDF" button can be added into it to download contents of that particular DIV. Usually a website/webpage contain a lot of content, such as sidebars and related posts, in which user might not be interested in printing.
Without wasting any time lets show you the javascript and HTML code.
The code will be implemented in two parts: HTML and Javascript.
HTML Part
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="Save as PDF or Print" />
In the above code you may change id of div as per your need to print only a particular div.
Note: This button opens the simple printing interface, from where you can either choose to print by selecting a printer or saving the preview content as PDF.
This button is a working example of the code given above. It can be used to print this article only, not the entire content of this page.
Full Screen capability can be used in a HTML page to display content of a <div> or <form> alone on the screen. But you must know that such button should be accompanied with a "Close Full screen" to revert back to normal screen, otherwise the user might get confused and don't know how to go back. The code that we are showing here works on most of the browsers, such as chrome, firefox, safari and chrome.
Here bestrix.blogspot.com is displaying the code for full screen button.
Code:
<h2>Heading outside Full Screen</h2>
<form id='fullscreenarea' style="color:red">
<div id="full" style='float: right;'><input id=fullbutton type=button value="FullScreen" onclick=openFullscreen() /></div>
<h2>Heading inside Full Screen</h2>
<p>Content inside fullscreen block</p>
</form>
<p>Content outside fullscreen block</p>
<script type="text/javascript">
// Author : Prixit Parashar
var elem = document.getElementById("fullscreenarea");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
document.getElementById('full').innerHTML="<input id=fullbutton type=button value='Close FullScreen' onclick=closeFullscreen() />";
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
document.getElementById('full').innerHTML="<input id=fullbutton type=button value='FullScreen' onclick=openFullscreen() />";
}
</script>
Working example of above code :
Calculating time in seconds or milliseconds is sometimes necessary in javascript programming, especially if you are creating some games or animation. This page contains a simple code of javascript timer with "Start" and "Stop" buttons. If you have some basic knowledge of JS Programming then you will easily understand the logic behind it. You may utilize it to make your own timer with little bit of change in coding as per your requirement.
Running version of Script:
0 Seconds
Code:
<div>
<input id="btnStart" type="button" value="Start" onclick="timestart();" />
<input id="btnStop" type="button" value="Stop" onclick="timestop();" />
<h3><span id="timer">0</span> Seconds</h3>
</div>
<script type="text/javascript">
var check = null;
var timespent=0;
var displayfrequency=100; // in milliseconds
var decimalplaces=1; // seconds to be displayed in points
function timestart()
{
var startTime = Date.now();
check = setInterval(function () {
var elapsedTime = Date.now() - startTime;
document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(decimalplaces);
}, displayfrequency);
}
function timestop()
{
clearInterval(check);
timespent=document.getElementById("timer").innerHTML;
}
</script>
In the above script variable displayfrequency can be adjusted to change the duration after which time displayed in changed. Similarly decimalplaces can be adjusted to change the decimal point of seconds dispalyed. Just play by changing these values and you will understand their usage.
It is an easy task to add background image to a HTML form. But i wanted to hide this feature in a javascript, so that only a person running the form will see that background image and nobody can copy-paste my form based application into his website without my background. I have seen people coping my scripts, so i started to use JS obfuscator (that is another story). Here i will tell you how you can add the background image code inside a javascript.
