Enlarge Image with Smooth Transition – Jquery CSS

Enlarge Image with Smooth Transition – Jquery CSS
In this article we are going to see how to zoom an image when mouse pointer enters the image and how to make it to its original size when mouse leave.

We are going to use mouseenter and mouseleave events of jquery.

In this code, We are using -webkit-transition for smooth enlarging of image when mouseenters and taking back to its original size when mouse leaves.

Similar to mouseenter and mouseleave, we can substitute other events like mouseover, mouseout, hover etc.

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