Tuesday, October 7, 2008

Create & remove & edit inline divs dynamically

OutPut:-



CSS :-

body {margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px}
#slider {width:459px}
.header {width:439px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
.header:hover {background:url(images/header_over.gif)}
.content {overflow:hidden}
.text {width:425px; border:2px solid #9ac1c9; border-top:none; padding:15px}

Javascript:-

<script type="text/javascript">
var flg_glob=1;
function creatediv()
{
var lblLeft = document.getElementById('<%= lblLeftPane.ClientID %>');
lblLeft.innerHTML += "<div class='header' id='header" + flg_glob + "' onclick='replacetxt("+ flg_glob + ")'><div style='display:inline;width:100%'><div style='width:30%;float:left;'><input type='text' id='txt" + flg_glob +"' style='display:none' onblur='change(" + flg_glob + ")'/><label id='lbl" + flg_glob + "' style='display:block;'>Header One</label></div><div style='width:60%;float:left;text-align:right'><input type='button' value='close' onclick='onClose(" + flg_glob +")'/></div></div></div>";
flg_glob = flg_glob +1;
return false;
}
function replacetxt(txt1)
{
document.getElementById('txt' + txt1).style.display = "block";
document.getElementById('txt' + txt1).value = document.getElementById('lbl' + txt1).innerText
document.getElementById('lbl' + txt1).style.display = "none";
document.getElementById('txt' + txt1).focus();
}
function change(txt1)
{
var val = document.getElementById('txt' + txt1).value;
document.getElementById('txt' + txt1).style.display = "none";
document.getElementById('lbl' + txt1).style.display = "block";
document.getElementById('lbl' + txt1).innerText = val;
}
function onClose(txt1)
{
var el1 = document.getElementById('slider');
var el = document.getElementById('header' + txt1);
el.parentNode.removeChild(el);
// el.removeChild(el);
}
</script>

Aspx Page:-



<asp:Button ID="btn" runat="server" OnClientClick="return creatediv()" Text="Add"/>
<div id="slider">
<asp:Label ID="lblLeftPane" runat="server"></asp:Label>
</div>

No comments: