[Wiggy]

Hi all hope someone can help,

I have the full version of mootools loaded and i am hiding a contact us form that is revealed when the contact us button is clicked, it works lovley in ie7-8 but in firefox/safari it totlay messes up.

link to demo

Untitled Document


hop some can help

javascript//
window.addEvent('domready', function(){


var mySlide = new Fx.Slide('form',{
duration: 1200,
transition: Fx.Transitions.Bounce.easeOut
}).hide();


$('toggle').addEvent('click', function(e) {
e = new Event(e);
mySlide.toggle();
e.stop();
});

})

css//
#cont1 #cont2 #form {
padding: 0px;
float: left;
width: 800px;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
background-image: url(../images/chalk.gif);
background-repeat: no-repeat;
height: 300px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

[udoobu]

After looking at it with Firebug, I noticed that the overflow on the DIV above your id="form" DIV is blocking the contact form after the animation fires. To see this, click the Contact link to fire the event and then inspect that DIV with Firebug and remove the overflow: hidden; and it will reveal the contact form. I'm still looking at it too.

See ya!

[udoobu]

Ok... here's what I've accomplished through Firebug:

- Take overflow off of hidden DIV above the form DIV
- Position banner DIV relative
- Position main-links DIV relative
- Reduce the height of the form, form-1h, and form-rh DIVs to 290px
- Reduct the margin-top of the form DIV to -290px

That did it for my Firefox. It worked perfect after that - open & close. The reason that I'm reducing everything to 290px is because leaving it at 300px makes it stick out of the top by 10px. So, if you can solve that without reducing then you wouldn't have to change that. But, 10px is a small sacrifice.

Let me know if that doesn't work!
Peace!

[Wiggy]

Right I see what you are saying when using firebug, the hidden div above the id-"form" must be generated by mootools as this is not something I have created. I would have thought the code would change the properties of this div to reveal the form div,

Buy the way thanks for you in-depth help much appreacetd

[Wiggy]

I would have expected the hidden value to toggle to visible but it doesnt seem to change

[udoobu]

You're welcome! I guess you could try and override it somehow... I dunno. Let me know if I can help.

[Wiggy]

Im Not really sure how to go about overriding it, the alternataive is using jquery to maipulate the form (as this work cross browsers) but could not find a way to do the link effect with it. with mootools it just fades in the new css style color:#ffffff or what ever you want?

[Wiggy]

All done, i manager to use the jquery method to hide/reveal the form and the mootools css fade.
Thanks again for your help!!

[Wiggy]

All done, i managed to use the jquery method to hide/reveal the form and the mootools css fade.
Thanks again for your help!!

[Wiggy]

All done, i managed to use the jquery method to hide/reveal the form and the mootools css fade.
Thanks again for your help!!

[udoobu]

No problem! Have a good one!