/tutorials/html_401/article.php/3479681/HTMLTime-Shift.htm HTML+Time-Shift


By Joe Burns

Use these to jump around or read it all...

[Make the Text Show Up] [Appear and Go Away] [Appear in the Same Place]

When you own as many reference books as I do, you tend to actually sit around and wait for commands that are not yet active to become active. Yes, I know it's sad, but what are you going to do? There's nothing good on television.

I was made aware of HTML+Time a good year or so ago. I grabbed some code. It didn't work. I fiddled with it. No dice. I posted queries to newsgroups. Blank. It was, and still is, the only time in my HTML career that I ran into a command that promised it would work, but didn't. If all goes as planned, HTML+Time is suppose to allow you control of when elements on your Web page will display. If you want text to pop up after 10 seconds, great. If you'd like that text to split after five seconds...great. That's what this HTML+Time does, or is supposed to do.

Well, wait no more because with the advent of MSIE5.5, Microsoft has incorporated a new formatic into their DTD. It's called "time2". As I understand it, the command "time" was suppose to go live, but didn't. It was submitted to the W3C as version 1.0, but apparently (my emphasis) didn't get into the DTD (Document Type Definition) for 5.0. The 2.0 version of HTML+Time is in 5.5, and the "time" command has been upgraded to "time2" and now carries the properties I was led to believe the first "time" carried.

Did you get all that? There will be a test.

Make the Text Show Up

This is about as simple an example of the code as I can create. I am using the SPAN command to carry the time commands that will affect the text. If you're using MSIE 5.5, you should see a line of text. Then, you should see a new blob of text every second for five seconds. Try it.

Click for the Example

Did you see it? Now that's cool. I'm sure your mind is going nuts just like mine was, thinking about all of the neat effects you can get with this. Let's take a look at the code. It's a heck of a lot easier than you might first think.

      .time { behavior: url(#default#time2);}

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

First off, you MUST notice the Style Sheet command stuck in there. If you do not have a style block on your page, create one. You can simply paste what I have above. It works just fine.

The "time" is a class that will attach the text in the block of text below with the behavior you're attempting to create. See the "time2" in the style command? That allows all of this to finally work. Let's look at one of the lines of text:

<SPAN CLASS="time" BEGIN="1">One second</SPAN>

Here's what's happening:

  • SPAN is an MSIE-only command that allows Style Sheet commands to be carried along and applied against the text without any other modification like a P or BR.

  • CLASS="time" attaches the line of text to the Style Sheet statement you put in your style block.

  • BEGIN="#" denotes the amount of seconds to wait before display.

If you follow down the row, you'll notice I have each piece of text set to appear one second after the previous. That's why they came up in succession.

Appear and Go Away

With one extra attribute, you can also set the amount of time a line of text will stay on the page. Dig this:

See the Appear and Go Away Example

Here's the code that did it:

<SPAN>Every second text will appear:</SPAN>
<SPAN CLASS="time" BEGIN="1" DUR="1">One second</SPAN>
<SPAN CLASS="time" BEGIN="2" DUR="1">Two Seconds</SPAN>
<SPAN CLASS="time" BEGIN="3" DUR="1">Three seconds</SPAN>
<SPAN CLASS="time" BEGIN="4" DUR="1">Four seconds</SPAN>
<SPAN CLASS="time" BEGIN="5" DUR="1">Five seconds</SPAN>
<SPAN CLASS="time" BEGIN="6">Done!</SPAN>

It's just the same as the previous code except I added the attribute "DUR". That stands for duration. Again, whatever number you put in, that's the number of seconds the text will stay on the page before disappearing. I set them all to one so the effect was each replacing the other. As you might have guessed, if you don't use the DUR attribute, then the text stays for good once it appears.

One more trick!

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date