Javascript CSS based error pop up

November 24, 2006

I have created a javascript which I will be extending to use as library.
-It basically identify if error is occured
-Based on that I pops up a div with Error message
-It dynamically finds the position of form element to Pop up the error message.

I dont like javascript pop up which blocks my entire operation. It many time annoying to user.

I am still working on it. While working on it I faced a problem with different browser mainly with IE and Mozilla.

I found some script on the net which finds the exact position based on the offsetParent property of any element.

I am trying to use functionality to provide the tooltip kinda of look and feel

I will explain the code, once I am done with the coding. I will upload it for review and later on publish it.


Steps to make an in place editing in HTML using Javascript

November 20, 2006

1) Create div container where you want in place editing

2) Give it some id. eg
<div id=”d”> Here is the text that will get changed to input field</div>

3) Onclick of div call javascript function which will hold the innerHTML value of div.
<div id=”d” onclick=”edit();”> Here is the text that will get changed to input field</div>

4) form a string to print the input field in function
var textValue = ‘<input type=”text” id=”editedValue” value=”‘+ innerHTML +'” onblur=”save()”>’

5) Onblur of input field, get the values entered in textField.
var editedValue = document.getElementById(“editedValue”).innerHTML;

6) Assign it back the the original container
document.getElementById(“d”).innerHTML = editedValue;

Your in place editing is ready, fancy stuff

Pseudo Code

//call edit on click of div
function edit()
{
var textValue = document.getElementById(“d”).innerHTML;
document.getElementById(“d”).innerHTML='<input type=”text” id=”
editedValue” value=’+'” ‘+textValue+'”>’;
}

//call save on blur of textField
function save()
{
var
editedValue = document.getElementById(“editedValue“).value;
document.getElementById(“d”).innerHTML=
editedValue;
}

I will put the working sample tomorrow.