<HTML>
<HEAD>
<SCRIPT language=Javascript>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML>
<script type="text/javascript">
function iFrameHeight() {
var f = document.getElementById('blockrandom');
f.style.height = '100px' ;
var d = (f.contentWindow.document || f.contentDocument) ;
var height = Math.max(d.documentElement.scrollHeight, d.body.scrollHeight) ;
height += 20;
f.style.height = height + 'px' ;
f.setAttribute("height", height) ;
}
</script>
<iframe onload="iFrameHeight()" id="blockrandom"
name=""
src="test.htm"
width="100%"
height="200"
scrolling="no"
align="top"
frameborder="0"
class="wrapper">
No Iframes</iframe>
JavaScript Date<html>
<script language="JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
//Arrays for the days of the week, and months of the year
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
//Write out the date.
document.write("<left><small><font color='Black' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small></left>")
</script>
</html>
Disable Browser Back Button Using Javascript<HTML>
<HEAD>
<TITLE>Disable Back Button in Browser </TITLE>
<script type="text/javascript">
function disableBackButton()
{
window.history.forward();
}
setTimeout("disableBackButton()", 0);
</script>
</HEAD>
<body onload="disableBackButton()">
<p>This page contains the code to avoid Back button.
</p>
<p>Click here to Goto <a href="noback.html">NoBack Page</a>
</p>
</BODY>
</HTML>
Sample JavaScript Onload Functions Sample using google map code
<html>
<head>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
window.onload=initialize; //JavaScript Onload Functions
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
var address = '1600 Amphitheatre Pky, Mountain View, CA';
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Create Javascript Popup page<script language="JavaScript" type="text/JavaScript">
function popup(url,w,h,name,resizable,toolbar,left,top)
{
var features ="location=no,menubars=no,"+"width=550," +"height=550,"+"resizable=yes," +"scrollbars=yes," + "status=yes," + "titlebar=no," +"toolbar="+toolbar+"," +"left="+left+"," +"top="+top;
var win = window.open(url,name,features);
}
</script>
<div>
By clicking Next, you are indicating that you have read and agree to the
<a href="javascript:popup('popuppage.html')" title="Privacy Policy" rel="bookmark">Privacy Policy</a>
</div>
Create a Javascript show hide contents//css
<style>
.bigbold {
font-weight: bold;
font-size: 25px;
}
.heading
{
background-color: #8FAFBF;
text-align: center;
font-weight: bold;
height: 30px;
}
</style>
//javascript
<script>
function showhideit(id,hid)
{
curstatus = document.getElementById(id).style.display;
if(curstatus == "none")
{
document.getElementById(id).style.display = 'inline';
document.getElementById(hid + '1').innerHTML = ' -';
document.getElementById(hid + '2').innerHTML = '- ';
}
else
{
document.getElementById(id).style.display = 'none';
document.getElementById(hid + '1').innerHTML = ' +';
document.getElementById(hid + '2').innerHTML = '+ ';
}
}
</script>
//HTML
<table align="center" cellpadding="0" cellspacing="0" border="1">
<tr class="heading" style="cursor: pointer;" onclick="showhideit('information','info')">
<td width="100" align="left" class="bigbold" id="info1"> +</td>
<td align="center"><b>CLICK TO SHOW INFORMATION</b></td>
<td width="100" align="right" class="bigbold" id="info2">+ </td>
</tr>
<tr>
<td colspan="3" width="100">
<div style="display:none;" id="information">
PHP Loops
Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.
In PHP, we have the following looping statements:
while - loops through a block of code while a specified condition is true
do...while - loops through a block of code once, and then repeats the loop as long as a specified condition is true
for - loops through a block of code a specified number of times
foreach - loops through a block of code for each element in an array
</div>
</td>
</tr>
</table>
Javascript show hide toggle<script type="text/javascript">
function toggle(obj){
var el = document.getElementById(obj);
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = 'inline';
}
}
</script>
<a href="#test1" onclick="toggle('table1');">Toggle 01 </a><br />
<table id="table1" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>
<br/>
<a href="#test2" onclick="toggle('table2');">Toggle 02</a><br />
<table id="table2" style="display:none;" border="1" cellspacing="0" cellpadding="5">
<tr bgcolor="#CCCCCC">
<td width="100" align="center"><font>PROGRAMME</font></td>
<td width="150" align="center"><font>OBJECTIVES</font></td>
<td width="210" align="center"><font>MODULES</font></td>
</tr>
</table>
Javascript One Function to Count and Limit Multiple Form Text Areas<SCRIPT LANGUAGE="JavaScript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<form name="myForm"
action=""
method="post">
<b>One Function to Count and Limit Multiple Form Text Areas</b><br>
<textarea name="message1" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message1,document.myForm.remLen1,125)"
onKeyUp="textCounter(document.myForm.message1,document.myForm.remLen1,125)"></textarea>
<br>
<input readonly type="text" name="remLen1" size="3" maxlength="3" value="125">
characters left
<br>
<textarea name="message2" wrap="physical" cols="28" rows="5"
onKeyDown="textCounter(document.myForm.message2,document.myForm.remLen2,125)"
onKeyUp="textCounter(document.myForm.message2,document.myForm.remLen2,125)"></textarea>
<br>
<input readonly type="text" name="remLen2" size="3" maxlength="3" value="125">
characters left
<br>
<input type="Submit" name="Submit" value="Submit">
<br>
</form>
Create a bubble tooltip using javascript<style>
a{
color: #D60808;
text-decoration:none;
}
a:hover{
border-bottom:1px dotted #317082;
color: #307082;
}
#bubble_tooltip{
width:147px;
position:absolute;
display:none;
}
#bubble_tooltip .bubble_top{
background-image: url('images/bubble_top.gif');
background-repeat:no-repeat;
height:16px;
}
#bubble_tooltip .bubble_middle{
background-image: url('images/bubble_middle.gif');
background-repeat:repeat-y;
background-position:bottom left;
padding-left:7px;
padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
position:relative;
top:-8px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:11px;
}
#bubble_tooltip .bubble_bottom{
background-image: url('images/bubble_bottom.gif');
background-repeat:no-repeat;
background-repeat:no-repeat;
height:44px;
position:relative;
top:-6px;
}
</style>
<script>
function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}
function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';
}
</script>
<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>
<a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip. This is the content of the tooltip.');return false" onmouseout="hideToolTip()"><h2>Roll over me</h2></a> </p>
IE 5 and 6 png transparent using javascript
<script type="text/javascript" src="js/jquery.js"></script>
this.pngfix = function() {
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
$("*").each(function(){
var bgIMG = $(this).css('background-image');
if(bgIMG.indexOf(".png")!=-1){
var iebg = bgIMG.split('url("')[1].split('")')[0];
$(this).css('background-image', 'none');
$(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='crop')";
};
});
};
};
this.init = function() {
pngfix();
};
$(document).ready(function(){
init();
});
1. Live Validation form
Draw Charts with Google Visualization API.
Accordion Menu script
javascript Accept terms
javascript Email Validation
Scriptaculous ProtoFlow - Prototype
Prototype Prototip
