Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Please hellp again with a code

Reply
Thread Tools

Please hellp again with a code

 
 
fulio pen
Guest
Posts: n/a
 
      08-22-2005
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: progidXImageTransform.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>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Hellp on home nextworking j Wireless Networking 1 08-15-2006 09:07 PM
Hellp with type promotion manochavishal@gmail.com C Programming 10 03-06-2006 02:21 AM
To all -- thanks for the hellp and Merry Christmas!! bambam@nospam.tnx Computer Support 14 12-20-2005 08:21 AM
hellp about local timestamp Zhaohui C++ 3 12-07-2005 10:59 AM
Hellp Recover Outlook Express 6.0 Folder/Messages deleted with Shift-Del Arawak Computer Support 1 09-26-2003 05:43 PM



Advertisments