Archive for January, 2010

Snippet to Dynamically add rows to a table

This code snippet will help you to add rows dynamically in a html table.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert Table Row using DOM</title>
<script language="javascript">
function addRow()
{
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
var row = document.createElement("TR");
var cell1 = document.createElement("TD");
var inp1 =? document.createElement("INPUT");
inp1.setAttribute("type","text");
inp1.setAttribute("value","New row");
cell1.appendChild(inp1);
var cell2 = document.createElement("TD");
cell2.innerHTML = "label3";
var cell3 = document.createElement("TD");
cell3.innerHTML = "label4";
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tbody.appendChild(row);
//alert(row.innerHTML);
}
</script>
</head>
<body>
<tableid="table1">
<tbody>
<tr>
<td><inputtype=textvalue="Original Row"></td>
<td>label1</td>
<td> label2</td>
</tr>
</tbody>
</table>
<inputtype="button"value="Insert Row"onClick= "addRow();">
</body>
</html>

Most of the code is self explanatory, so am leaving it unexplained. If anybody needs help, post your questions, will help you.

Get computed Width of an HTML Element

This function will help you to get the computed width(actual width) of an HTML Element/Object. For example you may be using a div to show some contents inside that. But want to calculate the actual width of the div after loading the contents inside it. There comes this function to help you.
function getComputedWidth(theElt){
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
var is_ie=true;
} else {
var is_ie=false;
}
if(is_ie){
tmphght = document.getElementById(theElt).offsetWidth;
}
else{
docObj = document.getElementById(theElt);
var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("width");
tmphght = tmphght1.split('px');
tmphght = tmphght[0];
}
return tmphght;
}
< div id="demo" onclick="alert(getComputedWidth('demo'));">hello there< /div>

To know the computed height of an element see here

Get computed Height of an HTML Element

This function will help you to get the computed height (actual height) of an HTML Element/Object. For example you may be using a div to show some contents inside that. But want to calculate the actual height of the div after loading the contents inside it. There comes this function to help you.


function getComputedHeight(theElt){
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
var is_ie=true;
} else {
var is_ie=false;
}
if(is_ie){
tmphght = document.getElementById(theElt).offsetHeight;
}
else{
docObj = document.getElementById(theElt);
var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("height");
tmphght = tmphght1.split('px');
tmphght = tmphght[0];
}
return tmphght;
}

< div id=”demo” onclick=”alert(getComputedHeight(‘demo’));”> hello there< /div>
Thanks to Richard A who made the code complete to run as a demo.

To know the computed width of an element see here

Structured Process of Developing a Web Application

A small presentation that will help the beginners to understand the process of developing a Web application.
I did this presentation for the my Team @ Office to give them the idea of the whole process.

Advanced Techniques in PHP – Part 1

Here I tried to explain two advanced techniques in PHP.
1. Backtracing
2. Method Chaining

Webservice – a brief Introduction

Recently I prepared this presentation for a small lecture for my team, to give info about web services.
Hope this will be helpful to others too. I tried to explain what is an Webservice, how and where it is used, How it works, Necessary thing to know to develop a webserice, etc.

Feedback Form