View Full Version : How do you replace animation with new animation after first has loaded?? anyone.

12-17-2005, 12:33 PM
I am in the process of building a complicated web interface and I have a problem.

If you want to check out the site to better understand it is:

It is going to be an art site for a client. It is the clients design.
I have searched on forums and search engines for months and have not found any help for my problem.

What I need to do is to load a gif anim. and then when that has loaded I need to replace it with another animation file.
Is this possible??

The idea is that the menu will load and automatically spin to reveal arrows that control the window scroll bar.
The client then needs the interactive buttons to pluse and so I need to replace the original anim file with the new one.

I just don't know how to approach this.

The site is bieng constructed with simple technology as it is intended for use with screen readers, voice software and blind touch balls, so I have opted against flash which would solve all my problems.

The site is a little rough at the moment but eventually I will streamline the code and it will be much slicker.

Just hope someone can help....

12-17-2005, 12:33 PM
As well as the pulsing animations I am trying to create a new scroll bar device.

The menu system has a shadow to create a floating over the page illusion.
What I am trying to do is create a shadow using png files of different opacities that will link to the scrollbar position.

The window scrollbar will eventually be hidden and the shadow will be used instead.
The idea is to have darker images linked to the top scrollbar position and as the user scrolls down the page information the shadow will get lighter and lighter.
Probably use 5 images.

I just have not been able to find any help in constructing it.

12-17-2005, 02:42 PM
<img src="loading.gif" onload="this.src='menu.gif';"/>
I don't know about the scrolling shadows. There is, however, an onscroll event handler. (http://www.mozilla.org/docs/dom/domref/dom_window_ref72.html) Be warned that it is DOM level 0.

12-17-2005, 04:02 PM
Rather than rely upon the onscroll event, one could poll:

<script type="text/javascript">

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body

function pollScroll() {
topScrollP=window.pageYOffset? window.pageYOffset : iecompattest().scrollTop
if (topScrollP>300)
do something

setInterval("pollScroll();", 250)


12-17-2005, 04:26 PM
You just couldn't resist naming a function "pollScroll()," could you. :p
You'd also have to poll window.pageXOffset if your page has horizontal scrollbars. Don't rely on this to replace the scrollbars.