Witam.
Próbuję ustawić komunikat dla pola na formularzu. Chcę aby był wyświetlany bezpośrednio pod inputem. Próbowałem różnych rzeczy znalezionych na forach lub przykłady z dokumentacji JQuery, ale otrzymuję dziwaczne liczby w left i top. Elementy input i message występują na stronie bezpośrednio po sobie i mają tego samego parenta.
messageId = '#' + message;
inputId = '#' + input;
var width = $(inputId).outerWidth();
var height = $(inputId).outerHeight();
var left = $(inputId).position().left;
var top = $(inputId).position().top + height;
//próba 1. ustawienie przez style
var messageStyle = 'left: ' + left + 'px;' ;
+ ' top: ' + top + 'px';
$(messageId).attr('style',messageStyle );
//próba 2. ustawienie przez position()
$( messageId ).position({
of: $( inputId ),
my: "left bottom",
at: "left top"
})
$(inputId).mouseover(
function()
{
$(messageId).hide().fadeIn();
}
).mouseout(function()
{
$(messageId).fadeOut();
}
)
<div class='item invalid lvl_2'>Label<input type='text' id='item_9' name='item_9' value='185' />
<div id="item_9_msg" class="field_error" style="top: 707px; left: 1132px; display: none;">Błędna wartość</div>
<script>showMessageOnInput('item_9','item_9_msg')</script>
</div>
Kod html jaki uzyskuję przy 2. próbie. HTML pochodzi z firebuga i style elementu item_9_msg jest ustawione przez funkcję. top jest za duży o ok 500px a left powinien być ok. 800px. Nie jestem biegły w js i jquery więc zapewne gdzieś czegoś nie rozumiem. Będę wdzięczny za wszelkie wskazówki. Uwagi odnośnie jakości kodu też mile widziane.
Jeszcze css dla tych elementów:
.item input,
.nested_item input
{
float:right;
}
.field_error
{
background-color: red;
color:white;
border-width: 1px;
border-color: white;
display: none;
position: absolute;
z-index: 1;
}