Saturday, September 1, 2012

Magnetic Letters in Html -JAVA Script



<!--Simply copy and paste between the <body> and </body> tags -->
<!-- of your HTML where you want the text message to appear.-->

<SCRIPT>                                                                                    

// Distributed by http://myhtmlquestionbank.blogspot.in

var text=new Array()
var textsplashcolors=new Array()

// Place your messages below. Add as many as you like!
text[0]="Welcome to Kiran's Blogspot ."
text[1]="Another great javascript for your site ...is http://myhtmlquestionbank.blogspot.in"
text[2]="Magnetic Letters gives a great effect for webpages."
text[3]="Entertain your visitors with this script ..."
text[4]="Grab the code below!."

// Change the letter colors here
textsplashcolors[0]="#FFFF00"
textsplashcolors[1]="#FF0000"
textsplashcolors[2]="#00FF00"
textsplashcolors[3]="#00FFFF"
textsplashcolors[4]="#FF00FF"
textsplashcolors[5]="#FFAA00"
textsplashcolors[6]="#0088FF"

// Change the font
var textfont="Arial"

// Change the font-size for IE4x/5x/6x and NS6x (CSS-standard)
var textfontsize=18

// Change the font size for NS4x (HTML-standard)
var textfontsizeHTML=4

// Change the pause between the messages (seconds)
var textpause=3

// DO NOT EDIT BELOW THIS LINE

// CREDITS:
// Letter Magnet
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2002 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.

var textweight="bold"
var textweightA="<b>"
var textweightB="</b>"
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textalignabsolute="topleft"
var letterwidth=new Array()
var messagewidth=0
var messageheight=0
var i_colors=0
var letterspace=Math.floor(textfontsize/1.3)
var timer
var i_text=0
var textsplitted
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var startposmax_x=0
var startposmax_y=0
textpause*=1000
var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

for (i=0;i<=text.length-1;i++) {
if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
text[i]=text[i]+" "
}

var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
xpos[i]=5000
}

var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
ypos[i]=5000
}

function randomizer(range) {
return Math.floor(range*Math.random())
}

function getpagesize() {
if (ie) {
windowheight=parseInt(document.body.clientHeight)
windowwidth=parseInt(document.body.clientWidth)
}
if (ns4 || ns6) {
windowheight=parseInt(window.innerHeight)
windowwidth=parseInt(window.innerWidth)
}
startposmax_x=windowwidth-2*parseInt(textfontsize)
startposmax_y=windowheight-2*parseInt(textfontsize)

changecontent()
}

function changecontent() {
messagewidth=0
var textsa=text[i_text]
textsplitted=textsa.split("")
if (ie) {
for (i=0;i<=textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i)
    thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+";text-align:center'>"+textsplitted[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
letterwidth[i]=Math.round(thisspan.offsetWidth*1.2)

if (letterwidth[i]==0) {letterwidth[i]=parseInt(textfontsize)}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.all.span0.offsetHeight)
}
}
if (ns6) {
for (i=0;i<=textsplitted.length-1;i++) {
var thisspan=eval(document.getElementById('span'+i))
    thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsplitted[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
letterwidth[i]=Math.round(parseInt(thisspan.offsetWidth)*1.2)
if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.getElementById('span0').offsetHeight)
}

}
if (ns4) {
for (i=0; i<textsplitted.length-1; i++) {
    var thisspan=eval("document.span"+i+".document")
    thisspan.write("<p><font size="+textfontsizeHTML+" color="+textsplashcolors[i_colors]+" face="+textfont+">"+textitalicA+textweightA+textsplitted[i]+textweightB+textitalicB+"</font></p>")
thisspan.close()
letterwidth[i]=Math.round(thisspan.width*1.2)
if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.span0.document.height)
thisspan.clear()
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
    }
for (i=0; i<textsplitted.length-1; i++) {
    var thisspan=eval("document.span"+i)
    thisspan.visibility="show"
    }
}
i_text++
if (i_text>=text.length) {i_text=0}
getfinalpos()
}

