November 16th, 2008
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:
- Choose from35 varieties
- Color of your choice, that goes well with color scheme of your website or application
- And all thisfor FREE and within 5 sec. of time!
If you don’t believe me, visit AjaxLoad.info
No Comments » |
GFX, JavaScript/AJAX, Web designing |
Permalink
Posted by Rohan Shenoy
July 14th, 2008
The other day on the DigitalPoint webmaster forums, I had somebody ask this question “How to half-disable a form field”.
From all the HTML I knew, it was not possible in a straight-forward way! But we can manipulate with CSS.
The HTML-CSS
<span style="border: 2px inset;">
<input style="border: none; text-align: right;" name="half_1" size="3" type="text" value="ABC" />
<input style="background: #FFFFFF; border: none;" name="half_2" readonly="readonly" size="3" type="text" value="123" />
</span> |
3 Comments |
CSS, Web designing |
Permalink
Posted by Rohan Shenoy
June 12th, 2008
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:
- Start an timer as soon as the page loads.
- 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.
- 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.
- Mouse move
- Mouse click
- Key press
- 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!
8 Comments |
JavaScript/AJAX, Web designing |
Permalink
Posted by Rohan Shenoy
June 10th, 2008
While there a lot complicated javascript code snippets to move table rows up and down, this one is very easy provided you can use the below functions fluently.
- IF….ELSE conditional statements
- User made javascript function with arguments
- HTML table row Index property
- document.getElementsByTagName()
- cloneNode()
- replaceChild()
If you prefer not to use DOM manupulation, then you can try the simpler method given at the end of this post, but please read it limitation.
Lets start:
The table layout and markup:
The table layout:
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
| <table border=”1”>
<tr>
<td>1. </td>
<td> Description of item 1 </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
</tr>
<tr>
<td>2. </td>
<td> Description of item 2 </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
</tr>
<tr>
<td>3. </td>
<td> Description of item 3 </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
</tr>
<tr>
<td>4. </td>
<td> Description of item 4 </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
</tr>
<tr>
<td>5. </td>
<td> Description of item 5 </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’up’)”>Move up</a> </td>
<td> <a href=”javascript: void(0)” onclick=”move(this,’down’)”>Move down</a> </td>
</tr>
</table> |
The user-made javascript function:
We use the user-made function named move(), with two arguments. The first argument is supposed to help us recognize the row which we want to move either up or down. The second arguments is supposed to let us know the direction in which the row should be moved: Either up or down.
The javascript code:
The logic of the code is explained as comments. So please read them:
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
61
62
| function move(elem,direction)
{
//since we have to deal with two rows: the row that should be moved and the other row which is adjacent to it, we have to first establish references to each of them. We establish these references using the rowIndex property.
//lets get the row index on the row that is to be moved(the one on which the user clicked)
// a td tr
clickedRowIndex=elem.parentNode.parentNode.rowIndex;
//This row could either be the first row or the last row or some inbetween row.
//The first row cannot be moved upwards. So if the user tries to move the first row upwards, we will have to tell him that it can’t be done.
if(clickedRowIndex ==”0” && direction==”up”)
{
alert(“This is the uppermost row and connot be moved upwards”);
return false;
}
//Similarly, if the user wants to move the last row downwards, we again tell him that it isn’t possible
//For this, this we will have to first find how many rows are there in the table, then compare if the rowIndex(rindex) is same as that of last row
maxrindex= (elem.parentNode.parentNode.parentNode.getElementsByTagName(“tr”).length)-1;
if(clickedRowIndex ==maxrindex && direction==”down”)
{
alert(“This is the bottommost row and cannot be moved downwards.”);
return false;
}
//for easy reference to the parent elements, lets setup reference to the parent HTML table.(table tag)
parentTable=elem.parentNode.parentNode.parentNode;
//establish reference to the row which is supposed to be moved(the one on which the user clicked)
clickedrow=parentTable.getElementsByTagName(“tr”)[clickedRowIndex];
//establish reference to adjacent row.
//If the direction is ‘up’, the adjacent row’s rowIndex will be 1 less that that of ‘clickedrow’
// If the direction is ‘down’, the adjacent row’s rowIndex will be 1 more that that of ‘clickedrow’
if(direction==”up”)
{
adjacentRowIndex= clickedRowIndex –1;
}
if(direction==”down”)
{
adjacentRowIndex= clickedRowIndex +1;
}
adjacentrow= parentTable.getElementsByTagName(“tr”)[adjacentRowIndex];
//Once that we have established references to both the rows that should change their position, we should clone each of them
clickedrow_clone=clickedrow.cloneNode(true);
adjacentrow_clone=clickedrow.cloneNode(true);
//both the cloned nodes remain ‘invisible’ to the user.
//now replace the nodes.
//The below replaceChild() function will replace the adjacentrow with ‘clone of the clicked row’ and then remove the clone on the clicked row.
adjacentrow=parentTable.replaceChild(clickedrow_cloned,adjacentrow);
//similar replacement as above
clickedrow=parentTable.replaceChild(adjacentrow_cloned,clickedrow);
// the clones of two rows that we made above were automatically removed by the replaceChild() function.
} |
Alternate much easier way, but with limitations
If you are not comfortable with DOM, or simplt wouldn’t like to use it, you can also move rows by swapping their innerHTML. However, its limitation is that it cannot preserve the state of input elements. Eg: If you check a checkbox and then move it upwards, the checkbox would be checked while moving it.
5 Comments |
JavaScript/AJAX, Web designing |
Permalink
Posted by Rohan Shenoy