December 26th, 2009
admin
Sometime you want to automatically do something when people selecting an option from a combo box. Here is the HTML + js code
1
2
3
4
5
6
7
| <form name="form">
<select name="mybox" onchange="window.location.href=this.options[this.selectedIndex].value;">
<option selected>Please Select
<option value="http://www.example.com/">example site
<option value="http://www.google.com/">google site
</select>
</form> |
If want to open it in new window just change the window.location.href to window.open(xxx)
November 25th, 2009
admin
I’ve been looking for a simple and clean date picker for few of my applications. I found this website very useful, listing 10 javascript date picker you can choose on.
21 Excellent Date Picker
One of my favorite one is this jQuery date picker
This simple javascript code can be used to prompt user whether they want to proceed with an action or not. Usually be used when user click on delete or remove button/link.
The javascript code
1
2
3
4
5
6
7
8
9
10
11
12
| <script LANGUAGE="JavaScript">
<!--
function confirmSubmit()
{
var agree=confirm("Are you sure you want to DELETE this record?");
if (agree)
return true ;
else
return false ;
}
// -->
</script> |
The HTML code
1
| <a href="?act=delete&id=1234" onClick="return confirmSubmit()">Delete</a> |
Sometimes you need tab ability to toggle between boxes. This tab box normally used to save space on a page. Let say if you have a login and sign up box which will occupy limited space on your page.
You can use this content tab box to toggle between sign up and login box.
Download and read about AJAX content tab
This script is given by a friend long time ago. Very useful but it is not so dynamic. You can easily change parameter to suit your need.
The javascript code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JavaScript-Impaired Browsers
/* First, if you load fewer or more than 6 sponsors
into your rotator, change the "number_of_sponsors" variable
to the actual number of sponsor .gifs you plan to
load. */
number_of_sponsors=3;
var sctr=0;
var halt=0;
var isn=new Array();
for (i=0;i<number_of_sponsors;i++){
isn[i]=new Image();
}
/* The sponsor .gif names are loaded into the isn[x]
sponsor images array. You may load any number of
sponsor images (.gif or .jpg or both) into this
array. They must all be the same size, however.
Substitute your own .gif filenames for the ones
shown here. Note that the first .gif must appear
in the isn[0] array element. */
isn[0].src="images/suggest.png";
isn[1].src="images/claim.png";
isn[2].src="http://www.example.com/images/layout.png";
/* Finally, replace the URL's below with those of
your sponsors IN THE SAME ORDER. */
var durl=new Array();
durl[0]="";
durl[1]="http://www.google.com";
durl[2]="layout.php";
/* This script is set to rotate every 10 seconds.
(5000=5 seconds, so 30000 would equal 30, etc)
You should change the number in the setTimeout()
call below for the number of seconds you wish. */
function rotateIt(){
if (halt!=1){
sctr++;
if (sctr>number_of_sponsors-1){
sctr=0;
}
document.sponsor.src=isn[sctr].src;
setTimeout("rotateIt()",3000);
}
}
/* This code will work just fine with or without
frames. However, if you are in frames and wish
to replicate the TARGET="_top" call to remove
frames, change the location.href call to:
parent.location.href=durl[sctr];
below. */
function doIt(){
halt=1;
parent.location.href=durl[sctr];
}
function dispIt(){
parent.window.status=durl[sctr];
}
// End Hiding --></SCRIPT> |
Code in HTML body (to display)
1
2
3
4
5
6
7
8
9
10
|
<A HREF="http://www.example.com"
onClick="doIt();return false" onMouseover="dispIt();return true;"><IMG
SRC="images/claim.png" NAME="sponsor" BORDER="0"
HEIGHT="150" WIDTH="490" NATURALSIZEFLAG="0" ALIGN="BOTTOM"></A>
<SCRIPT LANGUAGE="JavaScript"><!-- Hide JavaScript from Java-Impaired Browsers
sctr=0;
rotateIt();
// End Hiding --></SCRIPT> |