function getfinalpos() {
if (ie || ns6) {var padding_x=100}; if (ns4) {var padding_x=40};
if (ie || ns6) {var padding_y=80}; if (ns4) {var padding_y=40};
if (textalignabsolute=="middlecenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=(windowheight-messageheight)/2
}
else if (textalignabsolute=="topleft") {
x_finalpos[0]=5
y_finalpos=0
}
else if (textalignabsolute=="topcenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=0
}
else if (textalignabsolute=="topright") {
x_finalpos[0]=windowwidth-messagewidth
y_finalpos=0
}
else if (textalignabsolute=="bottomleft") {
x_finalpos[0]=5
y_finalpos=windowheight-messageheight
}
else if (textalignabsolute=="bottomcenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=windowheight-messageheight
}
else if (textalignabsolute=="bottomright") {
x_finalpos[0]=windowwidth-messagewidth
y_finalpos=windowheight-messageheight
}
for (i=1;i<textsplitted.length-1;i++) {
x_finalpos[i]=x_finalpos[i-1]+letterwidth[i-1]
}
gotostartpos()
}

function gotostartpos() {
if (ie) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i+".style")
thisspan.posLeft=randomizer(startposmax_x)
thisspan.posTop=randomizer(startposmax_y)
}
}
if (ns4) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.span"+i)
thisspan.left=randomizer(startposmax_x)
thisspan.top=randomizer(startposmax_y)
}
}
if (ns6) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.getElementById('span'+i).style")
thisspan.left=randomizer(startposmax_x)
thisspan.top=randomizer(startposmax_y)
}
}
gotostandstillpos()
}

function gotostandstillpos() {
if (ie) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i+".style")
x_step[i]=(x_finalpos[i]-thisspan.posLeft)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)
thisspan.posLeft+=x_step[i]
thisspan.posTop+=y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
if (ns4) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.span"+i)
x_step[i]=(x_finalpos[i]-thisspan.left)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.top)/(max_loop-i_loop)
thisspan.left+=x_step[i]
thisspan.top+=y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
if (ns6) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.getElementById('span'+i).style")
x_step[i]=(x_finalpos[i]-parseInt(thisspan.left))/(max_loop-i_loop)
y_step[i]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)
thisspan.left=parseInt(thisspan.left)+x_step[i]
thisspan.top=parseInt(thisspan.top)+y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
}

function gotoendpos() {
if (ie) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.all.span"+i_loop+".style")
thisspan.posLeft=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
var timer=setTimeout("changecontent()",400)
}
}
if (ns4) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.span"+i_loop)
thisspan.left=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
changecontent()
}
}

if (ns6) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.getElementById('span'+i_loop).style")
thisspan.left=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
changecontent()
}
}
}

if (ie) {
for (i=0;i<=maxtextlength;i++) {
    document.write("<span id='span"+i+"' style='position:absolute'>")

    document.write("</span>")
}
window.onload=getpagesize
}
if (ns6) {
for (i=0;i<=maxtextlength;i++) {
    document.write("<span id='span"+i+"' style='position:absolute'>")
document.write(textsplitted)
    document.write("</span>")
}
window.onload=getpagesize
}
if (ns4) {
for (i=0;i<=maxtextlength;i++) {
    document.write("<layer name='span"+i+"' visibility=hide>")
document.write(textsplitted)
    document.write("</layer>")
}
window.onload=getpagesize
}
</script>

<br><p align="left"><font face="arial" size="-2">Free scripts<br>provided by </font><br><font face="arial, helvetica" size="-2"><a href="http://myjavaquestionabank.blogspot.com">Rainbow Arch</a></font></p>

Status Clock Bar using Java Script



<!--Place this script in the HEAD section.-->


<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

   <!-- hide the script from old browsers --
   function doClock() {
     window.setTimeout( "doClock()", 1000 );
     today = new Date();
     self.status = today.toString();
   }
   //--end hiding here -->
   </script>

<!--Insert this in the BODY tag-->

    <Body   onLoad="doClock()" >
