Grow your CSS skills. Land your dream job.

Menu Fader Problems

  • # May 4, 2009 at 2:46 pm

    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 (http://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

    # May 4, 2009 at 8:49 pm

    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.

    # May 4, 2009 at 11:54 pm

    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

    # May 5, 2009 at 11:18 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".