CODEWITHSUNDEEP
jquerycssfirebug
Alain
Alain

Reputation: 1470

Wrong Jquery FadeIn behavior on my web site when a div is moved to be viewed

I am modifying an existing web site (www.gjelavoie.com). I am using the jquery fadein() and fadeout() to display my Contact form avoiding my visitors to access temporarily the main page. I still have an undesired effect:

While the Contact form appears (fadein), the main page (fadeout) is moved downward to a not understandable position.

The good news is, when the contact form disappears (fadeout), the main page (fadein), is moved back to the correct previous position.

The bad news is, this is an undesirable behavior.
I used firebug to observe the style properties changes on the fly to figure out what does change in the page... (or differently said) I have tried observing the css attributes for possible positions movements (with firebug, chrome inspector and opera inspector), but no luck, I just don't get it.

Please can someone tell me how to debug this thing using a proper tool, or redirect me to the right function under the firebug family tools (firebug, chrome, ...), as the technique to resolve this issue might be useful for other future bug ?

Thanks in advance.

Upvotes: 0

Views: 124

Answers (2)

jhoff
jhoff

Reputation: 716

in lightbox-life.js, you only need one $(document).ready(). No need to call it 5 times.

This is a CSS issue.

add / change these
#lightbox-panel {
    left: 50%;
    margin-left: -250px;
    position: absolute;
}

remove this
#lightbox-panel {
    margin-right: auto;
}

Also, Firebug is one of the best debugging tools around.

Upvotes: 2

Richard
Richard

Reputation: 4415

Can we see this on the live site?

I'm not quite sure what you mean exactly, but I think you might need to use position:absolute on the contact form so it doesn't push the page down.

Upvotes: 0

Related Questions