Question

I want to display image after textbox for validation (tick and cross)
But when I show or hide them, the textbox jumps vertically up or down

Here is the HTML

<table cellspacing="20">
<tr>
    <td>Username</td>
    <td>*<input type="text" id="username" class="required" name="user.username" value="" size="30" />
    </td>
</table>

and the javascript

window.onload = function(){

$('input.required').after('<img class="toggle"></img>').next().hide();

$('input.required').blur(function() {
 if ($(this).val().length == 0) {
    $(this)
    .addClass('error')
    .next()
    .attr('src','images/unchecked.gif').fadeIn()

 }
 else
 {
    $(this).next().attr('src','images/checked.gif').fadeIn()
 }

I want that the textbox should remain fixed and not move on toggling the image

Answer 1

set the visibility-property of the image via css() to hidden instead of using hide()

visibility:hidden hides an element, but the element will still take it’s space. hide() will set the display to none, where the element doesn’t take space.