HTML Time, Part 2

By Joe Burns


Building the Right Environment to Support AI, Machine Learning and Deep Learning

Appear in the Same Place

I will do this with text, but you can easily see how this can be used to run a slide show of images. It works just the same. Just replace the text that I am using with images. It'll work just the same way.

See the Appear in the Same Place Example

Here's the code that did it:

<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="0" DUR="1">Every second text will appear:</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="1" DUR="1">One second</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="2" DUR="1">Two seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="3" DUR="1">Three seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="4" DUR="1">Four seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="5" DUR="1">Five seconds</SPAN>
<:SPAN STYLE="position:absolute;top:10;left:10" CLASS="time" BEGIN="6">Done!</SPAN>

I made a couple of changes. First off, I set the original text to stand for a limited duration so it'll get out of the way for other text that is soon to come. I then set each SPAN to a specific position. Since all the positions are the same, they all appeared one right on top of the other.

That's That

I really like this effect. I dislike that it is only available on IE 5.5. If you want to use it, feel free. Netscape renders the text perfectly. It just doesn't have the delay as the seconds pass; everything displays straightaway.

Just make sure that the text you use doesn't rely heavily on the fact that it pops in after a short amount of time.



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

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

Thanks for your registration, follow us on our social networks to keep up-to-date