</body>
</html>


output:
=====

Monday, August 27, 2012

Displaying Dynamic Clock on the Website


<head>
<!--Simply copy and paste it where you wish it to appear.-->

<script language="Javascript1.2">
<!--
//Visit http://myhtmlquestionbank.blogspot.com for this script

if(navigator.appName == "Netscape") {
document.write('<layer id="clock"></layer><br>');
}

if (navigator.appVersion.indexOf("MSIE") != -1){
document.write('<span id="clock"></span><br>');
}

function upclock(){
var dte = new Date();
var hrs = dte.getHours();
var min = dte.getMinutes();
var sec = dte.getSeconds();
var col = ":";
var spc = " ";
var apm;

if (12 < hrs) {
apm="PM";
hrs-=12;
}

else {
apm="AM";
}

if (hrs == 0) hrs=12;
if (min<=9) min="0"+min;
if (sec<=9) sec="0"+sec;

if(navigator.appName == "Netscape") {
document.clock.document.write(hrs+col+min+col+sec+spc+apm);
document.clock.document.close();
}

if (navigator.appVersion.indexOf("MSIE") != -1){
clock.innerHTML = hrs+col+min+col+sec+spc+apm;
}
}

setInterval("upclock()",1000);
//-->
</script>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://myjavaquestionbank.blogspot.in">Techno Inida</a></font></p>



   <style type="text/css"><!--
     body {scrollbar-3dlight-color:;
                scrollbar-arrow-color:;
                scrollbar-track-color: ;
                scrollbar-darkshadow-color:;
                scrollbar-face-color:;
                scrollbar-highlight-color:;
                scrollbar-shadow-color:}
   --></style>

  </head>

Displaying Clock on Status Bar



<!--Place this script in the HEAD section.-->


<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

   <!-- hide the script from old browsers --
//Visit http://rainbow.arch.scriptmania.com for this script and more
   function doClock() {
     window.setTimeout( "doClock()", 1000 );
     today = new Date();
     self.status = today.toString();
   }
   //--end hiding here -->
   </script>

<!--Insert this in the BODY tag-->

    <Body   onLoad="doClock()" >

Saturday, August 25, 2012

input type checkbox HTML5, input type radio HTML5.


input type checkbox HTML5,  input type radio HTML5.

Introduction:
In this tutorial, you will the use of  checkbox and radio type input field. If type is checkbox then user can select multiple checkbox. If type is radio then user can select any one at a time.
Type Attribute:
AttributeValueDescription
typecheckbox
radio
user can select multiple checkbox.
at time only one.
Declaration Syntax :
                           <input  type="password" attribute/>

Example of <input> in HTML5:

Code:
TypePassword_Tag.html
<!DOCTYPE html >
<html >
<head>
<title>Password field</title>
</head>
<body>
<form>
<h2>Input tag.</h2>
<h2>Implementation of&nbsp; password type input tag. </h2>
<table><tr>
<td style="width: 198px">passord</td>
<td><input type="password" ></td>
</tr>
</table>
</form>
</body>
</html>
Output:

Tuesday, August 14, 2012

Employee registration Using JAVA SCRIPT


HTML FORM :

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Form Validation using a sample registration form. " />
<link rel='stylesheet' href='js-form-validation.css' type='text/css' />
<script src="sample-registration-form-validation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked /><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>


JAVA SCIPRT VALIDATION :


function formValidation()
{
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var uadd = document.registration.address;
var ucountry = document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex; if(userid_validation(uid,5,12))
{
if(passid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
}
}
}
}
}
}
}
return false;

} function userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= my || passid_len < mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}
function allnumeric(uzip)
{
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers))
{
return true;
}
else
{
alert('ZIP code must have numeric characters only');
uzip.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
} function validsex(umsex,ufsex)
{
x=0;

if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Succesfully Submitted');
window.location.reload()
return true;
}
}

Saturday, August 4, 2012

