homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
how to display incrementing letters, a countdown
boris99



 
Msg#: 4552265 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4552265 posted 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

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



 
Msg#: 4552265 posted 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

WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4552265 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4552265 posted 12:19 am on Mar 8, 2013 (gmt 0)

Whatever.

birdbrain

Leosghost

WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4552265 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4552265 posted 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

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



 
Msg#: 4552265 posted 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

WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4552265 posted 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

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



 
Msg#: 4552265 posted 8:53 am on Mar 8, 2013 (gmt 0)

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

lucy24

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



 
Msg#: 4552265 posted 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#: 4552265 posted 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

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



 
Msg#: 4552265 posted 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#: 4552265 posted 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

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



 
Msg#: 4552265 posted 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

WebmasterWorld Senior Member leosghost us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4552265 posted 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..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved