Tag Archives: javascript

Angular JS basic

Leave a reply 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div>
 
Name : <input type="text" />
<h1>Hello {{name}}</h1>
</div>

Some quick notes

  • must be within ng-app
  • can specify default value with ng-init
  • ng-model to define value to be displayed later in place holder
  • use double curly braces as place holder to display value hold by ng-model

Javascript jump box

Leave a reply

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)

Javascript date picker

Leave a reply

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

Another simple and lightweight js datepicker – datepickr. Include 2 files – js and css file. (less than 10kb in size)

Javascript code to prompt delete

Leave a reply

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>

Javascript banner rotation script

Leave a reply

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>

Javascript to show/hide many divs

Leave a reply

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

<script language="javascript">
<!--
 
var state = 'none';
 
function showhide(layer_ref) {
 
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//--<
</script>;

HTML code

1
2

<p><a href="#" onclick="showhide('div1');">show/hide me</a></p>
<div id="div1" style="display: none;">This is the content</div>