W3hobbyist

If you love to design for Web 2.0, then you absolutely need AJAX and cute professional looking icons. One of the icons commonly needed for an AJAX site is the ‘Loading’ or ‘Progress bar icons’ that tells the visitor that the content is being loaded.

Ofcourse you can rip it off from any of the thousands of sites that use AJAX, but what if you could:

1. Choose from35 varieties
2. Color of your choice, that goes well with color scheme of your website or application
3. And all thisfor FREE and within 5 sec. of time!

If you don’t believe me, visit AjaxLoad.info

Inverting checkbox selection seems a fairly common task needed with forms. While there are many already available, if you go through the below code, you can yourself tell the difference between this and other ones.

<!-- part of the HTML form-->
   <fieldset id="all_checkboxes">
      <input type="checkbox" name="c1" value="1" checked="checked" /> Item 1 <br />
      <input type="checkbox" name="c2" value="1" checked="checked" /> Item 2 <br />
      <input type="checkbox" name="c3" value="1" /> Item 3 <br />
      <input type="checkbox" name="c4" value="1" /> Item 4 <br />
   </fieldset>

var fieldset_of_all_checkboxes=document.getElementById("all_checkboxes");
var array_of_checkboxes=fieldset_of_all_checkboxes.getElementsByTagName("input");
for(checkbox in array_of_checkboxes)
{
array_of_checkboxes[checkbox].click();
}

With this method, you don’t have to find if the checkbox is in checked or unchecked state!

This was a problem I faced when I had to add event listeners to elements created in a loop such that the elements should ‘alert’ the value of var i when they are clicked.

I am aware that finding words to precisely describe this problem is difficult for me, but I will try to explain using a practical example. Ex: I am creating a ordered list with ten list-items such that when any of the list-items receives a click, its alerts its item no. For instance, If you click on 3rd list-item, it alerts ‘3′, similarly, ‘5′ is alerted when you click on list-item 5.

Most common approach would be to code something like below:

function my_func()
{
var ol=document.createElement("ol");
document.body.appendChild(ol);
 
	for(var i=1; i<11; i++)
	{
	var li=document.createElement("li");
	li.innerHTML="This is a list item";
	li.onclick=function(onClick){alert(i);}
	ol.appendChild(li);
	}
}
my_func();

If you try this out in your browser, you will find that the value ‘11′ is alerted irrespective of the list-item that was clicked.

Workaround:

The trick is let an attribute of the element hold the value, and using the onClick event to alert the title of the element! Ex:

<li title="2" onclick="alert(this.title)">This is a list item</li>

The code would then look like:

<script type="text/javascript">
function my_func()
{
var ol=document.createElement("ol");
document.body.appendChild(ol);
 
	for(var i=1; i<11; i++)
	{
	var li=document.createElement("li");
	li.innerHTML="This is a list item";
	li.setAttribute("title",i);//note this
	li.onclick=function(onClick){alert(this.title);}//note this
	ol.appendChild(li);
	}
}
my_func();
</script>

Request: Kindly suggest appropriate brief descriptions or ‘tags’ for this entry. Please use the comment system!

Since I work with PHP as well as JavaScript, I know that there is no easy in-built function in JS to check if a given key exists or not in a JavaScript array object. Google-ing for the same returned some user-made functions that were either too long and complicated or even impractical with huge arrays.

The below small snippet works just fine:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
//lets setup a sample array and its key-and-values
var array=new Array();
array['name']='Rohan Shenoy';
array['gender']='Male';
array['age']='21';
 
//lets try to find an key which exists
if(array['name']==undefined)
{alert('That key is undefined');}
else
{alert('That keys exists');}
 
//lets try to find an key which does NOT exist
if(array['residence']==undefined)
{alert('That key is undefined');}
else
{alert('That keys exists');}
</script>

As simple as that!

Logging out a user after a particular period of inactivity is a good measure(!?) to ensure that the user is there attending the screen and has not left it unattended. I have commonly seen such implementation while reading my webmails. If there is no activity for 5 minutes, I am auto-logged out because the system assumes that I may not be sitting in front of the PC and hence somebody else may get an opportunity to read my emails.

Logic:

You can achieve the same inactivity-induced auto-logout by using javascript. The logic is:

1. Start an timer as soon as the page loads.
2. On every activity, reset the timer. Since there is no in-built javascript function to reset the timer, to reset the timer, we have to first clear the previous timer and then immediately implement another timer.
3. If the timer runs out due to inactivity, redirect the user to your logout page

The JavaScript:

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 type="text/javascript">
function set_interval()
{
//the interval 'timer' is set as soon as the page loads
timer=setInterval("auto_logout()",10000);
// the figure '10000' above indicates how many milliseconds the timer be set to.
//Eg: to set it to 5 mins, calculate 5min= 5x60=300 sec = 300,000 millisec. So set it to 3000000
}
 
function reset_interval()
{
//resets the timer. The timer is reset on each of the below events:
// 1. mousemove   2. mouseclick   3. key press 4. scroliing
//first step: clear the existing timer
clearInterval(timer);
//second step: implement the timer again
timer=setInterval("auto_logout()",10000);
..completed the reset of the timer
}
 
function auto_logout()
{
//this function will redirect the user to the logout script
window.location="your_logout_script_location_here";
}
</script>

The HTML tags

The body tag should listen to these 3 events to record activity.

1. Mouse move
2. Mouse click
3. Key press
4. Scrolling

The markup would thus be

1
2
3
4

.
<body onmousemove="reset_interval()" onclick="reset_interval()" onkeypress="reset_interval()" onscroll="reset_interval()">
.
.

Thats it. Your inactivity-induced auto-logout is ready to be implemented!