Pages

Technology cover the world

High Speed Processing

All in One Touch

New Technology

Social Networking

Web hosting
Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Sunday, 12 June 2016

Auto Complete Textbox for Place Name

22:45   Yogesh Patel  

HTML code for autocomplete place name

This code help to popup menu for search city name textbox in your blog and website. It work base on google map facility.

Simply copy and paste this code in your web-page and it work good.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
                alert(mesg);
            });
        });
    </script>
    <span>Location:</span>
    <input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />
</body>
</html>




Use and Enjoy HTML

Read More

Monday, 22 July 2013

HTML Heading

19:59   Yogesh Patel  


HTML Heading
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
Try It Yourself >>
-: More HTML Example :-

HTML Heading Align Attribute
<!DOCTYPE html>
<html>
<body>

<h1 align="center">This is heading 1</h1>
<h2 align="left">This is heading 2</h2>
<h3 align="right">This is heading 3</h3>
<h4 align="justify">This is heading 4</h4>

</body>
</html>
Try It Yourself >>
-: More HTML Example :-

Read More

Thursday, 18 July 2013

HTML Tutorial

23:24   Yogesh Patel  


HTML

 With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.
Examples in Each Chapter Click

Read More

Monday, 15 April 2013

Drop down menu with page redirection

00:29   Yogesh Patel  

<html>
  <head>

<script language="javascript" type="text/javascript" >
    function jumpto(x)
    {
    if (document.form1.jumpmenu.value != "null")
    {
    document.location.href = x
    }
    }
</script>
  </head>

  <body>

<p>Drop down Menu:</p>
<form name="form1">
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
  <option>Jump to...</option>
  <option value=http://yogeshtourism.blogspot.in/>Gujarat Tourism</option>
  <option value=http://yognet.blogspot.in/>JavaScript</option>
  <option value=http://www.w3schools.com/>HTML</option>
  <option value=http://www.quackit.com/css/>CSS</option>
  <option value=http://www.quackit.com/sql/tutorial/>SQL</option>
  <option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option>
  <option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option>
</select>
</form> 
 
  </body>
</html>
-->
Jump Menu:

Read More

Thursday, 7 March 2013

HTML code for find distance with map

18:47   Yogesh Patel  

HTML code for find distance with map
<html>
       <head>
          <title>Bing Distance Calculator | http://sharp-coders.blogspot.com</title>
         
          <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
          <script type="text/javascript">
             var map = null;
          
             function GetMap()
             {
                map = new VEMap('myMap');
                map.LoadMap();
          
                var options = new VERouteOptions();
                options.RouteCallback = onGotRoute;
    options.DistanceUnit = VERouteDistanceUnit.Kilometer;
    options.UseTraffic = true;
    //here you can add more options ... you can get a list of options that can be used from bing map's website
                map.GetDirections([document.getElementById("origin").value, document.getElementById("destination").value],
                                   options);
             }
             function onGotRoute(route)
             {
               // Unroll route
               var legs     = route.RouteLegs;
               var turns    = "Total distance: " + route.Distance.toFixed(1) + " Km\n";
               var numTurns = 0;
               var leg      = null;
    document.getElementById("distance").value = route.Distance.toFixed(1) + " Km\n";
               // Get intermediate legs
                for(var i = 0; i < legs.length; i++)
                {
                   // Get this leg so we don't have to derefernce multiple times
                   leg = legs[i];  // Leg is a VERouteLeg object
                    
                   // Unroll each intermediate leg
                   var turn = null;  // The itinerary leg
                    
                   for(var j = 0; j < leg.Itinerary.Items.length; j ++)
                   {
                      turn = leg.Itinerary.Items[j];  // turn is a VERouteItineraryItem object
                      numTurns++;
                      turns += numTurns + ".\t" + turn.Text + " (" + turn.Distance.toFixed(1) + " Km)\n";
                   }
                }
    document.getElementById("instructions").value = turns;
                //alert(turns);
             }
          </script>
       </head>
       <body onload="GetMap();">
<table align="center">
<tr><td>Origin:</td><td><input type="text" id="origin"></td></tr>

<tr><td>Destination:</td><td><input type="text" id="destination"></td></tr>

<tr><td></td><td><input onclick="GetMap()" type="button" value="Calculate" /></td></tr>

<tr><td>Distance:</td><td><input type="text" id="distance"></td></tr>

<tr><td>Instructions:</td><td>
     <textarea cols="30" id="instructions" rows="7"></textarea></td></tr>
</table>
     <br /><br />
          <div id="myMap" style="height: 400px; position: relative; width: 400px;">
</div>
<a href="http://sharp-coders.blogspot.com/" target="_blank">http://sharp-coders.blogspot.com</a>
       </body>
    </html>


Read More
Twitter Delicious Facebook Digg Stumbleupon Favorites More