How would I use jquery to re-display a hidden div that holds error messages in a new position with error messages shown 1 at a time?
<p>I have a signup form and the gem I'm using in ruby on rails makes it very difficult to customise the location these form errors show up in. I've posted questions on here but not found a solution.</p>

<p><strong>Here is how the error messages are currently displayed. Validation is done live with out the page refreshing.. As soon as an error is corrected and another field is clicked the error message will go away. This is all fine so far:</strong></p>

<p><img src="http://i.stack.imgur.com/4Bivm.png" alt="enter image description here"></p>

<p>What I'd like to do is have my error messages show up 1 at a time but in a completely different position (slightly underneath my submit button) facebook style. </p>

<p>An idea I had was to have the messages hidden as soon as the submit button is clicked the first time with in order to get the error messages to show. Then have the messages show instantly again but in the area I want them to but one at a time.</p>

<p>I was wondering if jquery can do this?</p>

<p>So far in console I've managed to get the error messages to hide straight away when submit is clicked:</p>

<pre><code>$("#new_user").submit(function() {
  $(".field_with_errors").find(".message").hide()
});
</code></pre>

<p>Now I would use .show() to show the error messages again but this time I'd like to use CSS which I'm good with to position the error messages where I want them but only show one error message at a time. </p>

<p>I'm quite new 2 jquery, I've done a lot of reading and both javascript and jquery tutorials on lynda.com, read through the api also but I find the best way to learn for me personally is to put things into practice.</p>

<p>So far I'm starting to realise how much of a benefit jquery will be to me. Anyway I was wondering if anyone could give me an example of how I could achieve what I'd like to achieve.</p>

<p>Do I have access to all css rules by just using .css? if so then I have a "notify" class which is correctly positioned under the form for my error messages.</p>

<p>Then it would just be a matter of getting the error messages to show one by one.</p>

<p>I'd really appreciate some great examples.</p>

<p>Kind regards</p>
