Question

Im using jQuery ui position plugin to set some helping boxes next to their previous elements, it works if I set the previous box id, but doesnt if I try to make it more dynamic and, for this, I need it to be dynamic. Lets see the code:

CSS

.helpBox {
    width: 150px;
    height: 75px;
    position: absolute;        
    display: block;
    right: 0;
    bottom: 0;
    background-color: #bcd5e6;
    text-align: center;
}

HTML

<asp:TextBox ID="txtInformation" runat="server" TextMode="MultiLine" Rows="5" CssClass="required" ClientIDMode="Static"></asp:TextBox>
<div class="helpBox">This is a helping box.</div>

Sorry for the asp.net code, its just a textbox.

JS

$(".helpBox").position({
    of: $("#txtInformation"),
    my: "left center",
    at: "right center",
    offset: "10 0"
});

And that works, but if I try to use this so I can reuse it and make it work with all the help boxes it doesn’t:

$(".helpBox").position({
    of: $(this).prev(),
    my: "left center",
    at: "right center",
    offset: "10 0"
});

Now I wonder how to make it work. That property is supposed to handle that but somehow it isn’t. Can anyone tell me what I’m doing wrong?

Thanks.

Answer 1

You’re passing an object to the .position function. The object is being defined before it is passed to the function, so $(this).prev() will be evaluated in the context of the code that calls the method. this will not, necessarily, refer to your .helpBox here.

However, if you iterated over your help boxes with $.each, then this at each iteration would refer to the actual box:

$('.helpBox').each(function() {
   $(this).position({
     of: $(this).prev(),
     my: "left center",
     at: "right center",
     offset: "10 0"
   });
});

Demo