birdbrain
msg:4552344 | 11:33 pm on Mar 7, 2013 (gmt 0) |
Hi there boris99,
and a warm welcome to these forums. ;)
Try it like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
#single-letters {
text-align:center;
}
</style>
<script type="text/javascript">
(function() {
'use strict';
var ary=['a','b','c','d','e','f','g','h','i','j','k','l','m',
'n','o','p','q','r','s','t','u','v','w','x','y','z'];
var c=0;
var timer;
var delay=1000;
function init(){
document.getElementById('single-letters').innerHTML+=ary[c];
c++;
if(c==ary.length) {
clearTimeout(timer);
return;
}
timer=setTimeout(function(){init()},delay);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="single-letters"></div>
</body>
</html>
|
|
birdbrain
|
lucy24
msg:4552351 | 11:57 pm on Mar 7, 2013 (gmt 0) |
Was that a roundabout way of saying "It can't be done with HTML alone"? (This being the HTML forum :()
Add this to the growing list of posts where my immediate answer would have been "You can't" but then it turns out I've overlooked something.
|
Leosghost
msg:4552354 | 12:10 am on Mar 8, 2013 (gmt 0) |
Lookup "anigifs"..no javascript required..( so works if your visitor has scripts blocked )..just make sure that you repeat each "number" frame consecutively ..so that it stays on screen for the required time ( could be 1 second..could be longer, or shorter ), before the next number set of frames begins..
Numbers.. ( single colour on single colour or transparent background ) will make small anigif files..
Using anigifs could be described as "only" using html..for a given definition of "only" ;)
|
birdbrain
msg:4552356 | 12:19 am on Mar 8, 2013 (gmt 0) |
Whatever.
birdbrain
|
Leosghost
msg:4552359 | 12:22 am on Mar 8, 2013 (gmt 0) |
Hey :) ..I liked your solution too..you can't have too many solutions if they all work ..:)..
I nearly suggested flash :) "that" might have been one too many ;)
|
birdbrain
msg:4552365 | 12:35 am on Mar 8, 2013 (gmt 0) |
Hi there Leosghost,
I had not seen your post, which of course contained a valid solution to the newcomer's problem,
as I was carefully composing my previous post in response to the one that immediately followed
my original post. :)
birdbrain
|
lucy24
msg:4552391 | 2:46 am on Mar 8, 2013 (gmt 0) |
| as I was carefully composing my previous post |
|
Yes, it took time and effort to come up with the mot juste. Obviously a simple "Yes" wouldn't do :P
Animated gif set to cycle at intervals of 1 second, hmm, now that's an interesting approach... You'll lose that small percentage of users who have gone into their prefs and switched off the "show animations" option-- unless some browsers have this off by default? And then there's the option for "show only once" which means you're out of luck if your back was turned while the page was loading.
:: backtrack to check OP ::
What did you want to have happen after the last letter? Repeat the cycle, or go to a permanent image?
Come to think of it, I was picturing a rotation of letters, like an old-fashioned countdown. If you meant adding letters slowly, then probably you would want to end up with a final, complete word.
|
Leosghost
msg:4552398 | 3:01 am on Mar 8, 2013 (gmt 0) |
If we are going to exhaust all possibilities ..we ought to include using 5 successive pages with a one second meta refresh to each "next one" in the sequence in the headers..content of each page to vary or increment as required..
|
swa66
msg:4552480 | 8:53 am on Mar 8, 2013 (gmt 0) |
Exhausting possibilities .... not there yet:
CSS animations ...
|
lucy24
msg:4552508 | 10:44 am on Mar 8, 2013 (gmt 0) |
| we ought to include using 5 successive pages with a one second meta refresh to each "next one" in the sequence in the headers..content of each page to vary or increment as required |
|
Can you escape from this without force-quitting the browser?
As I speak, SubEthaEdit keeps going in and out of perpetual-motion mode. I'm deploying some mighty RegExes to rearrange 600-odd footnotes, and the document does not enjoy it. Especially the footnotes that contain poetry, illustrations or both.
|
boris99
msg:4552516 | 11:03 am on Mar 8, 2013 (gmt 0) |
many thanks to all of you guys...
i was trying to make some intro for my son ...
like some upcoming letters with lot of noise by each upcoming letter.
nice to see such good respond, i am a bit old trying to catch up all my waisting years right now
thanks boris from holland
|
incrediBILL
msg:4552748 | 12:17 am on Mar 9, 2013 (gmt 0) |
A purely HTML method would to set up 5 pages which use meta redirect to the next page with the appropriate time value in the meta redirect before loading the next page.
|
Nochek
msg:4556878 | 5:03 pm on Mar 20, 2013 (gmt 0) |
I went ahead and registered just to post on this thread. Meta redirects and Javascript is all well and good, but this could be handled very easily with CSS using animations and the nth-of-type selector.
Something like this (untested, fyi):
<style>
.letters li:nth-of-type(1) {
-webkit-animation: dosomething 10s ease-in-out 0s 1;
-moz-animation: dosomething 10s ease-in-out 0s 1;
-o-animation: dosomething 10s ease-in-out 0s 1;
-ms-animation: dosomething 10s ease-in-out 0s 1;
}
@keyframes dosomething{
0% { opacity: 1 }
9.9% { opacity: 1 }
10% { opacity: 0 }
100% { opacity: 0 }
}
</style>
<div class="change">
<ol class="letters">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ol>
</div>
|
lucy24
msg:4556936 | 9:07 pm on Mar 20, 2013 (gmt 0) |
| this could be handled very easily with CSS using animations and the nth-of-type selector. |
|
Well, lots of things are easier if you don't need them to work on MSIE < version-after-next ;)
caniuse dot com says >= 9 can handle "-of-type" selectors, >= 10 animation. Opera 9.5 and up for selectors, which excludes all those robots professing to be Opera 8.90 or whatever it is they all say they are.
Has anyone ever met a -ms- prefix in the wild? Its use would require MSIE to admit that there exist other browsers, and that it's doing something those other browsers might not do. Generally it's not "-ms-style: suchandsuch" but "style-nobody-else-has-heard-of: suchandsuch".
I especially like the ominous "Partial support in Android browser refers to buggy behavior in different scenarios." That's just vague enough to strike terror into any programmer's heart.
|
Leosghost
msg:4556937 | 9:10 pm on Mar 20, 2013 (gmt 0) |
I figured the OP would like it to work in all browsers including IE5.5 and later..Hence anigifs and meta refresh/redirect..
|
|
