Textbox, Input (text) on turbotax... anyone know which 3rd party textbox this is???

pld888 · Feb 22, 2007

https://turbotaxweb.turbotaxonline.intuit.com/open/registration/SignIn.htm

anyone know which 3rd party textbox this is???

Cowboy \(Gregory A. Beamer\) · Feb 22, 2007

May not be third party. It looks like simple JavaScript and CSS to me.

--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA
http://gregorybeamer.spaces.live.com

********************************************
Think outside the box!
********************************************

George Ter-Saakov · Feb 22, 2007

It's pretty neat. So i decided to steal that from them

I actually looked at the source. They are using some crazy framework and the
whole page is done with JavaScript. That is why no source is available when
you right click on the page.

Anyway I saved their page with IE on my desktop and started to dig.
If you want those shadows it can be done with .css
<style>
INPUT.edit {
BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid;
PADDING-LEFT: 3px; FILTER:
progid

XImageTransform.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>

<input type="text" name=test class=edit>

That would do it. Naturally works only in IE. In FireFox there will be no
shadows.
As for slowly apearing blue color - it requires a lot more javascript. But
you can find an Animator object in the script files. That is the one that
does it. Also look for setFocus and setBlur that are attached to the input
boxes (onFocus, onBlur).

George

George Ter-Saakov · Feb 23, 2007

Guys, I finaly got that script out.
So whoever wants to have input boxes like this
https://turbotaxweb.turbotaxonline.intuit.com/open/registration/SignIn.htm?customerSource=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

XImageTransform.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) efx(percent);
if(percent > 1)
{
clearInterval(tmrId);
tmrId = null;
if(callback) callback();
}
}

for(var i=0; i < cnt; ++i)
if(efx) 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.filters.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>

Textbox, Input (text) on turbotax... anyone know which 3rd party textbox this is???

pld888

Cowboy \(Gregory A. Beamer\)

George Ter-Saakov

George Ter-Saakov