homepage Welcome to WebmasterWorld Guest from 54.196.57.4
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
how to display incrementing letters, a countdown
boris99




msg:4552267
 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




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

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved