Menu Fader Problems

[azzcat]

I’m new to the forum and JavaScript. Also not sure if this problem is just js or just CSS or a combo, but I’ll post here first.

I took the demo from Chris’s js Menu Fader (https://css-tricks.com/examples/MenuFader/) and altered it to work with my contact page. (http://www.azzcatdesign.com/html/contact.html) The two items are "web" and "print" with web being the default selection: web is 100% opacity and web questionnaire (from WuFoo) is displayed. The intended behavior is for "print" to come to full opacity when clicked and the web form to fade and display the print form (also from WuFoo). Because the forms are long, I’ve put a slice of the parchment background in an absolutely positioned div to repeat-y behind the forms. Both this div and the print form are misbehaving–sometimes–and in some browsers. Additionally, the javascript does not validate due to an "&". I’m unsure if this is the culprit and/or how to fix the js.

Some of the problems:
1) FF…see screen capture. If you select print, no form, funky bkgd. If you reload and select print…it’s OK.
2) Safari…see attached. "Web" form perfect. "Print" pushes bdgd div to below entire form, leaving no bkgd where intended and LOTS of bkgd to scroll through until footer.
3) js doesn’t validate…see attached.
4) IE…not even going there today!

Thanks in advance for any and all help!

–Catherine

[Chris Coyier]

The fact that it works after you reload the page a second time leads me to believe that something is getting fired off too early, before the JavaScript can calculate the stuff it needs to calculate.

In the CSS, it looks like the #print div has display: none; Maybe remove that… and put it in the JavaScript:

Code:

$(“#print”).hide();

Because it will be rendered before it hides, jQuery should know it’s height and all that and be able to do the toggle properly.

If that still doesn’t work, maybe leave the CSS as is and try to replace

Code:

$(function() {

with

Code:

$(window).bind(“load”, function() {

I’m not 100% sure either of those things will work but it’s worth a shot.

[azzcat]

Hey, Chris!

I tried both of your suggestions, but have no improvement in FF. In fact, reload no longer works at all. However, on the upside, the page now validates :lol: (Got some help on LinkedIn for that part.)

The page also works perfectly now in Safari and Opera. Maybe it’s a CSS problem or the WuFoo script. At least it’s my site, not a client’s! I’ll try some other options tomorrow.

Thanks for your help!

–Catherine

[azzcat]

Looks like the problem is solved. I simply replaced the WuFoo js with WuFoo iframes. Now the only issue is some goofy solid splotchy rendering of dropped shadows in image text on IE7. Since other dropped shadows in site render fine, I’m assuming this problem is due to the js from MenuFader using transparency for div. And for the time being, I’m going to say, screw IE.

[Author]

Posts