Friday, September 18, 2009

Frame

<html>
<frameset rows="50%,50%">

<frame id="leftFrame" src="frame_noresize.htm">

<frame id="rightFrame" src="frame_a.htm">

</frameset>

<frameset cols="50%,50%">

<frame id="leftFrame" src="frame_noresize.htm">

<frame id="rightFrame" src="frame_a.htm">

</frameset>

</html>

do it from child pages

parent.document.getElementById("rightFrame").noResize=false;

parent.document.getElementById("rightFrame").scrolling="yes";

parent.document.getElementById("rightFrame").src=http://google.com;

Break out of a frame

function breakout()

{

if (window.top!=window.self)

{

window.top.location="tryjs_breakout.htm";

}

}

Automatically jumps to the next field

This script automatically jumps to the next field when a field's maxlength has been reached:

<form id="myForm">

<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">

<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">

<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">

</form>

function checkLen(x,y)

{

if (y.length==x.maxLength)

{

var next=x.tabIndex;

if (next<document.getElementById("myForm").length)

{

document.getElementById("myForm").elements[next].focus();

}

}

}

select

<select id="mySelect" onchange="favBrowser()">

<option>Internet Explorer</option>

<option>Netscape</option>

<option>Opera</option>

</select>


function
favBrowser()

{

var mylist=document.getElementById("mySelect");

document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;

}

alert(document.getElementById("mySelect").selectedIndex);

alert(document.getElementById("mySelect").length);

document.getElementById("mySelect").size=4;

document.getElementById("mySelect").multiple=true;

function getOptions()

{

var x=document.getElementById("mySelect");

txt="All options: "

for (i=0;i<x.length;i++)

{

txt=txt + "\n" + x.options[i].text;

}

alert(txt);

}

Remove options from a dropdown list
function removeOption()

{

var x=document.getElementById("mySelect");

x.remove(x.selectedIndex);

}

<select id="menu" onchange="go()">

<option>--Select a page--</option>

<option value="http://senthilmcan.blogspot.com">Senthil</option>

<option value="http://www.microsoft.com">Microsoft</option>

<option value="http://senthilmcan-clientscript.blogspot.com">Clientscript</option>

</select>

function go()

{

window.location=document.getElementById("menu").value;

}

focus, select

<body onload="setFocus()">

document.getElementById("fname").focus();


<input type="text" id="fname">

document.getElementById("fname").select();

Form Reset/Submit

Reset Form

<form id="myForm">

document.getElementById("myForm").reset();

Submit Form

<form id="myForm" action="js_form_action.asp" method="get">

document.getElementById("myForm").submit();

<form action="tryjs_submitpage.htm" onsubmit="return callAnyfunction()">

<input type="submit" value="Submit">

checkbox/ radio

document.getElementById("myCheck").checked=true;

coffee=document.forms[0].coffee;

txt="";

for (i=0;i

{

if (coffee[i].checked)

{

txt=txt + coffee[i].value + " ";

}

}

alert(txt);

General

document.getElementById("myButton").disabled=true;
document.getElementById("myButton").value;
document.getElementById("myButton").type
document.getElementById("myButton").id
document.getElementById('myButton').accessKey="b"; //Alt + accesskey
document.write(document.getElementById("myButton").form.id);