CSS Newbie - How to dynamically move buttons

Question

I have a form that I change after processing it through jquery - just because I have no control over the code that creates the form.

In any case, I add a button next to the login button, which is part of the form. For this, I use the following jquery:

$('.mynewbutton').hide(); $(".submit").addClass("buttonalign"); $('<div class="shared">').insertBefore($('.submit')); $('.submit').after($('<div class="circle circlealign">i</div>')); 

The new button that I am adding is actually a circle that I drew using css. This works great - the new button matches the login. Here's the css:

 .shared { position: absolute; width: 200px; } .buttonalign { position: absolute; top:340px; } .circlealign { position: absolute; top:340px; } 

The problem I need to solve is when the login form returns an error message, it displays an error at the top of the form and everything pushes everything. Thus, my login button and the new button end on some other form elements because their position is fixed.

I changed the fixed numbers to percent and em like this:

 .shared { position: absolute; width: 100%; } .buttonalign { position: absolute; top:40em; } .circlealign { position: absolute; top:40em; } 

But this changed the position of the new button so that it no longer aligns with the enter button. this is the path below on the page.
Can you point me in the right direction?

Thanks.

EDIT 1

The HTML presented here .. and of course the jquery stuff doesn't appear here, which is a pain .. but you can see what the original form looks like

 <H1>Login</H1><DL> <P class="err">Logon Failed</P> <form action="/cgi-bin/logon/logon" method="POST"> <DT>User ID</DT> <DD> <input class=" text" type="text" name="userid"> </DD> <DT>Password</DT> <DD> <input class=" password" type="password" name="password" > </DD> <DT></DT><DD><input class="submit" type="submit" name="submit" value="Logon"> </DD> </FORM></DL> 

Answer 1

It’s hard for me to understand why you use absolute positioning in general, so if it’s necessary for some reason, forgive me. My solution was to wrap the existing button in a div, and then add your custom button to this container. Then you can position your elements inside this container and they will be knocked off from the rest when the error message returns.

HTML:

 <H1>Login</H1> <DL> <P class="err">Logon Failed</P> <form action="/cgi-bin/logon/logon" method="POST"> <DT>User ID</DT> <DD> <input class=" text" type="text" name="userid"/> </DD> <DT>Password</DT> <DD> <input class=" password" type="password" name="password" /> </DD> <DT></DT> <DD><input class="submit" type="submit" name="submit" value="Logon"/> </DD> </form></DL> 

CSS

 #actionButtons > * { float: left; margin-right: 2px; } #actionButtons:after { content: ""; clear: both; display: block; } 

jQuery (wrapped in a DOM ready function):

 $(function(){ $('.submit').wrap('<div id="actionButtons"/>'); $('#actionButtons').append($('<div class="circle circlealign">i</div>')); }); 

UPDATE - CSS circle:

 .circle { display: block; width: 30px; height: 30px; border-radius: 15px; background: #d1d1c9; box-shadow: 1px 1px 2px #000; opacity: 0.95; font: italic bold 2em/1em "Times New Roman"; text-align: center; color: #000; text-shadow: 0 1px 0 #666; text-decoration: none; } 

Here is a demo: http://jsfiddle.net/ebTS2/1/

Answer 2

If the error is returned in the DIV tag, perhaps you can use the jQueryUI dialog() method to display the error message, then hide the DIV?

  $( "#myError" ).dialog({ autoOpen: true, height: 300, width: 350, modal: true, close: function() { $('#ErrorDIV').hide(); } });