Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: incrediBILL

Message Too Old, No Replies

how to display incrementing letters, a countdown

     

boris99

8:10 pm on Mar 7, 2013 (gmt 0)



how to display some letters lets say 5 ,,one by one on the screen 1 second in between.

birdbrain

11:33 pm on Mar 7, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:57 pm on Mar 7, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

12:10 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

12:19 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Whatever.

birdbrain

Leosghost

12:22 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

12:35 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:46 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

3:01 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

8:53 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Exhausting possibilities .... not there yet:
CSS animations ...

lucy24

10:44 am on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

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

12:17 am on Mar 9, 2013 (gmt 0)

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

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

9:07 pm on Mar 20, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

9:10 pm on Mar 20, 2013 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



I figured the OP would like it to work in all browsers including IE5.5 and later..Hence anigifs and meta refresh/redirect..