Date Picker for Text box in HTML



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calendar javascript Code</title>
<link rel="stylesheet" type="text/css" href="http://www.jscodes.com/codes/calendar_javascript/demo/css/datePicker.css" />
<script src="C:\richa_674899\MAS group6\ui for news and events\calender\jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.datePicker-min.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.bgiframe.min.js"></script><![endif]-->

<script type="text/javascript">
  $(window).ready(function(){
  $('#date-pick').datePicker({clickInput:true});
});
</script>


</head>
<body>
<p><label>Please choose: </label><input type="text"  name="it" id="date-pick" /></p>
</body>
</html>









======
Css file ::
======
.clear{
clear:both;
}
.it,.so,.is{
border:1px solid #ccc;
vertical-align:middle;}

/* Date Picker  */
table.jCalendar {
border: 1px solid #fff;
border-collapse:collapse;
font-family:Tahoma;
}


table.jCalendar th {
background: #333;
color: #fff;
font-weight: normal;
padding: 3px 5px;
vertical-align:middle;
}

table.jCalendar td {
background: #AADBF9;
color: #000;
font-size:11px;
border:1px solid #fff;
padding: 3px 5px;
text-align: center;
}
table.jCalendar td.other-month {
background: #D0E6F7;
color: #555;
}
table.jCalendar td.today {
background: #FF6600;
color: #fff;
}
table.jCalendar td.selected {
background: #f66;
color: #fff;
}
table.jCalendar td.selected.dp-hover {
background: #fff;
color: #f66;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
background: #fff;
color: #000;
}
table.jCalendar tr.selectedWeek td {
background: #f66;
color: #fff;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
background: #ECF1F4;
color: #888;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
background: #fff;
color: #555;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */


div.dp-popup {
position: relative;
background: #D6E9F8;
font-size: 12px;
font-family: arial, sans-serif;
padding: 2px;

width: 162px ;
width:162px\9;
line-height: 1.2em;
font-family:Tahoma;


}

@media screen and (-webkit-min-device-pixel-ratio:0) { div.dp-popup { width: 175px ; } }

div#dp-popup {
position: absolute;
z-index: 199;
}
div.dp-popup h2 {
font-size: 12px;
text-align: center;
margin: 2px 0;
padding: 0;
}
a#dp-close {
font-size: 11px;
padding: 4px 0;
text-align: center;
display: block;
}
a#dp-close:hover {
text-decoration: underline;
}
div.dp-popup a {
color: #000;
text-decoration: none;
padding: 3px 4px 0;
}
div.dp-popup div.dp-nav-prev {
position: absolute;
top: 2px;
left: 0px;
width: 80px;
}
div.dp-popup div.dp-nav-prev a {
float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
cursor: default;
}
div.dp-popup div.dp-nav-next {
position: absolute;
top: 2px;
right: 0px;
width: 80px;
}
div.dp-popup div.dp-nav-next a {
float: right;
}
div.dp-popup a.disabled {
cursor: default;
color: #aaa;
}
div.dp-popup td {
cursor: pointer;
}
div.dp-popup td.disabled {
cursor: default;
}



==========
Java Script File  ::
=============




Sunday, July 8, 2012

Time Example in Java Script

<html>
<head>
<script language="javascript">
var date = new Date();
var hour = date.getHours();

if(hour <= 10){
document.write("<b>Good Morning</b>");
}else if(hour >= 11 && hour <=14){
document.write("<b>Good Afternoon</b>");
}else if(hour >= 15 && hour <=18){
document.write("<b>Good Evening</b>");
}else if(hour >= 19){
document.write("<b>Good Night</b>");
}
</script>
</head>

<body>
<p>
If time on your pc is less then 10AM then you will see the Good Morning Message.<br>
else if time on you PC is from 11AM to 2PM then you will get the Good Afternoon Message.<br>
else if time on you PC is from 3PM to 6PM then you will see Good Evening Message.<br>
else if time on you PC is after 6PM then you will see Good Night Message.
</p>
</body>
</html>



output :

Good Morning

 If time on your pc is less then 10AM then you will see the Good Morning Message.

