Posts

Showing posts from October, 2014

Code For Adding a Google Map to your website

-
Code For Adding a Google Map to your website   <html>   <head>     <style>       # map_canvas {         width : 500px ;         height : 400px ;       }     </style>     <script src = "https://maps.googleapis.com/maps/api/js" ></script>     <script>       function initialize () {         var mapCanvas = document . getElementById ( 'map_canvas' );         var mapOptions = {           center : new google . maps . LatLng ( 44.5403 , - 78.5463 ),           zoom : 8 ,           mapTypeId : google . maps . MapTypeId . ROADMAP         }         var map = new google . maps . Map ( mapCanvas , mapOptions )       } ...
Post a Comment
Read more

JavaScript program for leap year

-
JavaScript program for leap year Just copy and paste the following function in to script tag inside the header tag so that it can be called from anywhere in this HTML document. function isleap() { var yr=document.getElementById( " year" ). value ; if ((parseInt(yr)%4) == 0 ) { if (parseInt(yr)%100 == 0 ) { if (parseInt(yr)%400 != 0 ) { alert( " Not Leap" ); return " false" ; } if (parseInt(yr)%400 == 0 ) { alert( " Leap" ); return " true" ; } } if (parseInt(yr)%100 != 0 ) { alert( " Leap" ); return " true" ; } } if ((parseInt(yr)%4) != 0 ) { alert( " Not Leap" ); return " false" ; }  }
Post a Comment
Read more

JavaScript example illustrates the use of the onmouseover and onmouseout events:

-
<head> <script type =" text/javascript "> function OnMouseIn (elem) { elem.style.border = "2px solid blue"; } function OnMouseOut (elem) { elem.style.border = ""; } </script> </head> <body> <div style =" background-color:#d0f0a0; width:200px " onmouseover =" OnMouseIn (this) " onmouseout =" OnMouseOut (this) "> Move your mouse pointer into and out of this element! </div> </body> I hope you like this program :D 
Post a Comment
Read more

JavaScript Program For Animated Digital Clock

