471,851 Members | 859 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,851 software developers and data experts.

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

Similar topics

28 posts views Thread by Charles Sullivan | last post: by
NeoPa
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
aboka
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.