With one of our new services (sabre) user testing had raised that users did not realise when a certain option was set (filters to restrict search results. There was a message to this affect but not really obvious. I had seen various modern looking sites show a box on screen, normally below the page template header but above the really content, which would glow from one colour to another, normally fading to something quite subtle (fitting in with the main colour scheme). I think I’ve seen this when you update settings/profile on some sites.
This must be a standard library to do all this. A bit like lightbox for showing photos in a flash way.
I quickly found what I was looking for
I just needed to make this run on load not run on mouseover.
The code included:
I thought that by replacing mouseover with ‘onload’, ‘load’ ‘domready’ or similar would do the trick. they did not. (why?)
The next thing I tried was some code on Simon Wilson’s site (something I come across with the answer to what I’m looking for impressively often)
On my simple page (more or less a copy of the demo page from the animation example above), I added his small function, and added a call to hover(). this didn’t work.
However, if I added some other code to hover() – such as displaying text or changing the background colour – that shows that the hover function was being called. So why was hover not running the animation (which essentially is all it did) when called from load?
I also tried with a simple setTimeout function, to call hover() a few seconds after page load, but it was the same result. I could see hover being called but not the animation running.
It’s after this I realised something quite silly, I could just call hover on the page (within the YUI code) and it would run on load. But still wouldn’t run the animation.
So it works – i can call anim.run – but feel a bit in the dark.
And at the end of it all I found the yui2 example which used much less code.
So to see my demo page is action (the contents of which varied a lot over time, but here is the end result)
And a text version so to see the source