Trying to See 2nd Form Content Outside of the Container Div

**ronpat** · Feb 28, 2013 11:24

etidd,

The above recommendations will not interfere with or otherwise affect jQuery. They fix the improper positioning of the #submissionform.

**etidd** · Mar 1, 2013 12:01

Thank you, Ronpat. I put all of these changes & additions, and the page looks just fine.

**ronpat** · Mar 1, 2013 13:17

The noticable change is that the submissionform remains in the center of the page when the width of the browser window is changed.

I tried looking at your home page but apparently the code hasn't been transferred to the server, yet. Will implement the gray overlay after I get a look at your current HTML and CSS and can make sure it will still work. You and Pullo can decide how best to toggle the effect.

**ronpat** · Mar 1, 2013 22:23

Originally Posted by etidd

Thank you, Ronpat. I put all of these changes & additions, and the page looks just fine.

No, you have not moved the #submissionform up a few lines in HTML per my directions. It needs to be done. It's not optional. Until that is done, the box with the form will continue to be incorrectly positioned. Right now, it's in the upper left quadrant of the window.

**etidd** · Mar 1, 2013 22:58

Oops!

All right, I fixed it now.

**ronpat** · Mar 1, 2013 23:26

OK, it looks good on screen. You will now find that if you change the width of the browser window, the #submission form stays in the same place and does not drift across the page.

I will be back in touch in a bit about the gray overlay code, if you are still interested. (Did my screen shot match your intent?)

**etidd** · Mar 1, 2013 23:44

As far as CSS goes for the gray overlay, I have:

Code:

#blackoverlay{
    display:block;
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background-color:black;
    z-index:1;
    -moz-opacity: 0.8;
    opacity:.80;
	filter:alpha(opacity=80);
}

**ronpat** · Mar 2, 2013 00:14

Yes, I think it needs to be tweaked a tad and possibly applied in a different manner. (Haven't looked at tonight's code yet.) I'm gonna test first, though. The color is a bit darker (more opaque) than the shade that I dreamed up. Do you prefer the darker shade?

**ronpat** · Mar 2, 2013 01:01

OK, here are the tweaks.

Code:

#blackoverlay {
    display:block;
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    min-width:1171px;    /* add me, necessary. */
    height:100%;
    min-height:1010px;    /* add me, necessary. */
    background-color:black;
    z-index:1;    /* z-index:1 is all that is necessary.  8 is fine, but so is 1.  Your choice. */
    -moz-opacity: 0.8;
    opacity:.80;
    filter:alpha(opacity=80);
}

The reason for the min-width and min-height is to prevent the gray overlay color from failing to appear if the browser window is scrolled vertically or horizontally to bring off-screen parts into view.
You can demonstrate the effect by reducing the width or height of your browser window smaller than the full web page, reloading the page, toggling the gray overlay on, then scrolling to see the out-of-view parts of the page. The gray overlay will be missing.

FYI only:

Apparently the above style is being applied via an empty div that is inserted by JavaScript just after the <body> tag.

It is also possible to insert the code using a different technique:

Code:

body:after {
    content:"";
    display:block;
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    min-width:1171px;    /* add me */
    height:100%;
    min-height:1010px;    /* add me */
    background-color:black;
    z-index:1;    /* z-index:1 is all that is necessary.  8 is fine, but so is 1.  Your choice. */
    -moz-opacity: 0.8;
    opacity:.80;
    filter:alpha(opacity=80);
}

It would normally be set to display:none and would be toggled on via JavaScript by changing "none" to "block".

Both methods seem to work equally well.

**etidd** · Mar 2, 2013 13:14

Okay, I put those changes in there.

**etidd** · Mar 2, 2013 14:23

Awesome! We got the effect to toggle!

But, with the current styles, the form is displaying off to the right and way down, instead of nicely positioned in the center. Here is a screenshot.

I uploaded the current style sheet to the page.

Adjusting the top and left attributes of #submissionform had no effect on its position.

**etidd** · Mar 2, 2013 15:18

Okay, I figured it out. The JavaScript was messing around with the positioning in this block:

Code:

      // Overlay Effect Script for E-mail Submission Form
      jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + "px");
        return this; 
      }

Commenting it out solved the positioning issue.

**ronpat** · Mar 2, 2013 15:40

Wow, this is getting better. You changed the position property for #blackoverlay from absolute to fixed. That works much better! It means that you can delete those two min-width:1171px and min-height:1010px "tweaks" because they are unnecessary. (and I just learned something new!)

If you are interested, you can also reduce the z-index of #submissionform from 9 to 1. As wtih the #blackoverlay, the larger number works fine, but 1 is all that it really needs.

A note: The "Join the Mailing List" flag hanging under the right wing seems to have changed appearance slightly. Was that intentional?

**ronpat** · Mar 2, 2013 21:00

Originally Posted by ronpat

If you are interested, you can also reduce the z-index of #submissionform from 9 to 1. As with the #blackoverlay, the larger number works fine, but 1 is all that it really needs.

Correcting a careless error in my posts...

The z-index value of #submissionform has to be one greater than the #blackoverlay. If the overlay is zero, then 1 is OK here. If the overlay is 1, then #submissionform should be 2.

User Tag List

Thread: Trying to See 2nd Form Content Outside of the Container Div

Thread Tools

Display

Positioning Off

Bookmarks

Bookmarks

Posting Permissions