-
JavaScript Program For Animated Digital Clock <html> <head> <style type="text/css"> .clockStyle { background-color:#000; border:#999 2px inset; padding:6px; color:#0FF; font-family:"Arial Black", Gadget, sans-serif;         font-size:16px;         font-weight:bold; letter-spacing: 2px; display:inline; } </style> </head> <body> <h2>Javascript CSS Digital Clock </h2> <div id="clockDisplay" class="clockStyle"></div> <script type="text/javascript" language="javascript"> function renderTime()  { var currentTime = new Date(); var diem = "AM"; var h = currentTime.getHours(); var m = currentTime.getMinutes();     var s = currentTime.getSeconds(); setTimeout('renderTime()',1000);     if (h == 0)  { h = 12; }  else if (h > 12) { h = h - 12; ...
Post a Comment
Read more

Changing HTML Style

-
The HTML DOM allows JavaScript to change the style of HTML elements. Changing HTML Style To change the style of an HTML element, use this syntax: document.getElementById( id ).style. property = new style The following example changes the style of a <p> element: Example < html > < body > < p id= "p2" > Hello World! < /p > < script > document.getElementById("p2").style.color = "blue"; < /script > < p > The paragraph above was changed by a script. < /p > < /body > < /html > Using Events The HTML DOM allows you to execute code when an event occurs. Events are generated by the browser when "things happen" to HTML elements: An element is clicked on The page has loaded Input fields are changed You will learn more about events in the next chapter of this tutorial. This example changes the style of the HTML element with id="id1", whe...
Post a Comment
Read more

Simple Example Javascript Scripts

-
Simple Example Javascript Scripts Generate Alert Box if user tries to change text in text input field <FORM>  <INPUT TYPE="text" VALUE= "dont change" NAME = "leavebutton" onChange= "alert('Please dont change this')">  </FORM> Show the date and time when the page loads <SCRIPT LANGUAGE = "Javascript"> var today= new Date() </SCRIPT> .... <BODY onload=alert(today)> Sample Script to Animate Text in Text Field <HTML>  <HEAD>  <TITLE> Animated Text</TITLE>  </HEAD>  <BODY > <FORM NAME="f1">  <TABLE> <TR> <TD> <INPUT NAME="ta1" TYPE="text" SIZE="20"> <TD>  <INPUT NAME="ta2" TYPE="text" SIZE="20">  <TD> <INPUT NAME="ta3" TYPE="text" SIZE="20">  </TABLE> </FORM...
1 comment
Read more

Program for a Calculator Using HTML

-
Program for a Calculator Using HTML I m implement a simple calculator using Html language. It is very simple  program.You can use CSS For display this calculator so pretty and creative::::       < html > < head > < title > Html calculator < / title > < / head > < body > < form name = "calculator" > Solution < input type = "textfield" name = "ans" value = "" > < br >   < input type = "button" value = "1" onClick = "document.calculator.ans.value+='1'" > < input type = "button" value = "2" onClick = "document.calculator.ans.value+='2'" > < input type = "button" value = "3" onClick = "document.calculator.ans.value+='3'" > < input type = "button" value = "+" onClick = "document.calculator.ans.value+='+...
Post a Comment
Read more

A simple running clock in javascript

-
A simple running clock in javascript Here I show how to code for a simple digital clock in javascript. The advantage of javascript is that it is only a client side scripting language.  Here’s the code… <html> <head> <title></title> <script type=”text/javascript”> function getClock() { var clock = new Date(); var hours12; var ampm = “AM”; var hours24 = clock.getHours(); var minutes = clock.getMinutes(); var seconds = clock.getSeconds(); if (hours24>=13) { hours12 = hours24 – 12; ampm = “PM”; } else if (hours24==12) { hours12 = 12; ampm = “PM”; } else if (hours24==0) { hours12 = 12; } else { hours12 = hours24; } if(hours12<10) { hours12 =”0″+hours12; } if (minutes<10) { minutes = “0” + minutes; } if(seconds<10) { seconds =”0″+seconds; } var ti...
Post a Comment
Read more

JavaScript: Conditional Statements

-
JavaScript: Conditional Statements Sometimes when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.  If Statement The If Statement is a way to make decisions based on a variable or some other type of data. For example, you might have a script that checks if Boolean value is true or false, if variable contains number or string value, if an object is empty or populated, or even check type and version of the visitors browser. The syntax for If statement looks as follows: if (condition) {    statements_1 } else {    statements_2 } Condition can be any expression that evaluates to true or false. If condition evaluates to true, statements_1 are executed; otherwise, statements_2 are executed. statement_1 and statement_2 can be any statement, including further nested if statements. You may also compound the statements using else if to have mul...
Post a Comment
Read more

Program to add two numbers using HTML 5 and JavaScript.

-
Program to add two numbers using HTML 5 and JavaScript. <!DOCTYPE html> <html> <head> <title></title> <script>function add(){ var a,b,c; a=Number(document.getElementById("first").value); b=Number(document.getElementById("second").value); c= a + b; document.getElementById("answer").value= c; }</script> </head> <body> <input id="first"> <input id="second"> <button onclick="add()">Add</button> <input id="answer"> </body> </html> its work fine Try it  
Post a Comment
Read more

CSS Super Simple Horizontal Navigation Bar

-
CSS Super Simple Horizontal Navigation Bar   <html> <head> <title>CSS Super Simple Horizontal Navigation Bar</title> <style> /* Begin Navigation Bar Styling */ #nav { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } #nav li { float: left; } #nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px solid #ccc; } #nav li a:hover { color: #c00; background-color: #fff; } /* End navigation bar styling. */ /* This is just styling for this specific page. */ body { background-color: #555; font: small/1.3 Arial, Helvetica, sans-serif; } #wrap { width: 750px; margin: 0 auto; background-color: #fff; } h1 { font-si...
Post a Comment
Read more