469,356 Members | 2,016 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

Please help modify a program

Some time ago someone on this forum helped me with the attached coding.
The page is in:

www.pinyinology.com/keys/keys2.html

When clicking the ok, the letters will change one by one. I like the
four letters change at same time, rather than one by one. Also, can I
add another set of symbols, such as ♣, ♦, ♥ and
♠, to the rotation? And then add more sets?

Thanks a lot. Following is the code:

------------------------------------------------------------------

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

Jul 23 '05 #1
2 1200
Dung Ping wrote:
Some time ago someone on this forum helped me with the attached coding. The page is in:

www.pinyinology.com/keys/keys2.html

When clicking the ok, the letters will change one by one. I like the
four letters change at same time, rather than one by one. Also, can I add another set of symbols, such as &clubs;, &diams;, &hearts; and
&spades;, to the rotation? And then add more sets?


You'll need to give a better description. Exactly *what* did you want
to fade to *what*? How is the page going to be arranged? A description
of what you wanted to accomplish will more than likely suggest the
solution, as well as how much flexibility the script needs to allow you
to customize it.

Jul 23 '05 #2
The url is wrong. The right one is:

www.pinyinology.com/keys/keys.html

I like to design a displayboard for different symbol systems, such as
alphabets of different languages. Above or underneath the board there
will be names of different symbols, such as math, logic, English,
Russian, Japanese, Arabic, Tai, and so forth. When a name is clicked,
corresponding set of symbols will appear in the squares.

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.