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>

Monday, October 6, 2008

Asp.Net

This is javascript for Mouse hover image expansion
<script>
// Thumbnail expansion and reduction animation//use expandthumb(
exid = 0;exstep = 0;exwdth = 0;exht = 0;extp = 0;exlft = 0;extot = 0;extotst = 15;
function expandthumb(thumbid, fullwidth, fullheight)
{
if (extot != 0) {
clearTimeout(extot);
}
if (exid > 0 && exid != thumbid) {
restorethumb(); }
if (exid != thumbid) {
img = document.getElementById("screen" + thumbid);
img.style.display = 'block'; exid = thumbid;
exstep = 1;
exwdth = fullwidth;
exht = fullheight;
extp = img.offsetTop;
exlft = img.offsetLeft; }
else if (exstep < 1) { exstep = 1; } expandstep();}
function doexpand() {
img = document.getElementById("screen" + exid);
thumb = document.getElementById("thumb" + exid);
myscroll = getScroll();
if (extp + thumb.height > myscroll.top + myscroll.height) {
finaltop = myscroll.top + myscroll.height - exht; } else { finaltop = extp + thumb.height - exht; }
if (finaltop < myscroll.top) { finaltop = myscroll.top; }
img.style.top = finaltop + ((extp - finaltop) * (extotst - exstep) / extotst) + 'px';
if (exlft + thumb.width > myscroll.left + myscroll.width) {
finalleft = myscroll.left + myscroll.width - exwdth; }
else { finalleft = exlft + thumb.width - exwdth; }
if (finalleft < myscroll.left) { finalleft = myscroll.left; } img.style.left = finalleft + ((exlft - finalleft) * (extotst - exstep) / extotst) + 'px';
img.width = thumb.width + ((exwdth - thumb.width) * exstep / extotst); img.height = thumb.height + ((exht - thumb.height) * exstep / extotst);}

function restorethumb() {
img = document.getElementById("screen" + exid);
img.style.top = ''; img.style.left = '';
img.style.display = 'none'; exid = 0;}

function expandstep() {
extot = 0; doexpand();
if (exstep < extotst) {
exstep++; extot = setTimeout("expandstep()", 20); }}

function reducestep() {
extot = 0; doexpand();
if (exstep > 0) {
exstep--; extot = setTimeout("reducestep()", 20); }
else { restorethumb(); }}

// returns the scroll position and size of the browser
function getScroll() {
if (document.all && typeof document.body.scrollTop != "undefined") {
// IE model
var ieBox = document.compatMode != "CSS1Compat";
var cont = ieBox ? document.body : document.documentElement;
return {
left: cont.scrollLeft, top: cont.scrollTop, width: cont.clientWidth, height: cont.clientHeight }; }
else { return { left: window.pageXOffset, top: window.pageYOffset, width: window.innerWidth, height: window.innerHeight }; }}
<script>

<img src='12.jpg' width="400" height="400" alt='img' border="2" id='screen112' onmouseout='reducethumb(112); return false;' style='position: absolute; display: none;'>
<img src='12.jpg' width="100" height="100" alt='mis' border="2" id='thumb112' onmouseover='expandthumb(112, 500, 449);'>