Yes, it should display the address form when a user submits a valid e-mail address, but I’ve also not uploaded my PHP/JavaScript files because this part is incomplete. I’m also looking for a way to block the rest of the page except for that second form after the user submits an e-mail. I started a thread on that in the JavaScript/jQuery section.
I also want to apply a gray mask over the entire page except for that second form for when it is active and displayed on the page. I don’t know what is an optimal way to accomplish that right now.
I combined the homepagebgwinter.gif and bg2.jpg so I can have the best of both worlds.
I would like to recommend that you move the “submission form” up a few lines on your HTML page. Doing this will make it the last item inside <div id=“body”> where it can be more appropriately positioned. Right now, that form is out of place.
HTML:
Cut from Line 392 <div id=“submissionform”> down through the close </div> on Line 428.
Paste it above the close </div> on line 350 (immediately below the comment <!-- end wrapping div –> )
CSS:
You will need to make a few CSS changes too (Delete the RED, Add the BLUE):
You’ll notice that #submissionform is no longer display:none. You can remove the left-most open comment mark to set it back to display:none. I did this so you could see what these changes are doing.
I am definitely down to make these changes, especially if it makes my page more stable across different browsers; however, I am trying to place a black overlay div over the entire body of the page using jQuery, which is triggered by the 1st form being successfully submitted. If I re-arrange the order and place the 2nd form within the body of the page, I think that will make placing the black overlay over everything impossible (correct me if I’m wrong) simply because of the order that it’s in.
Based on your description in this forum, here’s where I’m going with this. It is a “magic” solution that works because your page has a fixed width and height. Ya still need JavaScript to toggle the effect. The gray screen blocks clicks to everything behind the e-mail signup form. Sounds like your requirements might have changed, so maybe I’m off base.
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.
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.
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?)
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?
#blackoverlay {
display:block;
position:absolute;
top:0%;
left:0%;
width:100%;
[color=blue]min-width:1171px;[/color] /* add me, necessary. */
height:100%;
[color=blue]min-height:1010px;[/color] /* add me, necessary. */
background-color:black;
z-index:[color=blue]1[/color]; /* 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:
body:after {
content:"";
display:block;
position:absolute;
top:0%;
left:0%;
width:100%;
[color=blue]min-width:1171px;[/color] /* add me */
height:100%;
[color=blue]min-height:1010px;[/color] /* add me */
background-color:black;
z-index:[color=blue]1[/color]; /* 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”.
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?
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.
All right, I fixed it now.