else if time on you PC is from 11AM to 2PM then you will get the Good Afternoon Message.

else if time on you PC is from 3PM to 6PM then you will see Good Evening Message.

else if time on you PC is after 6PM then you will see Good Night Message

Mouse Events Example In java Script

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the pink square.</p>
        <div style="width: 200px; height: 200px; background-color: pink"
             onmouseover="handleEvent(event)"
             onmouseout="handleEvent(event)"
             onmousedown="handleEvent(event)"
             onmouseup="handleEvent(event)"
             onclick="handleEvent(event)"
             ondblclick="handleEvent(event)" id="div1"></div>
        <P><textarea id="txt1" rows="35" cols="50"></textarea></p>
    </body>
</html>


Output :


Event Handlers in Java Script

Event Handlers Examples

An Event Handler executes a segment of a code based on certain events occurring within the application, such as onLoad, onClick. JavaScript Event Handlers can be divided into two parts:
  1. interactive Event Handlers and
  2. non-interactive Event Handlers
An interactive Event Handler is the one that depends on the user interactivity with the form or the document. For example, onMouseOver is an interactive Event Handler because it depends on the users action with the mouse. On the other hand non-interactive Event Handler would be onLoad, because this Event Handler would automatically execute JavaScript code without the user's interactivity. Here are all the Event Handlers available in JavaScript:
EVENT HANDLER USED WITH
onAbort image
onBlur select, text, text area
onChange select, text, textarea
onClick button, checkbox, radio, link, reset, submit, area
onError image
onFocus select, text, textarea
onLoad windows, image
onMouseOut link, area
onMouseOver link, area
onSelect text, textarea
onSubmit form
onUnload window

onAbort:

An onAbort Event Handler executes JavaScript code when the user aborts loading an image.
See Example:
<HTML>
<HEAD><TITLE>Example of onAbort Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onAbort Event Handler</H3>
<B>Stop the loading of this image and see what happens:</B><P>
<IMG SRC="object.gif" onAbort="alert('You stopped the loading the image!')">
</BODY>
</HTML>
Here, an alert() method is called using the onAbort Event Handler when the user aborts loading the image.

onBlur:

