Client-Side Events

, ,
1

Hello all,

I wanted to know if someone can shared with me information about “Client-Side Events”.

I have an “Image” to which I set the width to 100px. The original size is 400px.

What I want to do is ADD an “Mouse Click” Client-Side Event which will adjust the size from 100px to 400px. (I may use the “Mouse Over” Event instead).

Can someone post up a code snippet that would go into the Event??? I have no idea how to code/reference the controls in Client-Side Events.

Thank you!

2

I used this:

CAF.model('#{caf:cid("htmlGraphicImage1")}').element.width = 400;

This was based on some of the other messages on this forum. And it WORKS! :smiley:

I also had to add a “Mouse Out” event which restores the width back to 100. Again same code, just replace 400 by 100.

BTW if these is another way (referring to the control itself), I’d still like to know. What I mean is instead of using “caf:cid(…)” if there is a way to refer to the control itself…

3

This should work:

CAF.model(this).element.width = 400;

Or, since in this case, the CAF model isn’t adding anything, you can skip the CAF model and operate directly on the HTML DOM element. For example:

this.width = 400;
4

Many Thanks Eric… That’s exactly what I was looking to know!

Good Stuff! 8)