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

Discussion in 'ASP .Net' started by pld888@gmail.com, Feb 22, 2007.

  1. Guest

    , Feb 22, 2007
    #1
    1. Advertising

  2. Cowboy \(Gregory A. Beamer\), Feb 22, 2007
    #2
    1. Advertising

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

    "Cowboy (Gregory A. Beamer)" <> wrote in
    message news:...
    > 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!
    > ********************************************
    > <> wrote in message
    > news:...
    >> https://turbotaxweb.turbotaxonline.intuit.com/open/registration/SignIn.htm
    >>
    >> anyone know which 3rd party textbox this is???
    >>

    >
     
    George Ter-Saakov, Feb 22, 2007
    #3
  4. 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>
     
    George Ter-Saakov, Feb 23, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sandal
    Replies:
    8
    Views:
    305
    Mark Rae [MVP]
    Oct 16, 2007
  2. phl
    Replies:
    0
    Views:
    362
  3. Cirene
    Replies:
    6
    Views:
    2,315
    Eliyahu Goldin
    May 14, 2008
  4. NeoBettyChen
    Replies:
    0
    Views:
    749
    NeoBettyChen
    Jan 14, 2011
  5. buck
    Replies:
    10
    Views:
    192
    Uri Guttman
    Feb 18, 2010
Loading...

Share This Page