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

C

Cowboy \(Gregory A. Beamer\)

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

George Ter-Saakov

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: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>

<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
 
G

George Ter-Saakov

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: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) 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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top