An onBlur Event Handler executes JavaScript code when input focus leaves the field of a text, textarea, or a select option. For windows, frames and framesets the Event Handler executes JavaScript code when the window loses focus. In windows you need to specify the Event Handler in the <BODY> attribute. For example:
<BODY BGCOLOR='#ffffff' onBlur="document.bgcolor='#000000'">
Note: On a Windows platform, the onBlur event does not work with <FRAMESET>.
See Example:
<HTML>
<HEAD>
<TITLE>Example of onBlur Event Handler</TITLE>
<SCRIPT>
function validate(value) {
    if (value < 0) alert("Please input a value that is greater or equal to 0");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onBlur Event Handler</H3>
Try inputting a value less than zero:<BR>
<FORM>
     <INPUT TYPE="text" onBlur="validate(this.value)">
</FORM>
</BODY>
</HTML>
In this example, 'data' is a text field. When a user attempts to leave the field, the onBlur Event Handler calls the valid() function to confirm that 'data' has a legal value. Note that the keyword this is used to refer to the current object.

onChange:

The onChange Event Handler executes JavaScript code when input focus exits the field after the user modifies its text.
See Example:
<HTML>
<HEAD>
<TITLE>Example of onChange Event Handler</TITLE>
<SCRIPT>
function valid(input) {
    alert("You have changed the value from 10 to " + input);
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<BR>
<FORM>
     <INPUT TYPE="text" VALUE="10" onChange="valid(this.value)">
</FORM>
</BODY>
</HTML>
In this example, 'data' is a text field. When a user attempts to leave the field after a change of the original value, the onChange Event Handler calls the valid() function which alerts the user about value that has been inputted.

onClick:

In an onClick Event Handler, JavaScript function is called when an object in a button (regular, radio, reset and submit) is clicked, a link is pushed, a checkbox is checked or an image map area is selected. Except for the regular button and the area, the onClick Event Handler can return false to cancel the action. For example:
<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit"
 
onClick="return confirm(`Are you sure you want to submit the form?')">
Note: On Windows platform, the onClick Event Handler does not work with reset buttons.
See Example:
<HTML>
<HEAD>
<TITLE>Example of onClick Event Handler</TITLE>
<SCRIPT>
function valid(form) {
    var input = form.data.value;
    alert("Hello " + input + " ! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onClick Event Handler </H3>
Click on the button after inputting your name into the text box:<BR>
<FORM>
     <INPUT TYPE="text" NAME="data">
     <INPUT TYPE="button" VALUE="Click Here" onClick="valid(this.form)">
</FORM>
</BODY>
</HTML>
In this example, when the user clicks the button "Click Here", the onClick Event Handler calls the function valid().

onError:

An onError Event Handler executes JavaScript code when an error occurs while loading a document or an image. With onError event now you can turn off the standard JavaScript error messages and have your own function that will trace all the errors in the script. To disable all the standard JavaScript error messages, all you need to do is set window.onerror = null. To call a function when an error occurs all you need to do is this: onError = "myerrorfunction()".
See Example:
<HTML>
<HEAD>
<TITLE>Example of onError Event Handler</TITLE>
<SCRIPT>
window.onerror = ErrorSetting;
var e_msg = "";
var e_file = "";
var e_line = "";
document.form[8].value = "myButton"; // This is the error
function ErrorSetting(msg, file_loc, line_no) {
     e_msg = msg;
     e_file = file_loc;
     e_line = line_no;
   return true;
}
function display() {
     var   error_d = "Error in file: " + e_file +
                              "\nline number:" + e_line +
                              "\nMessage:" + e_msg;
     alert("Error Window:\n" + error_d);
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onError Event Handler </H3>
<FORM>
     <INPUT TYPE="button" VALUE="Show the error" onClick="display()">
</FORM>
</BODY>
</HTML>
Notice that the function ErrorSetting() takes three arguments: message text, URL and Line number of the error line. So all we did was invoke the function when an error occurred and set these values to three different variables. Finally, we displayed the values via an alert method.
Note: If you set the function ErrorSetting() to false, the standard dialog will be seen.

onFocus:

An onFocus Event Handler executes JavaScript code when input focus enters the field either by tabbing in or by clicking but not selecting input from the field. For windows, frames and framesets the Event Handler executes JavaScript code when the window gets focused. In windows you need to specify the Event Handler in the <BODY> attribute. For example:
<BODY BGCOLOR="#ffffff" onFocus="document.bgcolor='#000000'">
Note: On a Windows platform, the onFocus Event Handler does not work with <FRAMESET>.
See Example:
<HTML>
<HEAD><TITLE>Example of onFocus Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onFocus Event Handler</H3>
Click your mouse in the text box:<BR>
<FORM>
     <INPUT TYPE="text" onFocus='alert("You focused in the textbox!!")'>
</FORM>
</BODY>
</HTML>
In the above example, when you put your mouse on the text box, an alert() message displays a message.

onLoad:

An onLoad event occurs when a window or image finishes loading. For windows, this Event Handler is specified in the <BODY> attribute of the window. In an image, the Event Handler will execute handler text when the image is loaded. For example:
<IMG SRC="images/object.gif" NAME="jsobjects
 
onLoad="alert('You loaded myimage')">
See Example:
<HTML>
<HEAD>
<TITLE>Example of onLoad Event Handler</TITLE>
<SCRIPT>
function hello() {
    alert("Hello there...\n\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>
The example shows how the function hello() is called by using the onLoad Event Handler.

onMouseOut:

JavaScript code is called when the mouse leaves a specific link or an object or area from outside that object or area. For area object the Event Handler is specified with the <AREA> tag.
See Example:
<HTML>
<HEAD><TITLE> Example of onMouseOut Event Handler </TITLE></HEAD>
<BODY>
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over
<A HREF="javascript:void('');
  onMouseOut
="window.status='You left the link!'; return true;">
here
</A>
and then take the mouse pointer away.
</BODY>
</HTML>
In the above example, after pointing your mouse and leaving the link , the text "You left the link!" appears on your window's status bar.

onMouseOver:

JavaScript code is called when the mouse is placed over a specific link or an object or area from outside that object or area. For area object the Event Handler is specified with the <AREA> tag. For example:
<MAP NAME="mymap">
<AREA NAME="FirstArea" COORDS="0,0,49,25" HREF="mylink.html"
 
onMouseOver="self.status='This will take you to mylink.html'; return true">
</MAP>
See Example:
<HTML>
<HEAD><TITLE>Example of onMouseOver Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onMouseOver Event Handler</H3>
Put your mouse over
<A HREF="javascript:void('');
  onMouseOver
="window.status='Hello! How are you?'; return true;">
here
</A>
and look at the status bar
(usually at the bottom of your browser window).
</BODY>
</HTML>
In the above example when you point your mouse to the link, the text "Hello! How are you?" appears on your window's status bar.

onReset:

A onReset Event Handler executes JavaScript code when the user resets a form by clicking on the reset button.
See Example:
<HTML>
<HEAD><TITLE>Example of onReset Event Handler</TITLE></HEAD>
<BODY>
<H3> Example of onReset Event Handler </H3>
Please type something in the text box and press the reset button:<BR>
<FORM onReset="alert('This will reset the form!')">
     <INPUT TYPE="text">
     <INPUT TYPE="reset" VALUE="Reset Form" >
</FORM>
</BODY>
</HTML>
In the above example, when you push the button, "Reset Form" after typing something, the alert method displays the message, "This will reset the form!"

onSelect:

A onSelect Event Handler executes JavaScript code when the user selects some of the text within a text or textarea field.
See Example:
<HTML>
<HEAD><TITLE>Example of onSelect Event Handler</TITLE></HEAD>
<BODY>
<H3>Example of onSelect Event Handler</H3>
Select the text from the text box:<br>
<FORM>
     <INPUT TYPE="text" VALUE="Select This"
      
onSelect="alert('This is an example of onSelect!!')">
</FORM>
</BODY>
</HTML>
In the above example, when you try to select the text or part of the text, the alert method displays the message, "This is an example of onSelect!!".

onSubmit:

An onSubmit Event Handler calls JavaScript code when the form is submitted.
See Example:
<HTML>
<HEAD><TITLE> Example of onSubmit Event Handler </TITLE></HEAD>
<BODY>
<H3>Example of onSubmit Event Handler </H3>
Type your name and press the button<BR>
<FORM NAME="myform" onSubmit="alert('Thank you ' + myform.data.value +'!')">
     <INPUT TYPE="text" NAME="data">
     <INPUT TYPE="submit" VALUE="Submit this form">
</FORM>
</BODY>
<HTML>
In this example, the onSubmit Event Handler calls an alert() function when the button "Submit this form" is pressed.

onUnload:

An onUnload Event Handler calls JavaScript code when a document is exited.
See Example:
<HTML>
<HEAD><TITLE>onUnLoad Example</TITLE>
<SCRIPT>
function goodbye() {
        alert("Thanks for Visiting!");
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbye();">
<H3>Example of onUnload Event Handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>
In this example, the onUnload Event Handler calls the Goodbye() function as user exits a document.
NOTE: You can also call JavaScript code via explicit Event Handler call. For example say you have a function called myfunction(). You could call this function like this:
document.form.mybotton.onclick = myfunction
Notice that you don't need to put the () after the function and also the Event Handler has to be spelled out in lowercase.

Saturday, July 7, 2012

LoginPage Validation

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Page</title>
<script type="text/javascript">
function validation()
{
    var ml="6";
    var mx="12";
    valid=true;
    if(document.login.name.value=="")
        {
        alert("Please enter yor user id");
        valid=false;
        }
    else if(document.login.pwd.value=="")
            {
            alert("Please enter a valid password");
            valid=false;
            }
     else if(document.login.pwd.value.length<ml)
        {
        alert("Password should be more than 6 charachters");
        valid=false;
        }
     else if(document.login.pwd.value.length>mx)
        {
        alert("Password should be less than 12 charachters");
        valid=false;
        }
   
    return valid;
}
</script>
</head>
<body bgcolor="pink" >
<center><h1 text="green">MULTIPLEX AUTOMATION SYSTEM</h1></center>
<marquee> Welcome to the world of Entertainment! Unlimited joy!</marquee>
<hr>
<form name="login" action="events_frame.html" method="post" onSubmit=" return validation()">
<center>
<fieldset>
<legend align="right">Login</legend>
<table>
<tr>
<td>User Id:</td>

<td><input type="text" name="name" size="30" id="1"/></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="pwd" size="30"  id="2"></td>
<tr>
</tr>
<td><input type="submit" value="Submit"/></td>
<td><input type="reset" value="Reset"/></td>
</tr>
</table>
<a href="forgotpassword.html">Forgot Userid/Password?</a>
</center>
</fieldset>
</form>
</body>
</html>

Friday, July 6, 2012

Date and Textarea validation using JavaScripy in HTML

<html>
<title>Event Creation in MULTIPLEX AUTOMATION SYSTEM</title>
<head>
<script language = "Javascript">
/**
 * DHTML date validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/datevalidation.asp)
 */
// Declaring valid date character, minimum year and maximum year
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
    var i;
    for (i = 0; i < s.length; i++){  
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag){
    var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++){  
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function daysInFebruary (year){
    // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
    for (var i = 1; i <= n; i++) {
        this[i] = 31
        if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
        if (i==2) {this[i] = 29}
   }
   return this
}

function isDate(dtStr){
    var daysInMonth = DaysArray(12)
    var pos1=dtStr.indexOf(dtCh)
    var pos2=dtStr.indexOf(dtCh,pos1+1)
    var strMonth=dtStr.substring(0,pos1)
    var strDay=dtStr.substring(pos1+1,pos2)
    var strYear=dtStr.substring(pos2+1)
    strYr=strYear
    if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
    if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
    for (var i = 1; i <= 3; i++) {
        if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
    }
    month=parseInt(strMonth)
    day=parseInt(strDay)
    year=parseInt(strYr)
    if (pos1==-1 || pos2==-1){
        alert("The date format should be : mm/dd/yyyy")
        return false
    }
    if (strMonth.length<1 || month<1 || month>12){
        alert("Please enter a valid month")
        return false
    }
    if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
        alert("Please enter a valid day")
        return false
    }
    if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
        alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
        return false
    }
    if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
        alert("Please enter a valid date")
        return false
    }
return true
}

function ValidateForm()
{
    var dt=document.f1.date;
   
    valid=true;

if(document.f1.n1.value=="")

{
        alert("Name cannot be Null!");

valid=false;
}
else if(document.f1.desc.value=="")

{
        alert("Please provide Description for the event!");
   
valid=false;
}
else if(isDate(dt.value)==false){
        dt.focus();
        valid=false;
    }

    return valid;
 }

</script>

</head>
<body bgcolor="Oldlace">
<center><h1>Event Creation in Multiplex Automation System </h1>
<hr>

<form name="f1" action="createsuccess.html" method="post" onSubmit="return ValidateForm()">

<fieldset>
    <legend align="right">Event Creation</legend>

<center>
<table border="0">

<tr>
<td>Event Name:</td>
<td>
<input type="text" name="n1" />
</td>
</tr>
<tr>
<td>Event Time </td>
<td>
<input type="text" name="date" />
</td>
<tr>
<td>Description:</td>

<td>

<textarea name="desc" rows=10 cols=40> </textarea>
</td>
</tr>



<tr><td><input type="submit" value="Create" size=50 /></td>
<td><input type="reset" value="Reset" size=50/></td>
</table>
</fieldset>



</table>
</form>

<marquee><img src="advt1.png"/></marquee>
</body>
</html>