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

Bookmark It

Hide Sites

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>

Bookmark It

Hide Sites

With Web 2, those simple icons are outdated. Icons should be polished with gradient, look cute if they have rounded corners. One such icon I needed recently was the ‘Star’ icon, like the one that resembles ‘Favorites icon’ in Internet Explorer.

In this tutorial, we will use Photofiltre an excellent freeware image processing tool. Install Photofiltre and you are ready to use it. Follow the below steps:

1. Run Photofiltre. Start by creating a new image. Go to File>New or Ctrl+N. Enter the width and height of the images or leave it to default.
2. Go to Selection>Load shape. An open file dialog will be presented to you to choose selection patterns from. Open the file ‘Star01.pfs’ or ‘Star02.pfs’. In this tutorial, I have used ‘Star02.pfs’. If no such file is available in the ‘Selections’ folder, then please download it by clicking on the ‘Download file’ link on the next line. The ‘Selections’ folder is under the folder where you installed Photofiltre
   [-]Download star02.pfs

   1 2 3 4 5 6 7 8 9 10 11

   10 170;195 150;120 210;75 130;75 105;0 80;75 0;75 65;120 40;195 105;150

3. Once the shape is loaded, you will see the outline of it as show below:
   
4. Now fill the selection with any color of your choice:
   
5. Now apply the filter ‘Progressive contour’. Apply this by going to Filters>Stylize>Progressive contour. Choose any color for the contour. Remember to check the option that says ‘Outside’. Click ok.
   
6. Select the magic wand tool() and click in the white space around the image. Now Right click and select ‘Invert selection’. The entire star with its contour will be selected and will resemble the below image.
   
7. Copy the shape using ‘Select>Copy shape’. Wherever you need to use that shape, paste the copied shape using ‘Selection>Paste shape’. Now if you wish fill it with a color of your choice and final output will look like the below:
   
   Your task is now complete.
8. Note:
   • You can save the selection by going to Selection>Save shape.
   • The combination of progressive contour and magic wand tool can be used to obtain rounded corners from almost any image! So remember it!

Bookmark It

Hide Sites

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!

Bookmark It

Hide Sites

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.

1. IF….ELSE conditional statements
2. User made javascript function with arguments
3. HTML table row Index property
4. document.getElementsByTagName()
5. cloneNode()
6. 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.

Bookmark It

Hide Sites