mootools help

Timbo_La · 10 Nov 2009 at 16:34

Hi,

I want to add an effect to the buttons on mysite that when I rollover them they pop up as if their on springs. I would love to know how i would do it myself i have even bought the 'mootools Essentials' Book which i am slowly reading.

I have found this example already written and i am trying to understand it. i understand that the demo is using images and the code i have added is not using image. I am affecting the LI of an unordered list. why does my LI expand from top left to bottom right? i want them to do the same effect as the pictures above them.

if anyone has any advice or tips then can help me, or know of how to scale a div from the centre using mootools.

Thanks

Tim

Pho · 10 Nov 2009 at 19:01

Can you post a link to your testing version?

edit: or you could use jQuery UI which has an easy to use bounce function.

Timbo_La · 11 Nov 2009 at 00:19

Thanks for the reply, the bounce effect you showed me looks interesting.

here is a link to my example

thanks

tim

Pho · 11 Nov 2009 at 11:25

Sorry I mean a link to your testing page, it might just be something small you missed and it's far easier to look at that than to work out what you might have done

.

Timbo_La · 11 Nov 2009 at 14:40

Thanks for your reply,

to be honest your reply got me thinking so i went and looked at what was different from my code and the example code and I spotted that to get it to work as the example you have to wrap a table around the items which makes it work but then doesn't validate. i am gonna have a play around with it a bit more and will post back soon.

thanks for your help it was much appreciated, as it made me looked closer and i semi solved my problem myself.

Tim

Pho · 11 Nov 2009 at 18:58

I don't use mootools, but looking at the code could you not use this instead? I think it's just tieing to the image class of 'clickZoomOut' rather than being table specific.

Code:

<div id="zoomEffect">
	<img src="img001.jpg" alt="Bounce Image 1" class="clickZoomOut" /></td>
	<img src="img002.jpg" alt="Bounce Image 2" class="clickZoomOut" /></td>
</div>

If it works you will have to style the images to place them where you want them though.