Vijay Lathiya

Php Opensource Developer with writing articles on Php,HTML,CSS,jQuery, Google Map etc technologies area on blogger

Welcome to Vijay Lathiya Blog

I'm very thankfull for visiting my blog.

Wordpress Website development Surat

Google Map API Services

Google Map API V3 for get location with Lat-Long, Distance between two place and many more stuff you will get from my blog

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Saturday, May 3, 2014

Standard A4 Paper Size in Pixels

Standard A4 Paper Size in Pixels

The table below displays the paper size of A4 paper in pixels at different Pixels Per Inch (PPI). Each pixel count is in 8 bits of colour.

Paper size Width Height
A4 - 72 PPI 595 Pixels 842 Pixels
A4 - 200 PPI 1654 Pixels 2339 Pixels
A4 - 300 PPI 2480 Pixels 3508 Pixels
A4 - 400 PPI 3307 Pixels 4677 Pixels
A4 - 600 PPI 4961 Pixels 7016 Pixels
A4 - 1200 PPI 9921 Pixels 14031 Pixels
Letter - 72 PPI 612 Pixels 792 Pixels
Letter - 200 PPI 1700 Pixels 2200 Pixels
Letter - 300 PPI 2550 Pixels 3300 Pixels
Letter - 400 PPI 3400 Pixels 4400 Pixels
Letter - 600 PPI 5100 Pixels 6600 Pixels
Letter - 1200 PPI 10200 Pixels 13200 Pixels

Know About pixels?

Mostly Pixels are not used for measuring size.
One pixel is a small dot of illumination on a display screen.
Within compose of Multiple pixel an image generated.
Pixels are most standardised as 8bit in colour in 24bit displays each pixel can achieve over 16 million colours.



Saturday, April 19, 2014

Move Cursor Focus to DIV element using jQuery

Sometimes we need to move user focus on specific position for do focus their attention. i hope you know about .focus in jQuery and already used it to set cursor focus in input Textbox, TextArea etc.

Here, im going to show you how to set focus on Div element. to set focus on DIV id its required to DIV element has tabindex property with -1 value. without tabindex property below code never move your cursor focus to that DIV element.

<div id="mydiv" tabindex="-1">
</div>


jQuery for move focus

<script type="text/javascript">

jQuery('#mydiv').focus();

</script>

Thursday, January 16, 2014

Remove spacing between table cells and rows

Are you using table for display any record or for any formatting ? and observe issue similarly like i fetch as space between two cells or rows.


It is even not major issue that is shown in all cases while use Table, but normally it observe when you use image inside Table structure or even use border css for table td than that time its look like odd.

See



Solution for such type of problem is add cellspacing="0" to Table.

In Some Cases like,  for loading purpose you are going to display a big image by cut down it in  small images and than set all small images in Table cell format that time may be you fetch such type of issue.



after adding  cellspacing="0" to table if small gape between two images still present than add display:block to all images.

finally, it look like



Thursday, November 7, 2013

Compare timestamp dates with date-only in Mysql

To get record for specific day with Date format Y-m-d and  record store in Database with time stamp format than use DATE() function to extract the date portion of the time-stamp.



i.e.
SELECT * FROM table
WHERE DATE(column name) = '2012-05-05'

Tuesday, October 29, 2013

Google Map Marker Animations with Javascript API - Marker Bounce on click

Dear Developers,
Right now you are at right place if you are looking for add some animation effect on your Google Map with location point marker. in this post i'm trying to show how you can use Google Map with Javascript API version 3 for point your business or official address on your Site or Blog with Google Map.



below is the sample code that you can use to show address on Google Map with add bounce effect on marker while click on Marker using Google Map setAnimation functions.

I hope it helps you Guys. just copy below code, paste in your Blank Html file and run in Browser.

<html>
<head>
<style>#mapCanvas {width: 100%;height: 100%;}</style>
<!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> before use  it-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var marker;
function initialize()
{
 var mapOptions = {
    center: new google.maps.LatLng(22.2788908867319, 73.1564998626709),
    panControl: false,
    zoomControl: true,
    mapTypeControl: true,
    streetViewControl: false,
    mapTypeControlOptions: {
   style: google.maps.MapTypeControlStyle.DEFAULT,
   position: google.maps.ControlPosition.BOTTOM_CENTER
   },
    zoomControlOptions: {
   style: google.maps.ZoomControlStyle.SMALL,
   position: google.maps.ControlPosition.LEFT_CENTER
    },
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
 var latLng = new google.maps.LatLng(22.2788908867319, 73.1564998626709);
 var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);
 var image = "http://cdn.elegantthemes.com/preview/Explorable/wp-content/themes/Explorable/images/red-marker.png";
  
 marker = new google.maps.Marker({
   position: latLng,
   title: 'Point A',
   map: map,
   icon: image,
   draggable: true
  });
 var contentString = '<p>Hello World !</p>';
  
 var infowindow = new google.maps.InfoWindow({
   content: contentString, maxWidth: 850
  });
  
 google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
   toggleBounce();
  });
}
function toggleBounce() 
{
  if (marker.getAnimation() != null) {marker.setAnimation(null);} 
  else {marker.setAnimation(google.maps.Animation.BOUNCE);}
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</html></pre>

let me know if you have any query. i'm happy to help you :)

Friday, October 18, 2013

Yahoo Mail New Layout 2013, Cross-Platform Themes, 1TB of Storage, Photo and File sharing features

Yahoo updating its reputable Mail app across all platforms with a fresh design that includes syncing themes, a new compose mail experience, collapsible toolbar and better handling of conversations with quickly sending and receiving emails. The yahoo mail new layout was rolling out across the web, Android, iOS and Windows 8 devices from 8th Oct 2013.

The Older versions of Yahoo Mail have been discontinued and it's now necessary to switch to the latest version. thus now not possible to switch back to an earlier version of Yahoo Mail.

when user who still not switch their yahoo mail to latest version going to access Yahoo Mail than their is popup window open for selection of layout Themes.



after selection of Theme new Yahoo Mail layout apply to user account and display with awesome new lookup.


 

Benefits of the newest version of Yahoo Mail



-Personalize layout of Email with Different Different Themes.
-Navigate easily to long email threads with help of Conversations
-1 TB storage for emails, photos and videos.
- Enhanced photo and file sharing features
with Dropbox and Flickr integration gives more flexibility for sending large files and sharing pictures.

Thursday, February 28, 2013

Rotate Image using JavaScript

Rotate image using Javascript rotate function by change Image style on specific time interval and rotate radius. below are sample code that you can use for see rotate image effect with Javascript.

<script type="text/javascript">

var RotateInterval;
var Rad = 10;

function StartImgRotate()
{
RotateInterval = setInterval(start, 100);
//RotateInterval = setTimeout(function(){start();}, 10);
}

function start()
{
 document.getElementById("img").style.MozTransform = "rotate(" + Rad + "deg)";                    
 document.getElementById("img").style.webkitTransform = "rotate(" + Rad + "deg)";
 Rad += 10;
}

function StopImgRotate()
       {
clearInterval(RotateInterval);
}
</script>


<img id="img" src="icon.jpg" width="50px" height="50px" /> <br />
<br />
<input type="button" value="Play" onClick="StartImgRotate();" />
<input type="button" value="Stop" onClick="StopImgRotate();" />