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.
2 Comments |
AJAX, CSS, DHTML, HTML, Javascript |
Permalink
Posted by Vijay Khambalkar
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.
1 Comment |
AJAX, CSS, DHTML, HTML, Javascript |
Permalink
Posted by Vijay Khambalkar