shake demo

Click to shake the box.

Wednesday, 20 November 2013

HTML - Google Map - Display Map on web page

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(18.532351,73.858223),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:700px;height:400px;"></div>

</body>
</html>

O/P

map


JavaScript - Simple Message Box

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display an alert box.</p>
<button onclick="msgBoxFunction()">Click Me</button>
<script>
function msgBoxFunction()
{
alert("This is Message Box!");
}
</script>
</body>
</html>

JavaScript Array - Check if array has Duplicate/Repeated Values/Repeated Numbers/Characters

<html>
<head>
<script language="javascript">

var X = new Array( 
        "Aniruddha",
        "Deepak",
        "Pooja",
        "Ryo",
        "Kaori",
        "Maya",
        "Aniruddha"               
    );
// we can also put numbers in " " instead of characters or string

function arrHasDupes( A ) {                          // finds any duplicate array elements using  possible comparison
    var i, j, n;
    n=A.length;
                                                     // to ensure possible comparisons
    for (i=0; i<n; i++) {                        // outer loop uses each item i at 0 through n
        for (j=i+1; j<n; j++) {              // inner loop only compares items j at i+1 to n
            if (A[i]==A[j]) return true;
    }    }
    return false;
}

if ( arrHasDupes( X ) )                            
    document.write("There is repeated Value in array:  ", X);
else
    document.write("There is no repeated Value in array:  ", X);

</script>
</head>
<body>
</body>
</html>

Open a pop up window on button click

JavaScript
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Click to Open Popup Window" onclick="window.open('http://gogole.com','popUpWindow','height=400,width=800,left=100,top=100,scrollbars=yes,toolbar=yes,menubar=yes,status=no');">
</body>
</html>


HTML 5 Video tag

<!DOCTYPE html>
<html>
<body>
<video width="350" height="260" controls autoplay>
  <source src="videoname.mp4" type="video/mp4">
  <source src="videoname.ogg" type="video/ogg">
</video>
</body>
</html>

To view the various formats supported/unsupported by html 5,
visit links-
http://www.w3schools.com/html/html5_video.asp
https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats


Open Link in New Tab

HTML
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_blank">Visit google.com!</a>
<p>If you set the target attribute = "_blank", the link will open in a new tab.</p>
</body>
</html>



JavaScript
<!DOCTYPE html>
<html>
<body>Click the button to open a new tab.</br>
<script>
function newTabFunction()
{
window.open("http://www.google.com");
}
</script>
<button onclick="newTabFunction()">Click Me</button>
</body>
</html>