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

Check if a firefox addon is installed or not

While trying to check if one of my firefox add-on is installed or not, I found that, Chrome resources can no longer be referenced from within <img>, <script>, or other elements contained in, or added to, content that was loaded from an untrusted source. This restriction applies to both elements defined by the untrusted source and to elements added by trusted extensions.

Before firefox 3 we were able to check if a firefox add-on is installed or not as following.
using an image tag to load an image in the firefox add-on.
Once loaded trigger the onload event to verify the add-on is loaded.
For example,
< img src=”chrome://youraddonname/content/skin/images/anyimagefilename” width=”0″ height=”0″ onload=”function call here()” style=”visibility:hidden” >;

But this stopped working after firefox 3 and later versions due to security restrictions.
And the extensions won’t interact with the web page in any way.

Continue reading “Check if a firefox addon is installed or not”

Disable Text Selection in a web page

Here is a sample code snippet, which can be used to disable the text selection in a web page.

But selecting text inside input fields, such as Textarea, textbox and Select (combo) box is not restricted.

//get the browser name,version details
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }

//variables to hold the browser names, and versions
var is_ie = false;
var is_ff15 = false;
var is_ff20 = false;
var is_ff30 = false;
if(agent('msie'))
    is_ie = true;
else if(agent('firefox/3.0.0'))
    is_ff30 = true;
else if(agent('firefox/2.0.0'))
    is_ff20 = true;
else if(agent('firefox/1.5'))
    is_ff20 = true;

/* This is the function which Disables Text Selection in the Document*/
function selstart(e){
    //if not ie and !not ie then return
    if (!agent('msie') && !(!agent('msie')))
        return;

    var selobj=(!agent('msie'))? e.target : event.srcElement
    var topelement=(!agent('msie'))? "HTML" : "BODY"

    if(agent('msie')){
        if ( selobj.tagName!=topelement &&
                (selobj.tagName=='SELECT' ||
                selobj.tagName=='TEXTAREA' ||
                selobj.tagName=='INPUT')
              ){
                  selobj.select();
                  return true;
              }
        else
            return false;
    }else{
        document.body.style.MozUserSelect='none';
        document.body.style.userSelect='none';
    }

}
document.onselectstart=selstart;

This function uses another function named agent to get the browser agent name, whether the user’s browser is Firefox or IE or others. And some global variables for storing browser names and versions.

Whenever a select text event (onselectstart) is fired, the function selstart is executed and the text selection inside the web page is restricted. The function will return true to disable text selection.

Log Javascript Errors Part 2

So far we have seen how to trap the javascript errors in Part 1. Now we have
the data. We will see now, how to send data to the server using AJAX.

Send Data to Server

ajaxCtrl(
    function(){
        return true;
    },"ajxerrorLogger.php",theData
);

The remote file is “ajxerrorLogger.php”.

I?ve used PHP for this.
Instead you can use ASP, JSP also.

This is used to receive the
data sent from the JavaScript error handling function. That’s it.
Our JavaScript errors are now sent to the server silently.

What Next? In the server side, we have to code the “ajxerrorLogger.php”

Receive Data and Write into a File

if($_POST && $_POST['file']!=''){
    $filename = "./errlogs.txt";
    $fh = fopen($filename,"a+");

    //the content is in the form
    //Date    File    LineNo    Error Message
    //(tab delimited)
    $fcontent = date("d/m/Y h:i:s", mktime())."\t".
    $_POST['file']."\t".$_POST['line']."\t".$_POST['err']."\r\n";
    if (is_writable($filename)) {
        if (fwrite($fh, $fcontent) === FALSE) {
        }
        fclose($fh);
    }

}

$fh = fopen($filename,"a+");

 Continue reading "Log Javascript Errors Part 2"

Get Available Width and Height excluding your toolbars

Often we come across problems with the available screen area with different screen resolutions. The major problem is with the toolbars, somebody having the default toolbars of the browsers, and some buddy will have more toolbars installed, like Google , Y! etc. And even some users will have the taskbar twice the height of the default height for showing the quick launch bar, custom toolbars in the task bar, more tray icons.

The Problem is to find the available screen space excluding the toolbars in different resolutions. Here is a simple way of doing this.
First we find the resolution and then the available real estate/space for showing our stuff. The following function will do that.

 function init(){
var screenH = screen.height;
    var screenW = screen.width;
    alert("Your Screen Resolution:n" + screenW + "px x " + screenH + "px");
    if(document.all){
        availW = document.body.clientWidth;
        availH = document.body.clientHeight;
    }else{
        availW = innerWidth; availH = innerHeight;
    }
    alert("Available Space exculing the Toolbars:n" + availW + "px + x " + availH + "px"); }