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 :
A number of programmers struggle to embed tables from google spreadsheet into an HTML page of a website. The worst problem that we face while doing so are the default borders and tabs displayed along with the table. Sometimes these tabs and borders can totally change the look and we don't get what we need to display on a webpage. Such embedded tables clearly tell the visitor that the table is embedded from some other page. To get rid of this problem, we have brought a good piece of code that you may use to display only what you desire to display.
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.
Sometimes we need to hide a DIV in a HTML page. There are various ways to do that. Some of them includes usage of Javascript, while some of them don't. However if you learn the usage of Javascript then you can control it more easily. Without wasting the time let me show you the methods.
While working with HTML in web designing, sometime we need to overlap a div with another. Those who do it for the very first time find it difficult to do that. Here i have provided a simple example to make it easier for you to do it.
A number of web developers face challenge in adding a simple image slideshow in a HTML webpage. There are very tough codes available on net for this task. But most of them demand images to be of same size, or the code is too tough to implement due to usage of css and advanced java script. Here we are proving a simple HTML code with minimal usage of Java script. You can directly use in it your blog post's HTML coding.
Whatsapp is the latest trend in social networking. Web developers already use facebook and twitter, but the latest is Whatsapp. Very few websites have implemented the "Share on Whatsapp" button on their websites. Using this button the viewer can easily share your web-page link to his/her Whatsapp contacts through the Smartphone. The only drawback of this feature is that it works only when somebody accesses it via a smartphone with Whatsapp installed on it.
You must be visiting this page because you want to know a method to add a COPY button under some text in your website. Once i needed it too and discovered the following code. Its not written by by but it works perfectly.
Last time i was creating an image map in my website and found my self into a state where image was dynamically resized by browser to fit it into the space. But it created a problem in the image map. Coordinates of Image Map were same as before, while image was resized by the browser. In such a situation i need my image map coordinates to be changed dynamically.
I have tried several methods to blink text on my website. Some of them include CSS methods or Java Scripts. But none of them is 100% functional in all browsers. Especially Java Script method doesn't work if scripts are turned off in any browser. So here i have found an interesting trick to blink text by using simple HTML. most of you might have used this thing but never utilized it in this way.
Its quiet easy to make dynamic URLs if you are using Javascript or PHP. But if you want to use pure HTML then what will u do ? In this post i will tell you a very simple code in HTML to create a dynamic URL.
