Form in a modal box causing site to "Jump"

Hi everyone!

I built this http://www.culinariafoodandwine.com/contact_copy.html. It works great with the exception of implementing a form in a modal box. I’m using Colorbox http://colorpowered.com/colorbox/ and MachForm http://www.appnitro.com/ (which is ALOT like Wufoo, which exhibited the same behavior).

The problem is when you submit a form that is improperly filled out the Colorbox/form refreshes roughly 35px vertically out of the browser! WTF? :o

[url=http://skitch.com/jeffimmer/ddpux/contact-call-or-email-us-culinaria]Click for full size

[url=http://skitch.com/jeffimmer/ddpuw/contact-call-or-email-us-culinaria]Click for full size

I’m tried every CSS thing I can think of! Help?

Hi,

The jump seems to be where the document tries to scroll to the highlighted item via the fragment identifier.


    <form id="form_1" class="appnitro"  method="post"[B] action="#main_body[/B]">


You could try and set the box to position:fixed and then the scroll would be inside the box.


#colorbox{position:fixed}
* html #colorbox {position:absolute;}

Paul O’B >> DING DING DING DING!!

We have a winner! :smiley:

PM me your email address sir!

Eric>> You probably saw I have been using Fancybox as well…no luck though. Identical behavior in regards to the underlying site.

OK, so check this out:

After A LOT of work I’ve got it working in Safari, but it still doesn’t work in Firefox! It still jumps! http://www.culinariafoodandwine.com/contact_copy.html

EricWatson: I couldn’t find an option within Colorbox to do this so I went completely crazy and did what you asked here: http://www.culinariafoodandwine.com/contact.html, but using Fancybox instead. Again, it works great in Safari but “jumps” in Firefox for Mac. However, in this instance the Fancybox does reposition itself to the center of the viewport but the underlying site still jumps north about 50px out of site! What the hell?

This is truly making me insane.

It’s as if the site itself has decided to move upwardly out of the viewport. If you edit the <body> to be

position:absolute; 
top: 0;

it STILL happens.

…and the fact that the site behind the popup box jumps to the top is probably just the way it works when you hit submit. My site using fancybox reacts the same.

Thanks for trying Ryan! I really do appreciate it.

A couple things:

  1. I tried turning off the overlay with display:none but it still caused that weird Firebug behaviour.

  2. You can play around with the Fancybox version at culinariafoodandwine.com/contact.HTML (as opposed to /contact_copy.HTML where the Colorbox version resides if that helps). I don’t care what script I use as long as I can put that form in some kind of modalbox.

It works in Safari…any known Firefox issues that we could narrow this down to?

Thanks again! If anyone can nail this I’ll iwe you one!

I would try your hand at fancybox. I’ve used it extensively with a forms and no problem. I know fancybox has a no centering parameter. Or adding overflow auto to fancybox should just add a horizontal scroll bar to the box upon validation with no movement. Try that…

Hello. Naw, the fancybox one seems to be acting just as I would think it would. Once validated, the height grows and it readjusts itself to keep center. It jumps a little while adjusting because all the js going on. If you turn off auto centering in the fancybox one it should fix the problem. I know fancybox has that option.

I should also mention that the JS doesn’t seem to be steting values back.

I thought I had this proble msolved (on colorbox element it wouldn’t reset the top offset value, I tested that locally and it didn’t work there (and it had a new offset value))

The JS is too dynamic for me to work with. And it’s also annoying having your page fade out whenever my mouse is in the firebug window but I guess that’s just the script ;).

I just spent about 35 minutes trying to get this to work and the JS is doing something funky in conjunction with yoru site. A local test of colorbox without the rest of your site yeilds no jumping so your code is clashing with the JS.

All I can say right now is to either find a new script (or live without the popout form) :(.

Perhaps someone else can take a look, I’m out for the night. :slight_smile:

Hi, make sure your HTML/CSS is valid, just saying :).

I opened the page you linked to, (used the screenshot to make sure the URL was correct) and I get a different page then what you are getting?

But first validate (a “thing of interest” at this point ;))

Sorry I couldn’t be of more help (had no code :))

The URL is right. You just have to click “request an estimate” to get the modal box to er, mode-al itself.

I’ll definitely validate my code first thing in the morning! As far as posting code it seems pointless as I have no idea what the issue is and there are multiple css files at work here. Firebug is your best bet.

If you or anyone knows Wufoo at all that’s probably a good clue as well as Machform (the app generating the form in the modal box) is almost identical to Wufoo.

It looks like it may be because of the horizontal scroll bar that gets introduced once the validation errors run. Try adding overflow hidden to the form to test and/or fix. Or just prevent any overflow.

Edit - actually that does not seem to be it. My firebug wont work with that for some reason. It makes the whole box disappear. Whats all that extra space at the bottom of the form doing there. That may be to blame as well. The box may be trying to center itself and thats what makes it go up too much?

ALl said and done I’d like the validation errors done first. I just did a very quick run in firebug and after about a minute I decided I’d be better spending my efforts when the page is valid (so I can rest easy knowing it is/is not that :))

The page is valid now.

It had two mistakes: two capital “REL=” in the <head> which are now fixed.

CSS doesn’t validate but that’s because proprietary tags in the form’s css. The site css is solid.

I’m still working on this and could use any help you can provide!

Turn off the re-centering of the box. In other words, let it scroll with the page. It should have that option. Others of the same kind do. I bet that would fix it.