Ty, as an experiment, you can set any one or all of the .signupstep boxes to {display:block;} (remember: normally only the .signupstep1 box is {display:block}, the others are {display:none;}). The more you set to display:block, the taller the footbox will become. It’s height increases and decreases to accommodate the content. And if the Email Address error image or message is also visible, the height of the footbox will be even taller. Yikes! Easy peasy.
Hey, Ronpat,
Well, I’m almost there… check out the progress on the test page! Looks good.
I’m working on getting the error messages to display, which I tried to display in a similar color scheme that you made for the first form, but I haven’t yet been able to make it display. The PHP returns an array of error messages (if there is more than 1), which JS then populates into an unordered list. I want to have circles for the list items. On the current HTML file starting at line 413, I created a ul element with an i.d. of #errormessage. Normally, it would be left blank at the beginning, but I want to see it successfully displayed before I make it interactive. In the current homepage.css file, the styles for #errormessage ul begin at line 418.
-ty
Hello, Ty.
Let’s start by fixing a couple of duplicate IDs id="errormessage"
HTML lines 407-413 (see also homepage.css line 418)
<p id="errormessage"></p>
</fieldset>
<fieldset class="submissionform aicatchbox"> <!-- begin 2nd form markup -->
<label for="aicatcher">Please leave this field blank:</label>
<input id="aicatcher" type="text" name="aicatcher" value="">
</fieldset>
<ul id="errormessage">
I’m not sure how those circles that you mentioned are supposed to look. Could you create a drawing that shows a couple of examples of how they should look on the page with whatever message inside that you wish? I didn’t see any CSS, so maybe that’s what you’re looking to me to write.
Okay, all the steps seem to be working now!
I did get the error messages to show, but they don’t have the neat box shadow that I like from the first step. I want to find out why the box-shadow isn’t showing.
.signupstep3 is also very small compared to the previous steps. Maybe the text should be larger and a minimum height added?
Ty, I’m gonna have to ask you to make screen shots or draw pictures to help me identify with the things you are describing. You may be triggering some effects with Javascript and I’m thinking only about CSS. Whatever it is, I’m a little lost.
What neat box shadow in the first step are you talking about?.. tThe invalid e-mail address text? It seems to be {display:none} at the moment. I imagine your JS would add the second line with the user’s email address.
If you need help with PHP or JS, we’ll have to round up an appropriate person.
In what way is signupstep3 small? I’m not sure what else is supposed to be in that box other than the user’s name and e-mail address which is plugged into it by PHP or JS.
I’ve already done some fine tuning of the scripts (Thanks, megazoid).This should be strictly a CSS question. I don’t think JS triggers anything except the .show() method probably triggers display:block;, but the invalid e-mail box on the first form displays just how I want the error message box for the second form to show. I don’t think JS is triggering any changes to CSS that would interfere with this.
I want the error message to display in a box shadow like the invalid e-mail one. If you would like to see the error messages show up, make an invalid submission and the error messages will be populated in there. You will see them in red text but without the box or shadow. In the current CSS, the styles for #errormessage ul begin at line 418. I haven’t been successful as you’ll see I applied a box shadow there.
.signupstep3 is the successful submission box. I do think the text could afford to be larger, and the box is very small when compared to the other 2 previous steps. I’m thinking a value for min-height should be a good thing.
Does this describe the error message shadow and the height of the last sign up box better?
Update:
I changed the error message styles to this:
#errormessage ul {
/* controlled and/or populated by JS or PHP */
display:list-item;
}
#errormessage li {
color:#f00;
background-color:#fee;
box-shadow:0 0 2px 2px #f00;
font-weight:bold;
font-family:Arial,sans-serif;
font-size:1em;
padding:.125em .25em;
margin:.5em auto 0;
list-style:disc;
}
The box shadow has made an appearance, but the width doesn’t automatically wrap to the width of #errormessage ul like the #invalidemail does.
Is that you tinkering around in there? I see that there is some activity in the database from form submissions. 
Yes, that’s me !
From what I can see so far, the JS needs to do a bit of error checking and should be more aware of where it is in the sign-up sequence.
I’ll rewrite/reassign the styles for the error message box so they can be applied to other content.
Do you have something like either of these in mind?
or another variation?
I want the first version with the list-style of disc. The width is just right, too, on the first screenshot. Looks great!
CSS CHANGES ONLY.
The following lines of CSS can be deleted. They aren’t doing anything. The ul box is always visible.
homepage.css (line 418)
/*
#errormessage ul {
display:none;
}
*/
Please change #errormessage to .signupstep2 in the CSS ONLY. Do NOT change <ul id="errormessage"> in the HTML. ( I assume the ID is targeted by JS. If it’s not, it isn’t needed and CAN be deleted.)
.signupstep2 ul {
list-style-type:disc;
display:table; /* ADD Me */
color:#f00;
background-color:#fee;
box-shadow:0 0 2px 2px #f00;
font-weight:bold;
font-family:Arial,sans-serif;
font-size:1em;
text-align:left;
padding:.125em .25em .125em 1.5em; /* Change Me */
margin:.5em auto 0;
}
Width and height adapt to content. You could add a max-width to the ul if you see the need.
This is looking much better, but there is still a display issue. At default, there is a small red box that hangs out under there because it’s displaying the empty box. I can probably solve this with an extra line or two of JS to help it know where it is in the process and when to display the unordered list.
edit: The JS addition to turn the display from ‘none’ to ‘table’ and vice versa is not hiding the default box (looks like a little smudge of red border). I inserted your styles verbatim and updated my files. Maybe I should ask in my JS thread about this… maybe my scripting is causing this, but I doubt it.
Hi, Ty.
Yes, I must not have tested properly last night. The smudge is the box shadow around the <ul>.
You can fix that a couple of different ways. Your choice.
Add the following CSS. Then with JS, toggle {display:none} to {display:table} OR delete the {display:none} property altogether to make the errormessage box visible
#errormessage {display:none}
If you would rather stick to using {display:block} to make things visible, then put a wrapper box around the <ul> and set it to {display:none} by default, then use JS to set it to {display:block} to show #errormessage. Something like this:
<div id="signupstep2errorbox">
<ul id="errormessage">
...
</ul>
</div>
The first choice would be easier and not involve adding another box but you must remember to use {display:table} instead of {display:block}
Ty, the #errormessage box should be coded as shown below so it is normally hidden. Then use JS to set it to display:table to make it visible when needed.
Have you thought about using JS to clear (reset) all error messages when a user clicks within any input field? Make them go away pronto instead of using a timeout and transition. Just a thought.
1 Like
Yes, this solves it, and yes, I decided to make the error messages fade out after a delay.
Looks like this is done, but I discovered a REALLY weird case when the same e-mail address is signed up. Try putting the same e-mail address twice and see what the error messages do.
As a user, I find that annoying… odd, at least. I would rather the error message remain on the screen and disappear instantly when I click in a box to correct it or cancel the step.
Yes, that was there before. Just a guess, but it looks to me like JS is not resetting everything back to their initial states when the step is cancelled or completed or abnormally exited.
All right, Ronpat!
I think I made those tweaks as you suggested with the error messages. I should be all done now. It looks finished.
Uhhh, hmmmm. I wouldn’t rush it to market just yet.
First, though, the red shadow around the field boxes looks GREAT! and disappears nicely when clicked
But, here is what else I see…
1. Open your page with a control-shift-R to completely reload everything from scratch.
2. Scroll to the bottom and type in an e-mail address.0
3. Click “Sign Me Up!” I see the following errors (as expected)…
4. Click “Cancel”. A clean signup box appears:
5. Enter the e-mail address again and click “Sign Me Up!” and this is what I see…
I expected to see a clean “Join the Mailing List” box, too, but it hasn’t forgotten the errors from the previous attempt AND it has the phantom shadow above the “Sign Me Up!” button.
The phantom outline is a JS issue:
<ul id="errormessage" style="display: table;"></ul> has not been reset to “none”.
It is also probable that the other error JS initiated indicators have not been reset either.