Please hellp again with a code

Discussion in 'Javascript' started by fulio pen, Aug 22, 2005.

  1. fulio pen

    fulio pen Guest

    Hello,

    I like to make some changes in following page:

    www.pinyinology.com/keys/keys.html

    1. When clicking the OK in the page, the letters on the squares would
    change one after another. I would like to have letters in all the
    squares to change at same time.

    2. Is it possible to add another set of letters, Such as the Greek
    letters Α, Β, Χ, and Δ? When clicking the OK, the
    Roman letters will be replaced by the Chinese phonetic letters, and
    clicking OK again, the Chinese will be replaced by the Greek.

    Please note that the code is not mine, but from somebody at this forum.
    The credit goes to that programer.

    Thanks again for help.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">


    body {
    font-size: 100%;
    background: url(http://www.grsites.com/textures/misc/misc157.jpg);
    }

    div#container {
    position: relative;
    width: 276px;
    margin: 80px auto;
    }


    div.see {
    position: absolute;
    width: 52px;
    height: 62px;
    font: normal 120% "comic sans ms";
    text-align: center;
    padding: .1em;
    border: 3px #fff inset;
    background: #f8f8ff;

    }


    div.hide {
    position: absolute;
    width: 52px;
    height: 62px;
    font: bold 130% "comic sans ms";
    text-align: center;
    padding: .1em;
    border: 3px #fff outset;
    background: #f8f8ff;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    }


    a#trigger:link,
    a#trigger:visited {
    position: absolute;
    left: 100px;
    top: 100px;
    font: normal 60% "comic sans ms";
    color: #fff;
    text-decoration: none;
    }


    a#trigger:hover {
    text-transform: uppercase;
    }


    </style>
    <!--[if IE]>
    <style type="text/css">
    div.hide {
    padding: .18em;
    }


    <![endif]-->
    </style>
    <script type="text/javascript">

    function Fader(el_id)
    {
    var o = this;
    var el = document.getElementById(el_id);
    this.s = el.style;
    this.sname =
    'undefined' != typeof this.s['filter'] ?
    'filter' :
    'undefined' != typeof this.s['opacity'] ?
    'opacity' :
    'undefined' != typeof this.s['MozOpacity'] ?
    'MozOpacity' :
    'undefined' != typeof this.s['KhtmlOpacity'] ?
    'KhtmlOpacity' : '';
    this.is = 0;
    this.chk = (/filter/.test(this.sname));
    this.end = this.chk ? 100 : .99;
    this.inc = this.chk ? 1 : .01;
    this.intv = null;
    this.timer = null;
    this.set_opac = function(v)
    {
    if (this.sname)
    {
    this.s[this.sname] = (this.chk) ?
    'alpha(opacity=' + v + ')' : '' + v;
    }
    }
    this.fade_in = function(sec)
    {
    window.clearInterval(this.timer);
    this.is = 0;
    this.intv = Math.round((sec * 1000) / 100);
    this.timer = window.setInterval(
    function()
    {
    o.set_opac(o.is += o.inc);
    if (o.is >= o.end)
    window.clearInterval(o.timer);
    }, this.intv);
    }
    this.fade_out = function(sec)
    {
    window.clearInterval(this.timer);
    this.is = this.chk ? 100 : 1;
    this.intv = Math.round((sec * 1000) / 100);
    this.timer = window.setInterval(
    function()
    {
    o.set_opac(o.is -= o.inc);
    if (o.is <= 0)
    window.clearInterval(o.timer);
    }, this.intv);
    }
    }


    function fadeInAll()
    {
    glyphs[0].fade_in(3);
    for (var f = 1; f < glyphs.length; ++f)
    setTimeout('glyphs['+f+'].fade_in(3)', 2000 * f);
    }

    var glyphs = [];
    window.onload = function()
    {
    var el, n = 1;
    while (el = document.getElementById('hide' + n++))
    glyphs.push(new Fader(el.id));
    }

    </script>
    </head>
    <body>
    <div id="container">
    <div id="see1" class="see" style="left:0;">A</div>
    <div id="hide1" class="hide" style="left:0;">ㄉ</div>
    <div id="see2" class="see" style="left:70px;">B</div>
    <div id="hide2" class="hide" style="left:70px;">ㄊ</div>
    <div id="see3" class="see" style="left:140px;">C</div>
    <div id="hide3" class="hide" style="left:140px;">ㄋ</div>
    <div id="see4" class="see" style="left:210px;">D</div>
    <div id="hide4" class="hide" style="left:210px;">ㄌ</div>
    </div>
    <a id="trigger"
    href="#null"
    onclick="fadeInAll()">ok</a>
    </body>
    </html>
    fulio pen, Aug 22, 2005
    #1
    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. amit
    Replies:
    0
    Views:
    375
  2. che
    Replies:
    2
    Views:
    478
  3. KK
    Replies:
    2
    Views:
    516
    Big Brian
    Oct 14, 2003
  4. Hellp with type promotion

    , Feb 28, 2006, in forum: C Programming
    Replies:
    10
    Views:
    523
    Dave Thompson
    Mar 6, 2006
  5. Zhaohui

    hellp about local timestamp

    Zhaohui, Dec 7, 2005, in forum: C++
    Replies:
    3
    Views:
    376
Loading...

Share This Page