PDA

Click to See Complete Forum and Search --> : HTML+Time-Shift

Sunflash
03-26-2005, 01:02 AM
HI, I would like to find a way to make this code LOOP, but can't figure it out, could someone help me?

here's the code:

<STYLE>
.time { behavior: url(#default#time2);}
</STYLE>

<SPAN>Every second text will appear:</SPAN>
<SPAN CLASS="time" BEGIN="1">One second</SPAN>
<SPAN CLASS="time" BEGIN="2">Two Seconds</SPAN>
<SPAN CLASS="time" BEGIN="3">Three seconds</SPAN>
<SPAN CLASS="time" BEGIN="4">Four seconds</SPAN>
<SPAN CLASS="time" BEGIN="5">Five seconds</SPAN>
<SPAN CLASS="time" BEGIN="6">Done!</SPAN>
HaganeNoKokoro
03-26-2005, 04:31 AM
By loop, you mean you want the next span to appear every second? then you will need javascript<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charsaet=iso-8859-1">
</head>
<body>
<div id="timeDiv"></div>
<script type="text/javascript">
var msgs=["Every second text will appear.", "One second", "Two seconds", "Three seconds", "Four seconds", "Five seconds", "Done!"];
function writeTime(n) {
var theSpan=document.createElement("SPAN");
theSpan.className="time";
theSpan.appendChild(document.createTextNode(msgs[n]));
document.getElementById("timeDiv").appendChild(theSpan);
document.getElementById("timeDiv").appendChild(document.createElement("BR"));
}
for(var i=0; i<=msgs.length; i++) {
setTimeout("writeTime("+i+")", i*1000);
}
</script>
</body>
</html>
Sunflash
03-26-2005, 09:25 AM
Well, I want it to go back to "One Second" when it's done, still keeping the time right, that code was an example, this is the code that I want to repeat:

<STYLE>
.time { behavior: url(#default#time2);}
</STYLE>

<SPAN>Seek And You Shall See:</SPAN>
<P>
<center>
<SPAN CLASS="time" BEGIN="10" DUR="40">"Who says that I am Dead Knows nought at all.</SPAN><BR>
<SPAN CLASS="time" BEGIN="15" DUR="36">I-am that is, Two mice within Redwall.</SPAN><BR>
<SPAN CLASS="time" BEGIN="20" DUR="32">The warrior sleeps `Twixt Hall and Cavern Hole.</SPAN><BR>
<SPAN CLASS="time" BEGIN="25" DUR="28">I-am that is, Take on my mighty role.</SPAN><BR>
<SPAN CLASS="time" BEGIN="30" DUR="24">Look for the sword In moonlight streaming fourth, At night,when days first hour Reflects the North.</SPAN><BR>
<SPAN CLASS="time" BEGIN="35" DUR="20">From o'er the threshold Seek and you will see;</SPAN><BR>
<SPAN CLASS="time" BEGIN="40" DUR="16">I-am that is, My sword will wield for me.''</SPAN><BR>
<SPAN CLASS="time" BEGIN="42" DUR="12">-Martin The Warrior.''</SPAN>
Sunflash
03-26-2005, 10:26 AM
Anybody? please?
HaganeNoKokoro
03-26-2005, 11:29 AM
Simple adaptation of the code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charsaet=iso-8859-1">
</head>
<body>
<span>Seek And You Shall See:</span>
<div id="timeDiv"></div>
<script type="text/javascript">

var msgs=[
"\"Who says that I am Dead Knows nought at all.",
"I-am that is, Two mice within Redwall.",
"The warrior sleeps `Twixt Hall and Cavern Hole.",
"I-am that is, Take on my mighty role.",
"Look for the sword In moonlight streaming fourth, At night,when days first hour Reflects the North.",
"From o'er the threshold Seek and you will see;",
"I-am that is, My sword will wield for me.\""
];

function writeTime(n) {
var theSpan=document.createElement("SPAN");
theSpan.className="time";
theSpan.appendChild(document.createTextNode(msgs[n]));
document.getElementById("timeDiv").appendChild(theSpan);
document.getElementById("timeDiv").appendChild(document.createElement("BR"));
}
function startOver() {
while(document.getElementById("timeDiv").firstChild!=null) document.getElementById("timeDiv").removeChild(document.getElementById("timeDiv").firstChild);
for(var i=0; i<msgs.length; i++) {
setTimeout("writeTime("+i+")", (i+1)*1000);
}
setTimeout("startOver()", (msgs.length+1)*1000);
}
for(var i=0; i<msgs.length; i++) {
setTimeout("writeTime("+i+")", (i+1)*1000);
}
setTimeout("startOver()", (msgs.length+1)*1000);
</script>
</body>
</html>
Sunflash
03-26-2005, 11:40 AM
I have different times set for each msg to appear and disappear,
I don't want them to go away every second, look at the code I gave you:

<SPAN>Seek And You Shall See:</SPAN>
<P>
<center>
<SPAN CLASS="time" BEGIN="10" DUR="40">"Who says that I am Dead Knows nought at all.</SPAN><BR>
<SPAN CLASS="time" BEGIN="15" DUR="36">I-am that is, Two mice within Redwall.</SPAN><BR>
<SPAN CLASS="time" BEGIN="20" DUR="32">The warrior sleeps `Twixt Hall and Cavern Hole.</SPAN><BR>
<SPAN CLASS="time" BEGIN="25" DUR="28">I-am that is, Take on my mighty role.</SPAN><BR>
<SPAN CLASS="time" BEGIN="30" DUR="24">Look for the sword In moonlight streaming fourth, At night,when days first hour Reflects the North.</SPAN><BR>
<SPAN CLASS="time" BEGIN="35" DUR="20">From o'er the threshold Seek and you will see;</SPAN><BR>
<SPAN CLASS="time" BEGIN="40" DUR="16">I-am that is, My sword will wield for me.''</SPAN>



See the BEGIN="X" and DUR="X", well, I need those to be the same.
HaganeNoKokoro
03-26-2005, 12:08 PM
Try this out; you will have to play with the times to get the desired effect<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
<html lang="en">
<head>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charsaet=iso-8859-1">
</head>
<body>
<span>Seek And You Shall See:</span>
<div id="timeDiv"></div>
<script type="text/javascript">
var deleted=0;
//[message, start time, duration] (all times in ms)
var msgs=[
["\"Who says that I am Dead Knows nought at all.", 1000, 2000],
["I-am that is, Two mice within Redwall.", 2000, 2000],
["The warrior sleeps `Twixt Hall and Cavern Hole.", 2500, 1000],
["I-am that is, Take on my mighty role.", 3500, 1500],
["Look for the sword In moonlight streaming fourth, At night,when days first hour Reflects the North.", 4000, 500],
["From o'er the threshold Seek and you will see;", 5000, 5000],
["I-am that is, My sword will wield for me.\"", 5500, 2000]
];

function writeTime(n) {
var theSpan=document.createElement("SPAN");
theSpan.id="time"+n;
theSpan.appendChild(document.createTextNode(msgs[n][0]));
document.getElementById("timeDiv").appendChild(theSpan);
document.getElementById("timeDiv").appendChild(document.createElement("BR"));
}
function deleteTime(n) {
document.getElementById("timeDiv").removeChild(document.getElementById("time"+n));
deleted++;
if(deleted==msgs.length) startOver();
}
function startOver() {
deleted=0;
while(document.getElementById("timeDiv").firstChild!=null) document.getElementById("timeDiv").removeChild(document.getElementById("timeDiv").firstChild);
for(var i=0; i<msgs.length; i++) {
setTimeout("writeTime("+i+")", msgs[i][1]);
setTimeout("deleteTime("+i+")", msgs[i][1]+msgs[i][2]);
}
}
startOver();
</script>
</body>
</html>