Document Viewer for pdf and txt files

Document Viewer for pdf and txt files
In this article we are going to use document viewer to view .pdf/.txt files in the browser. Many applications required to show some documents to the user or user would like to see some documents uploaded by them.

The document viewer which has been used in this code is open-source and is available for download in Git. You can download ViewerJS from this site.

Now let us see an example of ViewerJS.

Once ViewerJS has been downloaded, Include that inside the project.

DocumentViewer.html

Note: Please make sure .txt/.pdf files are stored inside ViewerJS folder

screen1

We are going to use document viewer to display MyFile.txt and myfile.pdf in the browser using ViewerJS document viewer
op1
op2 op3

 

Read More

Custom Designed Alerts

Custom Designed Alerts
Most of the end users will not be interested in seeing default alert messages that our system provides.

default alert
In this article we are going to see some custom designed Alert Box and messages.
For this code to work, please download js and css files from Here. Also please download jquery-1.11.3.min.js file.

Sweet Alert:
We are going to see how to show custom designed alert boxes of Sweet Alert.
This sweet alert takes 3 attributes

swal(‘title’,’text’,’type’ );

Swal – Sweet Alert, you can also use SweetAlert in place of Swal
title – Title for the alert box (required)
text – Message to be displayed to the user
type – There are 4 types of type
Success
Delete
Warning
Error

Now let us see examples of using Sweet Alert,

op1

We have designed 4 buttons to display 4 designs of alert.

Alert Design 1 – Will display customized alert box.
Alert Design 2 – Will display an alert box that will disappear in 2 seconds
Alert Design 3 – Will display an alert of type warning
Alert Design 4 – Will display an alert with custom image.

Alert Design 1 Output:

op2

Alert Design 2 Output:

op3

Alert Design 3 Output:

op4

Alert Design 4 Output:

op5

Read More

Geolocation in HTML

Geolocation in HTML – getCurrentPosition()

What is Geolocation?
Geolocation is used to retrieve the geographical location of a user

Example of Geolocation:
The most basic usage of geolocation is implemented in Maps, using GPS – Gets the current user location and show the route to reach the destination

Geolocation Methods:
There are 2 methods provided by geolocation to determine user’s location,

  • getCurrentPosition()
  • watchPosition()

getCurrentPosition():
This method is used to retrieve the current geographical location of a user.

Syntax:
getCurrentPosition(callbackFunction, ErrorHandler, Options)

callbackFunction – Function to retrieve current location
ErrorHandler – Function called when error occurs
Options – Optional parameters to set options

The getCurrentPosition() method calls callbackFunction, which takes the position as an Object argument. The position object returns 2 properties – coords and timestamp

The coords property has various attributes,

coords.latitude – specifies latitude
coords.longitude – specifies longitude
coords.accuracy – accuracy of position
coords.altitude – altitude level
coords.altitudeAccuracy – accuracy of altitude

Example:

Output:
output1

 

Read More

How to draw chart in HTML

How to draw chart in HTML:

(Chart in HTML code)

A simple code to draw bar chart using HTML 5.

Requirements:
you are required for download RGraph.common.core.js(here) and RGraph.bar.js (here)
copy the code and paste it in notepad and save as RGraph.common.core.js and RGraph.bar.js

This code is tested in Netbeans, you can also view the video tutorial here Video Tutorial

 

YouTube Link: Video Tutorial

 

Read More