Guys, I finaly got that script out.
So whoever wants to have input boxes like this
https://turbotaxweb.turbotaxonline.i...rce=3945900000
Welcome to use this code :) It's not mine I just stole it (and reworked a
little) from that page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
INPUT.edit {
BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid;
PADDING-LEFT: 3px; FILTER:
progid:DXImageTransform.Microsoft.DropShadow(color ="#666666",offX=2,offY=2);
FONT: 12px Arial,sans-serif; BORDER-LEFT: #666666 1px solid; COLOR: #333366;
BORDER-BOTTOM: #666666 1px solid; BACKGROUND-COLOR: #ffffee
}
</style>
<script>
function setFocus(e)
{
e.style.borderColor='#333333'
if (typeof Animator!="undefined" && null!=Animator)
Animator.run(Animator.fadeColor (e,setBGColor,'#ffffee','#cfe3fe'),8, 30)
else
e.style.backgroundColor='#cfe3fe'
}
function setBlur(e)
{
e.style.borderColor='#666666'
if (typeof Animator!="undefined" && null!=Animator)
Animator.run(Animator.fadeColor (e,setBGColor,'#cfe3fe','#ffffee'),8, 30)
else
e.style.backgroundColor='#ffffee'
}
Animator = new function()
{
var Animator = this;
var kIEOpacityFilter="DXImageTransform.Microsoft.Alpha ";
Animator.run = function(efx, iterations, intervalTime, callback)
{
if(!(efx instanceof Array))
efx = new Array(efx);
var itr = 0, cnt = efx.length;
if(isUndefined(callback))
callback = null;
function _cancel()
{
if(tmrId)
{
itr = iterations;
_tick();
}
}
function _tick()
{
itr++;
var percent = itr/iterations;
for(var i=0; i < cnt; ++i) if(efx[i]) efx[i](percent);
if(percent 1)
{
clearInterval(tmrId);
tmrId = null;
if(callback) callback();
}
}
for(var i=0; i < cnt; ++i)
if(efx[i]) break;
if(i == cnt)
{
if(callback) callback();
return null;
}
var tmrId = setInterval(_tick, intervalTime);
return _cancel;
}
Animator.fade = function(e, start, end, callback)
{
if(start 100) start = 100;
if(start < 0) start = 0;
if(end 100) end = 100;
if(end < 0) end = 0;
Animator.setOpacity(e, start);
return function(percent)
{
if(percent < 1)
{
Animator.setOpacity(e, start + Math.floor((end - start) * percent));
show(e);
}
else if(1 == percent)
{
Animator.setOpacity(e, end);
if(0 == end)
{
hide(e);
Animator.setOpacity(e, 100);
}
}
else
if(percent 1 && isDefined(callback))
callback(e);
}
}
Animator.setOpacity=function(e,opacity)
{
if(opacity>100)opacity=100;
if(opacity<0)opacity=0;
if(e.filters!=undefined&&e.filters!=null)
{
if(Animator.hasOpacityFilter(e))
e.filters.item(kIEOpacityFilter).Opacity=opacity;
}
else
{
var v=opacity/100;
if(v<0)v=0;
if(v>0.99)v=0.99;
e.style.opacity=v;
}
}
Animator.hasOpacityFilter=function(e)
{
return(e.filters!=undefined&&e.filters!=null&&e.fi lters.length>0&&e.filters.item(kIEOpacityFilter));
}
Animator.fadeColor = function(e, func, fromClrStr, toClrStr, callback)
{
var fromClr = new zColor(fromClrStr), endClr = new zColor(toClrStr);
return function(percent)
{
if(percent < 1)
{
var rInc = Math.floor((endClr.red - fromClr.red) * percent);
var gInc = Math.floor((endClr.green - fromClr.green) * percent);
var bInc = Math.floor((endClr.blue - fromClr.blue) * percent);
var cur = fromClr.clone();
cur.add(rInc, gInc, bInc);
func(e, cur.toString());
}
else if(1 == percent)
func(e, toClrStr);
else if(percent 1 && isDefined(callback))
callback(e);
}
}
Animator.move = function(e, x1, y1, x2, y2, bAccel, callback)
{
var startX = x1, startY = y1;
if(null != x1) e.style.left = x1 + "px";
if(null != y1) e.style.top = y1 + "px";
show(e);
return function(percent)
{
if(percent < 1)
{
if(bAccel) percent *= percent;
if(null != x1)
e.style.left = (x1 + Math.floor((x2 - startX) * percent)) + "px";
if(null != y1)
e.style.top = (y1 + Math.floor((y2 - startY) * percent)) + "px";
}
else
if(1 == percent)
{
if(null != x1)
e.style.left = x2 + "px";
if(null != y1)
e.style.top = y2 + "px";
}
else
if(percent 1 && isDefined(callback))
callback(e);
}
}
}
zColor = function(hex)
{
var reHex = /^#/;
var reHexVal = /^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/;
var reRGB = /^rgb/;
var reRGBVal = /^rgb.*\((\d+),\s*(\d+),\s*(\d+)/;
if(!hex)
return;
if(hex.match(reRGB))
{
var a = hex.match(reRGBVal);
if(!a || a.length != 4)
throw "invalid";
this.red = parseInt(a[1]);
this.green = parseInt(a[2]);
this.blue = parseInt(a[3]);
}
else
if(hex.match(reHex))
{
var a = hex.match(reHexVal);
if(!a || a.length != 4)
throw "invalid";
this.red = parseInt(a[1], 16);
this.green = parseInt(a[2], 16);
this.blue = parseInt(a[3], 16);
}
else
{
hex = hex.toLowerCase();
switch(hex)
{
case "black":
break;
case "red":
this.red = 255;
break;
case "white":
this.red=255;
this.green=255;
this.blue=255;
break;
default:
throw hex + " unknown";
}
}
}
zColor.prototype =
{
red : 0,
green : 0,
blue : 0,
copyTo : function(c)
{
if(!c) return;
c.red = this.red;
c.green = this.green;
c.blue = this.blue;
},
clone : function()
{
var c = new zColor();
this.copyTo(c);
return c;
},
add : function(r, g, b)
{
this.red += r;
if(this.red < 0 ) this.red = 0;
if(this.red 255) this.red = 255;
this.green += g;
if(this.green < 0 ) this.green = 0;
if(this.green 255) this.green = 255;
this.blue += b;
if(this.blue < 0 ) this.blue = 0;
if(this.blue 255) this.blue = 255;
},
isEqual : function(cmp)
{
return (cmp && this.red == cmp.red && this.green == cmp.green &&
this.blue == cmp.blue);
},
toString : function()
{
var clr = '#';
var n, s;
for(var i=0; i<3; ++i)
{
switch(i)
{
case 0: n = this.red; break;
case 1: n = this.green; break;
case 2: n = this.blue; break;
}
s = Math.round(n).toString(16);
if(s.length < 2)
clr += '0';
clr += s;
}
return clr;
}
}
function setBGColor(e,clr)
{
e.style.backgroundColor=clr
}
function isUndefined(v)
{
return(v==undefined||null==v)
}
function isDefined(v)
{
return(v!=undefined&&v!=null)
}
</script>
</head>
<body>
<input type="text" name=test class=edit onfocus="setFocus(this)"
onblur="setBlur(this)">
<input type="text" name=test1 class=err>
</body>
</html>
