I’ve somehow managed to get through most of my life without using javascript. 

I’m not proud, but have always needed to use server side stuff such as php and perl rather than anything flash at the front end. I’ve used other people’s javascript and made small little changes but that’s all.

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.

If there is, I missed it. I would need to find some code which used one of the popular javascript frameworks. The application in question used YUI, so I decided to stick with that, rather than the more popular jquery. 

I quickly found what I was looking for

I just needed to make this run on load not run on mouseover.

The code included:
node.on(‘mouseover’, hover);
I thought that by replacing mouseover with ‘onload’, ‘load’ ‘domready’ or similar would do the trick. they did not. (why?)

(see http://developer.yahoo.com/yui/3/examples/event/event-timing.html )

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.

However, in the end, calling anim.run(); (which hover calls) in this way DID WORK. Had I even a basic knowledge of javascript the reason would probably by obvious, but I don’t know why hover successfully called the animation function when called by node.on (part of YUI) but does not when called elsewhere. 

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

Leave a Reply